platty 0.0.5

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • new68

platty

Platform Conforming Widgets for Flutter!

Flutter makes no attempt to provide familiar widgets for a specific platform (unlike React Native, ionic, and other cross platform tooling). This has enormous benefits to unified rendering on all platforms, maximum flexibility, and eliminating a whole class of bugs and testing done for each platform. While this is great, many scenarios we want our apps to look and feel like an Android or iOS app. Platty allows you to render iOS (Cupertino) and Android (Material) like widgets with minimal effort and maximum control in a unified API.

No more checking for platform inside render blocks to render a CupertinoButton or FlatButton, let platty do the logic for you! Want to use bottom tabs in your app that resolve to platform specific UI? No problem!

Widgets

List of Widget Files:

Alerts

Back Button

Buttons

Navigation Bars

Progress

Routing

Scaffold

Slider

Switch

TabView

Getting Started

Use platty to unify render-specific APIs for you. The library utilizes the BuildContext theming APIs to propagate platform information into the Widgets.

By default, all widgets conform to the default TargetPlatform. It looks up the Theme.of(context).platform for its default. Also, all widgets provide a renderPlatform prop that allows you to choose which one to render (if you wish).

Replace MaterialApp and CupertinoApp with PlatformApp:


class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return PlatformApp(
      title: 'Flutter Demo',
      
      // specify Android Material Theme data here. it's a lazy evaluated function, only rendering if platform is Android.
      androidTheme: () => ThemeData(
            
            primarySwatch: Colors.lightBlue,
            bottomAppBarColor: Colors.red,
          ),
      home: ExamplePage(),
    );
  }
}

PlatformApp unifies all of the same properties between MaterialApp and CupertinoApp to allow you to choose.

NOTE: Not specifying a renderPlatform will render a CupertinoApp on iOS, and might cause issues with widgets that expect a material app instance.

NOTE: There is not a CupertinoTheme just yet in Flutter. Check out this pull request . once that is in the main flutter releases, we can then create PTheme that merges MaterialTheme and CupertinoTheme instances. For now it is highly recommended to specify targetPlatform: TargetPlatform.android in the constructor of PlatformApp.

Now you replace widgets that are included in this library with their "P" counterparts:

Button/CupertinoButton -> PButton

FlatButton/CupertinoButton -> PFlatButton

AppBar/CupertinoNavigationBar -> PNavigationBar

SliverAppBar/CupertinoSliverNavigationBar -> PSliverNavigationBar

Slider/CupertinoSlider -> PSlider

Switch/CupertinoSwitch -> PSwitch

BottomNavigationBar/CupertinoTabBar -> PTabBar

Scaffold/CupertinoScaffold -> PScaffold

CircularProgressIndicator/CupertinoActivityIndicator -> PActivityIndicator

BackButton/CupertinoNavigationBarBackButton -> PBackButton

AlertDialog/CupertinoAlertDialog -> PAlertDialog

Any widgets that have ios-only or android-only counterparts, they are prefixed to android/ios accordingly:

For example PButton, androidShape applies to RaisedButton.shape property. It does not exist on a CupertinoButton. However CupertinoButton has a borderRadius and pressedOpacity. Those two props become iosBorderRadius and iosPressedOpacity.

Helpers

Specific Platform Instance

To have a specific P-Widget utilize a specific platform theme only, such as Material or Cupertino, you can wrap it in a PTheme instance:

PTheme(
  data: PThemeData(
    platform: TargetPlatform.android,  // or iOS
    child: child,
  ),
);

Or, more simply, utilize helper method:

PTheme.ios(child);
PTheme.android(child);

Also all P-widgets and methods allow you to override the PTheme with a renderPlatform parameter in their constructor or calling method.

Creating Your Own Platform-Adapting Widgets

We can extend upon the logic included in this library to build our own, powerful platform-adapting widgets. Included in the library is the PlatformAdaptingWidget base class, which inherits from StatelessWidget.

class SamplePlatformWidget extends PlatformAdaptingWidget {
  final Color color;

  SamplePlatformWidget({Key key, @required this.color, TargetPlatform renderPlatform}) // should allow consumers to choose TargetPlatform
      : super(key: key, renderPlatform: renderPlatform);

  /// Render a material widget here. Most Material widgets require a Material Theme instance above it.
  @override
  get renderMaterial => (BuildContext context) {
        return BackButton(
          color: color,
        );
      };

  /// Render a cupertino widget here.
  @override
  get renderCupertino => (BuildContext context) {
        return CupertinoNavigationBarBackButton(
          color: color,
        );
      };
  
  /// Render a fuchsia widget here. (defaults to material)
    @override
    get renderFuchsia => (BuildContext context) {
          return BackButton(
            color: color,
          );
        };
}

Platform-specific logic

This library comes with a few standard ways to implement behavior based on platform. You can utilize platformWrap, which allows you to specify a child, and on 1 or all platforms, wrap it with another widget:

platformWrap(
      context,
      child: PButton(
        padding: EdgeInsets.all(0.0),
        child: Text(title),
        color: Colors.red,
        onPressed: () {
          Navigator.push(context, PlatformRoute.of(context, builder: page));
        },
      ),
      renderCupertino: (context, child) => Padding(
            padding: EdgeInsets.only(bottom: 8.0),
            child: child,
          ),
    );

