More unified widgets

README.md

@@ -15,33 +15,35 @@ Want to use bottom tabs in your app that resolve to platform specific UI? No pro
 
 List of Widget Files:
 
-[Alerts](/lib/src/widgets/alert.dart)
+[PAlertDialog](/lib/src/widgets/alert.dart)
 
-[Back Button](/lib/src/widgets/back_button.dart)
+[PBackButton](/lib/src/widgets/back_button.dart)
 
-[Buttons](/lib/src/widgets/button.dart)
+[PButton/PFlatButton](/lib/src/widgets/button.dart)
 
-[Navigation Bars](/lib/src/widgets/navigation_bar.dart)
+[PNavigationBar/PSliverNavigationBar](/lib/src/widgets/navigation_bar.dart)
 
-[Progress](/lib/src/widgets/progress.dart)
+[PActivityIndicator](/lib/src/widgets/progress.dart)
 
-[Routing](/lib/src/widgets/routing.dart)
+[PRoute](/lib/src/widgets/routing.dart)
 
-[Scaffold](/lib/src/widgets/scaffold.dart)
+[PScaffold](/lib/src/widgets/scaffold.dart)
 
-[Slider](/lib/src/widgets/slider.dart)
+[PSlider](/lib/src/widgets/slider.dart)
 
-[Switch](/lib/src/widgets/switches.dart)
+[PSwitch](/lib/src/widgets/switches.dart)
 
-[TabView](/lib/src/widgets/tabs.dart)
+[PTabBar](/lib/src/widgets/tabs.dart)
+
+[PTextField](/lib/src/widgets/text_field.dart)
 
 
 ## 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.
