platty 0.0.8

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

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 our app theme here. We do the leg work of bridging it to Cupertino.
      unifiedTheme: ThemeData(
            primarySwatch: Colors.lightBlue,
            bottomAppBarColor: Colors.red,
          ),
      home: ExamplePage(),
    );
  }
}

PlatformApp unifies all of the same properties between MaterialApp and CupertinoApp to allow both instances of widgets in the hiearchy and switching styling based on platform.

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

Button/CupertinoButton -> PButton

Material Raised Button Cupertino Button

Source

FlatButton/CupertinoButton -> PFlatButton

Material Flat Button Cupertino Flat Button

Source

AppBar/CupertinoNavigationBar -> PNavigationBar

Android Nav iOS Nav

Source

SliverAppBar/CupertinoSliverNavigationBar -> PSliverNavigationBar

Slider/CupertinoSlider -> PSlider

Sliders

Source

Switch/CupertinoSwitch -> PSwitch

Switch

Source

BottomNavigationBar/CupertinoTabBar -> PTabBar

Bottom Navigation Android Bottom Navigation iOS

Source

Scaffold/CupertinoScaffold -> PScaffold

CircularProgressIndicator/CupertinoActivityIndicator -> PActivityIndicator

Progress

Source

BackButton/CupertinoNavigationBarBackButton -> PBackButton

AlertDialog/CupertinoAlertDialog -> PAlertDialog

Android Alert Ios Alert

Source

Properties Specific to a platform have a prefix #

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 #

This library bundles a few standard functions to easily return code that is unique for each platform. Instead of checking
and switching on the result of Theme.of(context).targetPlatform, utilize the following methods:

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:

PButton("Hello Android", 
  renderPlatform: TargetPlatform.Android,
)

This will swap the rendering over to Material widgets for this specific widget.

Note: Wrapping a widget with the PTheme will propagate that instance down the widget hierarchy and is thus preferred than manually specifying the renderPlatform for each individual widget.

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.8] - 1/3/2018

FIX - issue where using navigatorObservers in the PlatformApp threw an exception since if one is reused in multiple instances, the framework will throw an exception. Now we utilize them in whatever the current render platform is only.

[0.0.7] - 1/2/2018

NEW - Upgrade to Flutter 1.1.4

NEW - all widgets are now marked private imports, meaning switch imports from:

import 'package:platty/widgets/alert.dart';
import 'package:platty/widgets/button.dart';

to:

import 'package:platty/platty.dart';

This will clean up the imports and make it easier to use the library.

NEW - Library now utilizes new CupertinoTheme and MaterialBasedCupertinoThemeData to bridge styling gap between widgets finally.

androidTheme -> unifiedTheme and no longer a function. The app will utilize the material theme and properly bridge it to Cupertino world.

buttonColor for Theme is now reflected in PButton iOS as well.

bottomAppBarColor for Theme now actually works with android and iOS PTabBar.

caption from TextTheme used in Theme now propagates to PTabBar as the inactive color on iOS and Android, to match behavior expected.

iconColor for a PNavBar utilizes the IconTheme if no iconColor specified. Defaults to CupertinoColors.ActiveBlue if all missing.

[0.0.6] - 12/29/2018

Fixes issue where PSliverNavigationBar on iOS, when specifying title and iosLargeTitle, displays both a middle and the large title. This would require dev to pass null title on iOS, requiring more work than necessary.

[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.8

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/platty.dart';
  
Version Uploaded Documentation Archive
0.0.8 Jan 3, 2019 Go to the documentation of platty 0.0.8 Download platty 0.0.8 archive
0.0.7 Jan 2, 2019 Go to the documentation of platty 0.0.7 Download platty 0.0.7 archive
0.0.6 Dec 29, 2018 Go to the documentation of platty 0.0.6 Download platty 0.0.6 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]
60
Health:
Code health derived from static analysis. [more]
98
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
70
Overall:
Weighted score of the above. [more]
74
Learn more about scoring.

We analyzed this package on Feb 20, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.1.0
  • pana: 0.12.13+1
  • Flutter: 1.2.1

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

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

Analysis of lib/src/theme.dart reported 1 hint:

line 5 col 7: This class (or a class which this class inherits from) is marked as '@immutable', but one or more of its instance fields are not final: PTheme.data

Fix lib/src/widgets/alert.dart. (-0.50 points)

Analysis of lib/src/widgets/alert.dart reported 1 hint:

line 6 col 1: The class 'Future' was not exported from 'dart:core' until version 2.1, but this code is required to be able to run on earlier versions.

Fix lib/src/widgets/navigation_bar.dart. (-0.50 points)

Analysis of lib/src/widgets/navigation_bar.dart reported 1 hint:

line 213 col 41: 'actionsForegroundColor' is deprecated and shouldn't be used.

Fix lib/src/widgets/scaffold.dart. (-0.50 points)

Analysis of lib/src/widgets/scaffold.dart reported 1 hint:

line 17 col 32: 'resizeToAvoidBottomPadding' is deprecated and shouldn't be used.

Maintenance suggestions

The package description is too short. (-20 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

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

While nothing is inherently wrong with versions of 0.0.*, it might mean 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 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test