Add OutlineButton, Tristate Checkbox to Flutter Gallery (#15312)

examples/flutter_gallery/lib/demo/material/buttons_demo.dart

@@ -18,6 +18,12 @@ const String _flatText = 'A flat button displays an ink splash on press '
 
 const String _flatCode = 'buttons_flat';
 
+const String _outlineText =
+    'Outline buttons become opaque and elevate when pressed. They are often '
+    'paired with raised buttons to indicate an alternative, secondary action.';
+
+const String _outlineCode = 'buttons_outline';
+
 const String _dropdownText =
     'A dropdown button displays a menu that\'s used to select a value from a '
     'small set of values. The button displays the current value and a down '
@@ -62,6 +68,12 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
         demoWidget: buildFlatButton(),
         exampleCodeTag: _flatCode,
       ),
+      new ComponentDemoTabData(
+        tabName: 'OUTLINE',
+        description: _outlineText,
+        demoWidget: buildOutlineButton(),
+        exampleCodeTag: _outlineCode,
+      ),
       new ComponentDemoTabData(
         tabName: 'DROPDOWN',
         description: _dropdownText,
@@ -91,7 +103,10 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
   Widget buildRaisedButton() {
     return new Align(
       alignment: const Alignment(0.0, -0.2),
-      child: new ButtonBar(
+      child: new Column(
+        mainAxisSize: MainAxisSize.min,
+        children: <Widget>[
+          new ButtonBar(
             mainAxisSize: MainAxisSize.min,
             children: <Widget>[
               new RaisedButton(
@@ -103,7 +118,26 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
               const RaisedButton(
                 child: const Text('DISABLED'),
                 onPressed: null,
-          )
+              ),
+            ],
+          ),
+          new ButtonBar(
+            mainAxisSize: MainAxisSize.min,
+            children: <Widget>[
+              new RaisedButton.icon(
+                icon: const Icon(Icons.add, size: 18.0),
+                label: const Text('RAISED BUTTON'),
+                onPressed: () {
+                  // Perform some action
+                },
+              ),
+              new RaisedButton.icon(
+                icon: const Icon(Icons.add, size: 18.0),
+                label: const Text('DISABLED'),
+                onPressed: null,
+              ),
+            ],
+          ),
         ],
       ),
     );
@@ -112,7 +146,10 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
   Widget buildFlatButton() {
     return new Align(
       alignment: const Alignment(0.0, -0.2),
-      child: new ButtonBar(
+      child: new Column(
+        mainAxisSize: MainAxisSize.min,
+        children: <Widget>[
+          new ButtonBar(
             mainAxisSize: MainAxisSize.min,
             children: <Widget>[
               new FlatButton(
@@ -124,7 +161,69 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
               const FlatButton(
                 child: const Text('DISABLED'),
                 onPressed: null,
-          )
+              ),
+            ],
+          ),
+          new ButtonBar(
+            mainAxisSize: MainAxisSize.min,
+            children: <Widget>[
+              new FlatButton.icon(
+                icon: const Icon(Icons.add_circle_outline, size: 18.0),
+                label: const Text('FLAT BUTTON'),
+                onPressed: () {
+                  // Perform some action
+                },
+              ),
+              new FlatButton.icon(
+                icon: const Icon(Icons.add_circle_outline, size: 18.0),
+                label: const Text('DISABLED'),
+                onPressed: null,
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget buildOutlineButton() {
+    return new Align(
+      alignment: const Alignment(0.0, -0.2),
+      child: new Column(
+        mainAxisSize: MainAxisSize.min,
+        children: <Widget>[
+          new ButtonBar(
+            mainAxisSize: MainAxisSize.min,
+            children: <Widget>[
+              new OutlineButton(
+                child: const Text('OUTLINE BUTTON'),
+                onPressed: () {
+                  // Perform some action
+                },
+              ),
+              const RaisedButton(
+                child: const Text('DISABLED'),
+                onPressed: null,
+              ),
+            ],
+          ),
+          new ButtonBar(
+            mainAxisSize: MainAxisSize.min,
+            children: <Widget>[
+              new OutlineButton.icon(
+                icon: const Icon(Icons.add, size: 18.0),
+                label: const Text('OUTLINE BUTTON'),
+                onPressed: () {
+                  // Perform some action
+                },
+              ),
+              new OutlineButton.icon(
+                icon: const Icon(Icons.add, size: 18.0),
+                label: const Text('DISABLED'),
+                onPressed: null,
+              ),
+            ],
+          ),
         ],
       ),
     );

examples/flutter_gallery/lib/demo/material/selection_controls_demo.dart

@@ -7,7 +7,9 @@ import 'package:flutter/material.dart';
 import '../../gallery/demo.dart';
 
 const String _checkboxText =
-  'Checkboxes allow the user to select multiple options from a set.';
+  'Checkboxes allow the user to select multiple options from a set. '
+  'A normal checkbox\'s value is true or false and a tristate checkbox\'s '
+  'value can also be null.';
 
 const String _checkboxCode = 'selectioncontrols_checkbox';
 
@@ -64,6 +66,7 @@ class _SelectionControlsDemoState extends State<SelectionControlsDemo> {
 
   bool checkboxValueA = true;
   bool checkboxValueB = false;
+  bool checkboxValueC;
   int radioValue = 0;
   bool switchValue = false;
 
@@ -82,24 +85,40 @@ class _SelectionControlsDemoState extends State<SelectionControlsDemo> {
           new Row(
             mainAxisSize: MainAxisSize.min,
             children: <Widget>[
-              new Checkbox(value: checkboxValueA, onChanged: (bool value) {
+              new Checkbox(
+                value: checkboxValueA,
+                onChanged: (bool value) {
                   setState(() {
                     checkboxValueA = value;
                   });
-              }),
+                },
-              new Checkbox(value: checkboxValueB, onChanged: (bool value) {
+              ),
+              new Checkbox(
+                value: checkboxValueB,
+                onChanged: (bool value) {
                   setState(() {
                     checkboxValueB = value;
                   });
-              })
+                },
-            ]
+              ),
+              new Checkbox(
+                value: checkboxValueC,
+                tristate: true,
+                onChanged: (bool value) {
+                  setState(() {
+                    checkboxValueC = value;
+                  });
+                },
+              ),
+            ],
           ),
           new Row(
             mainAxisSize: MainAxisSize.min,
             children: const <Widget>[
               // Disabled checkboxes
               const Checkbox(value: true, onChanged: null),
-              const Checkbox(value: false, onChanged: null)
+              const Checkbox(value: false, onChanged: null),
+              const Checkbox(value: null, tristate: true, onChanged: null),
             ]
           )
         ]

examples/flutter_gallery/lib/gallery/example_code.dart

@@ -29,8 +29,45 @@ const RaisedButton(
   child: const Text('BUTTON TITLE'),
   onPressed: null
 );
+
+// Create a button with an icon and a
+// title.
+new RaisedButton.icon(
+  icon: const Icon(Icons.add, size: 18.0),
+  label: const Text('BUTTON TITLE'),
+  onPressed: () {
+    // Perform some action
+  },
+);
 // END
 
+// START buttons_outline
+// Create an outline button.
+new OutlineButton(
+  child: const Text('BUTTON TITLE'),
+  onPressed: () {
+    // Perform some action
+  }
+);
+
+// Create a disabled button.
+// Buttons are disabled when onPressed isn't
+// specified or is null.
+const OutlineButton(
+  child: const Text('BUTTON TITLE'),
+  onPressed: null
+);
+
+// Create a button with an icon and a
+// title.
+new OutlineButton.icon(
+  icon: const Icon(Icons.add, size: 18.0),
+  label: const Text('BUTTON TITLE'),
+  onPressed: () {
+    // Perform some action
+  },
+);
+// END
 
 // START buttons_flat
 // Create a flat button.
@@ -123,9 +160,20 @@ new Checkbox(
   onChanged: (bool value) {
     setState(() {
       checkboxValue = value;
-    }
+    });
-  );
+  },
-});
+);
+
+// Create a tristate checkbox.
+new Checkbox(
+  tristate: true,
+  value: checkboxValue,
+  onChanged: (bool value) {
+    setState(() {
+      checkboxValue = value;
+    });
+  },
+);
 
 // Create a disabled checkbox.
 // Checkboxes are disabled when onChanged isn't