+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`:
@@ -56,7 +58,7 @@ class MyApp extends StatelessWidget {
       title: 'Flutter Demo',
       // specify our app theme here. We do the leg work of bridging it to Cupertino.
       unifiedTheme: ThemeData(
-            primarySwatch: Colors.lightBlue,
+            colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.red),
             bottomAppBarColor: Colors.red,
           ),
       home: ExamplePage(),
@@ -71,65 +73,121 @@ 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](/screenshots/materialbutton.png)
-![Cupertino Button](/screenshots/cupertinobutton.png)
+## Buttons
 
+`Button`/`CupertinoButton` -> `PButton`
 [Source](/example/lib/button_page.dart)
 
 `FlatButton`/`CupertinoButton` -> `PFlatButton`
+[Source](/example/lib/button_page.dart)
 
-![Material Flat Button](/screenshots/androidflat.png)
-![Cupertino Flat Button](/screenshots/iosflat.png)
+Below is a side-by-side comparison of the different button states. Note 
+how iOS and Android have similar theming. 
 
-[Source](/example/lib/button_page.dart)
+![Button Example](/screenshots/buttons.png)
+
+## Navigation Bars
 
 `AppBar`/`CupertinoNavigationBar` -> `PNavigationBar`
 
 ![Android Nav](/screenshots/androidnav.png)
 ![iOS Nav](/screenshots/iosnav.png)
 
+By default, the `PNavigationBar` on iOS will mirror Material Android theming. This 
+means button tint and text style of the title will match. 
+If you wish to change that, set  `iosMirrorAndroid: false`. Otherwise 
+it will default to cupertino theming:
+
+![Plain iOS Nav](/screenshots/plain_ios_nav.png)
+
 [Source](/example/lib/navigation_bar_page.dart)
 
 `SliverAppBar`/`CupertinoSliverNavigationBar` -> `PSliverNavigationBar`
 
+## Sliders
+
 `Slider`/`CupertinoSlider` -> `PSlider`
 
 ![Sliders](/screenshots/sliders.png)
 
 [Source](/example/lib/sliders_page.dart)
 
+## Switches
+
 `Switch`/`CupertinoSwitch` -> `PSwitch`
 
 ![Switch](/screenshots/switches.png)
 
 [Source](/example/lib/switches_page.dart)
 
+## Inputs
+
+`TextField/CupertinoTextField` -> `PTextField`
+
+![TextField](/screenshots/inputs.png)
+
+By default, the `PTextField` on iOS will mirror Android styling and decoration (map `OutlineInputBorder` to a similar outline 
+for iOS). Also `PTextField` on iOS will show `helperText` and `errorText` (even though not native iOS widget).
+## Bottom Navigation
+
 `BottomNavigationBar`/`CupertinoTabBar` -> `PTabBar`
 
 ![Bottom Navigation Android](/screenshots/androidtabs.png)
 ![Bottom Navigation iOS](/screenshots/iostabs.png)
 
 [Source](/example/lib/tabs_page.dart)
 
+## Scaffold
+
 `Scaffold`/`CupertinoScaffold` -> `PScaffold`
 
+## Progress Indicators
+
 `CircularProgressIndicator`/`CupertinoActivityIndicator` -> `PActivityIndicator`
 
 ![Progress](/screenshots/progress.png)
 
 [Source](/example/lib/progress_page.dart)
 
+## Back Button
+
 `BackButton`/`CupertinoNavigationBarBackButton` -> `PBackButton`
 
+## Alerts
+
 `AlertDialog`/`CupertinoAlertDialog` -> `PAlertDialog`
 
 ![Android Alert](/screenshots/androidalert.png)
 ![Ios Alert](/screenshots/iosalert.png)
 
 [Source](/example/lib/alert_page.dart)
 
+The `Alert` expect a `List<Widget>`. When feeding `PFlatButton`, utilize 
+the helper methods to theme the buttons properly for iOS:
+
+```dart
+PAlertDialog(
+  title: Text("Sample Alert"),
+  content:
+      Text("I can adapt based on target platform defaults, PTheme wrapper, "
+          "or individual render platform overrides."),
+  actions: <Widget>[
+    PFlatButton.alertPrimary(
+      text: "Ok",
+      onPressed: () {
+        Navigator.of(context).pop();
+      },
+    ),
+    PFlatButton.alertSecondary(
+      text: "Cancel",
+      onPressed: () {
+        Navigator.of(context).pop();
+      },
+    )
+  ],
+)
+```
+
 ### 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:
 
@@ -227,7 +285,7 @@ platformWrap(
         child: Text(title),
         color: Colors.red,
         onPressed: () {
-          Navigator.push(context, PlatformRoute.of(context, builder: page));
+          Navigator.push(context, PRoute.of(context, builder: page));
         },
       ),
       renderCupertino: (context, child) => Padding(

example/lib/alert_page.dart

@@ -11,8 +11,14 @@ class AlertPage extends StatelessWidget {
           Text("I can adapt based on target platform defaults, PTheme wrapper, "
               "or individual render platform overrides."),
       actions: <Widget>[
-        PFlatButton(
-          child: Text("Ok"),
+        PFlatButton.alertPrimary(
+          text: "Ok",
+          onPressed: () {
+            Navigator.of(context).pop();
+          },
+        ),
+        PFlatButton.alertSecondary(
+          text: "Cancel",
           onPressed: () {
             Navigator.of(context).pop();
           },

example/lib/example_page.dart

@@ -6,6 +6,7 @@ import 'package:example/progress_page.dart';
 import 'package:example/sliders_page.dart';
 import 'package:example/switches_page.dart';
 import 'package:example/tabs_page.dart';
+import 'package:example/text_field_page.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 import 'package:platty/platty.dart';
@@ -23,8 +24,7 @@ class ExamplePage extends StatelessWidget {
           children: <Widget>[
             SizedBox(
               width: 160.0,
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.stretch,
+              child: ListView(
                 children: <Widget>[
                   _buildNavButton(context,
                       title: "Alerts", page: (context) => AlertPage()),
@@ -41,6 +41,8 @@ class ExamplePage extends StatelessWidget {
                       title: "Switches", page: (context) => SwitchesPage()),
                   _buildNavButton(context,
                       title: "Tabs", page: (context) => TabsPage()),
+                  _buildNavButton(context,
+                      title: "Text Fields", page: (context) => TextFieldPage()),
                 ],
               ),
             ),
@@ -61,13 +63,13 @@ class ExamplePage extends StatelessWidget {
         padding: EdgeInsets.all(0.0),
         child: Text(title),
         onPressed: () {
-          Navigator.push(context, PlatformRoute.of(context, builder: page));
+          Navigator.push(context, PRoute.of(context, builder: page));
         },
       ),
       renderCupertino: (context, child) => Padding(
-            padding: EdgeInsets.only(bottom: 8.0),
-            child: child,
-          ),
+        padding: EdgeInsets.only(bottom: 8.0),
+        child: child,
+      ),
     );
   }
 }

example/lib/main.dart

@@ -3,28 +3,19 @@ import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:platty/platty.dart';
 
-void main() => runApp(new MyApp());
+void main() => runApp(new PlattyApp());
 
-class MyApp extends StatelessWidget {
+class PlattyApp extends StatelessWidget {
   // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
     return PlatformApp(
       title: 'Plaform Adapting Widgets Example',
       unifiedTheme: ThemeData(
-        primarySwatch: Colors.red,
-        primaryColor: Colors.red,
-        buttonColor: Colors.red,
         disabledColor: Colors.red.withAlpha(150),
-        colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.red),
-        textTheme: TextTheme(
-          caption: TextStyle(color: Colors.grey),
-        ),
+          colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.red),
         buttonTheme: ButtonThemeData(
           textTheme: ButtonTextTheme.primary,
-          buttonColor: Colors.red,
-          colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.red),
-          disabledColor: Colors.red.withAlpha(150),
         ),
         iconTheme: IconThemeData(color: Colors.white),
       ),

example/lib/navigation_bar_page.dart

@@ -33,7 +33,6 @@ class NavigationBarPage extends StatelessWidget {
             backgroundColor: Colors.red,
             title: Text(
               "Platform",
-              style: TextStyle(color: Colors.white),
             ),
             actions: _getActions(),
           ),
@@ -42,9 +41,9 @@ class NavigationBarPage extends StatelessWidget {
             backgroundColor: Colors.red,
             renderPlatform: TargetPlatform.iOS,
             title: Text(
-              "iOS",
-              style: TextStyle(color: Colors.white),
+              "Plain iOS",
             ),
+            iosMirrorAndroid: false,
             actions: _getActions(),
           ),
           PNavigationBar(
@@ -53,8 +52,7 @@ class NavigationBarPage extends StatelessWidget {
             backgroundColor: Colors.red,
             renderPlatform: TargetPlatform.iOS,
             title: Text(
-              "iOS",
-              style: TextStyle(color: Colors.white),
+              "iOS Mirror",
             ),
             actions: _getActions(),
           ),
@@ -88,12 +86,12 @@ class NavigationBarPage extends StatelessWidget {
               renderPlatform: TargetPlatform.android,
               actions: _getActions(),
               androidBottom: () => PreferredSize(
-                    child: Padding(
-                      padding: const EdgeInsets.all(8.0),
-                      child: Text("Bottom"),
-                    ),
-                    preferredSize: Size.fromHeight(30.0),
-                  ),
+                child: Padding(
+                  padding: const EdgeInsets.all(8.0),
+                  child: Text("Bottom"),
+                ),
+                preferredSize: Size.fromHeight(30.0),
+              ),
             ),
           ),
         ],

example/lib/tabs_page.dart

@@ -29,10 +29,12 @@ class _TabsPageState extends State<TabsPage> {
                   platformWrap(
                     context,
                     renderCupertino: (context, child) => Padding(
-                          padding: EdgeInsets.only(bottom: 8.0),
-                          child: child,
-                        ),
+                      padding: EdgeInsets.only(bottom: 8.0),
+                      child: child,
+                    ),
                     child: PButton(
+                      renderPlatform: renderPlatform,
+                      padding: EdgeInsets.all(8.0),
                       child: Text("Toggle Tabs Platform"),
                       color: Colors.red,
                       onPressed: () {