You can specify any of renderCupertino, renderMaterial, or renderFuschia (or none). Any render methods not specified default to the child.

Also, platformSelect is a helper that enables returning different objects based on platform in a unified way. In our PlatformAdaptingWidget, we utilize it to return a different widget based on platform. You can use it to return any return type based on platform:


Column(
  children: [
    platformSelect(context, 
      renderMaterial: (context) => Text("I am android"),
      renderCupertino: (context) => Text("I am iOS"),
      renderFuchsia: (context) => Text("I am FUCHSIA")) 
  ],
),

renderMaterial and renderCupertino are required. renderFuchsia defaults to material.

or you can return a non-widget too:

Column(
  children: [
    Text(platformSelect(context, 
      renderMaterial: (context) => "I am android"),
      renderCupertino: (context) => "I am iOS",
      renderFuchsia: (context) => "I am FUCHSIA")) 
  ],
),

[0.0.5] - 12/03/2018

  • NEW - adds MaterialPatcher component to wrap certain Cupertino widgets so that material ancestors have a material reference and do not error out. This fixes error using CupertinoApp with some material ancestors without Material parents.

  • PlatformApp can specify a PTheme to be passed down the hierarchy instead.

  • FIX - swapping rendering platform from the IDE did not hot reload widgets in debug mode.

  • NEW - adds platformWrap and platformSelect. platformWrap enables platform-specific logic for a component by passing down the child and allowing you to wrap it:

platformWrap(
      context,
      child: PButton(
        padding: EdgeInsets.all(0.0),
        child: Text(title),
        color: Colors.red,
        onPressed: () {
          Navigator.push(context, PlatformRoute.of(context, builder: page));
        },
      ),
      // CupertinoButton does not include a margin like MaterialButton.
      renderCupertino: (context, child) => Padding(
            padding: EdgeInsets.only(bottom: 8.0),
            child: child,
          ),
    );

You can specify any of renderCupertino, renderMaterial, or renderFuschia (or none). Any not specified default to the child.

platformSelect is a helper that enables returning different objects based on platform in a unified way. In our PlatformAdaptingWidget, we utilize it to return a different widget based on platform. You can use it to return any return type based on platform:


Column(
  children: [
    platformSelect(context, 
      renderMaterial: (context) => Text("I am android"),
      renderCupertino: (context) => Text("I am iOS"),
      renderFuchsia: (context) => Text("I am FUCHSIA")) 
  ],
),

renderMaterial and renderCupertino are required. renderFuchsia defaults to material.

[0.0.4] - 11/25/2018

  • Adds support for Fuchsia in PlatformAdaptingWidget, which defaults to renderMaterial.

  • Added missing props for MaterialButton in PButton to be passed down on Android.

[0.0.3] - 11/21/2018

Fix for PButton Border Radius on iOS. Previously did not utilize same default as CupertinoButton, causing button not to be rounded.

[0.0.2] - First Release

Initial Release of platty

example/README.md

example

A new Flutter project.

Getting Started

For help getting started with Flutter, view our online documentation.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  platty: ^0.0.5

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:platty/platform_app.dart';
import 'package:platty/platform_helpers.dart';
import 'package:platty/theme.dart';
import 'package:platty/widgets/alert.dart';
import 'package:platty/widgets/back_button.dart';
import 'package:platty/widgets/button.dart';
import 'package:platty/widgets/material_patcher.dart';
import 'package:platty/widgets/navigation_bar.dart';
import 'package:platty/widgets/platform.dart';
import 'package:platty/widgets/progress.dart';
import 'package:platty/widgets/routing.dart';
import 'package:platty/widgets/scaffold.dart';
import 'package:platty/widgets/slider.dart';
import 'package:platty/widgets/switches.dart';
import 'package:platty/widgets/tabs.dart';
  
Version Uploaded Documentation Archive
0.0.5 Dec 3, 2018 Go to the documentation of platty 0.0.5 Download platty 0.0.5 archive
0.0.4 Nov 25, 2018 Go to the documentation of platty 0.0.4 Download platty 0.0.4 archive
0.0.3 Nov 21, 2018 Go to the documentation of platty 0.0.3 Download platty 0.0.3 archive
0.0.2 Nov 20, 2018 Go to the documentation of platty 0.0.2 Download platty 0.0.2 archive
0.0.1 Nov 20, 2018 Go to the documentation of platty 0.0.1 Download platty 0.0.1 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
49
Health:
Code health derived from static analysis. [more]
99
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
70
Overall:
Weighted score of the above. [more]
68
Learn more about scoring.

We analyzed this package on Dec 5, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.1.0
  • pana: 0.12.7
  • Flutter: 1.0.0

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Fix lib/platform_app.dart. (-0.50 points)

Analysis of lib/platform_app.dart reported 1 hint:

line 9 col 7: This class inherits from a class marked as @immutable, and therefore should be immutable (all instance fields must be final).

Fix lib/theme.dart. (-0.50 points)

Analysis of lib/theme.dart reported 1 hint:

line 5 col 7: This class inherits from a class marked as @immutable, and therefore should be immutable (all instance fields must be final).

Maintenance suggestions

The description is too short. (-20 points)

Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.

Package is pre-v0.1 release. (-10 points)

While there is nothing inherently wrong with versions of 0.0.*, it usually means that the author is still experimenting with the general direction of the API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.68.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test