Merge pull request #2558 from mpcomplete/text.demo

Add a basic Text Fields demo to Material Gallery app.

examples/material_gallery/lib/demo/text_field_demo.dart

+// Copyright 2016 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+
+class TextFieldDemo extends StatefulComponent {
+  TextFieldDemo({ Key key }) : super(key: key);
+
+  TextFieldDemoState createState() => new TextFieldDemoState();
+}
+
+class TextFieldDemoState extends State<TextFieldDemo> {
+  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
+  final List<InputValue> _inputs = <InputValue>[
+    InputValue.empty,
+    InputValue.empty,
+    InputValue.empty,
+    InputValue.empty,
+  ];
+
+  void showInSnackBar(String value) {
+    _scaffoldKey.currentState.showSnackBar(new SnackBar(
+      content: new Text(value)
+    ));
+  }
+
+  void _handleInputChanged(InputValue value, int which) {
+    setState(() {
+      _inputs[which] = value;
+    });
+  }
+
+  void _handleInputSubmitted(InputValue value) {
+    showInSnackBar('${_inputs[0].text}\'s phone number is ${_inputs[1].text}');
+  }
+
+  String _validateName(InputValue value) {
+    if (value.text.isEmpty)
+      return 'Name is required.';
+    RegExp nameExp = new RegExp(r'^[A-za-z ]+$');
+    if (!nameExp.hasMatch(value.text))
+      return 'Please enter only alphabetical characters.';
+    return null;
+  }
+
+  String _validatePhoneNumber(InputValue value) {
+    RegExp phoneExp = new RegExp(r'^\d\d\d-\d\d\d\-\d\d\d\d$');
+    if (!phoneExp.hasMatch(value.text))
+      return '###-###-#### - Please enter a valid phone number.';
+    return null;
+  }
+
+  String _validatePassword(InputValue value1, InputValue value2) {
+    if (value1.text.isEmpty)
+      return 'Please choose a password.';
+    if (value1.text != value2.text)
+      return 'Passwords don\'t match';
+    return null;
+  }
+
+  Widget build(BuildContext context) {
+    return new Scaffold(
+      key: _scaffoldKey,
+      toolBar: new ToolBar(
+        center: new Text('Text Fields')
+      ),
+      body: new Block(
+        padding: const EdgeDims.all(8.0),
+        children: <Widget>[
+          new Input(
+            hintText: 'What do people call you?',
+            labelText: 'Name',
+            errorText: _validateName(_inputs[0]),
+            value: _inputs[0],
+            onChanged: (InputValue value) { _handleInputChanged(value, 0); },
+            onSubmitted: _handleInputSubmitted
+          ),
+          new Input(
+            hintText: 'Where can we reach you?',
+            labelText: 'Phone Number',
+            errorText: _validatePhoneNumber(_inputs[1]),
+            value: _inputs[1],
+            onChanged: (InputValue value) { _handleInputChanged(value, 1); },
+            onSubmitted: _handleInputSubmitted
+          ),
+          new Row(
+            alignItems: FlexAlignItems.start,
+            children: <Widget>[
+              new Flexible(
+                child: new Input(
+                  hintText: 'How do you log in?',
+                  labelText: 'New Password',
+                  hideText: true,
+                  value: _inputs[2],
+                  onChanged: (InputValue value) { _handleInputChanged(value, 2); },
+                  onSubmitted: _handleInputSubmitted
+                )
+              ),
+              new Flexible(
+                child: new Input(
+                  hintText: 'How do you log in?',
+                  labelText: 'Re-type Password',
+                  errorText: _validatePassword(_inputs[2], _inputs[3]),
+                  hideText: true,
+                  value: _inputs[3],
+                  onChanged: (InputValue value) { _handleInputChanged(value, 3); },
+                  onSubmitted: _handleInputSubmitted
+                )
+              )
+            ]
+          )
+        ]
+      )
+    );
+  }
+}

examples/material_gallery/lib/gallery/home.dart

@@ -32,6 +32,7 @@ import '../demo/slider_demo.dart';
 import '../demo/snack_bar_demo.dart';
 import '../demo/tabs_demo.dart';
 import '../demo/tabs_fab_demo.dart';
+import '../demo/text_field_demo.dart';
 import '../demo/time_picker_demo.dart';
 import '../demo/tooltip_demo.dart';
 import '../demo/two_level_list_demo.dart';
@@ -99,13 +100,13 @@ class GalleryHomeState extends State<GalleryHome> {
                 colors: Colors.amber,
                 demos: <GalleryDemo>[
                   new GalleryDemo(title: 'Buttons', builder: () => new ButtonsDemo()),
+                  new GalleryDemo(title: 'Buttons: Floating Action Button', builder: () => new TabsFabDemo()),
                   new GalleryDemo(title: 'Cards', builder: () => new CardsDemo()),
                   new GalleryDemo(title: 'Chips', builder: () => new ChipDemo()),
                   new GalleryDemo(title: 'Date Picker', builder: () => new DatePickerDemo()),
                   new GalleryDemo(title: 'Dialog', builder: () => new DialogDemo()),
                   new GalleryDemo(title: 'Dropdown Button', builder: () => new DropDownDemo()),
                   new GalleryDemo(title: 'Expand/Collapse List Control', builder: () => new TwoLevelListDemo()),
-                  new GalleryDemo(title: 'Floating Action Button', builder: () => new TabsFabDemo()),
                   new GalleryDemo(title: 'Grid', builder: () => new GridListDemo()),
                   new GalleryDemo(title: 'Icons', builder: () => new IconsDemo()),
                   new GalleryDemo(title: 'Leave-behind List Items', builder: () => new LeaveBehindDemo()),
@@ -119,6 +120,7 @@ class GalleryHomeState extends State<GalleryHome> {
                   new GalleryDemo(title: 'Sliders', builder: () => new SliderDemo()),
                   new GalleryDemo(title: 'SnackBar', builder: () => new SnackBarDemo()),
                   new GalleryDemo(title: 'Tabs', builder: () => new TabsDemo()),
+                  new GalleryDemo(title: 'Text Fields', builder: () => new TextFieldDemo()),
                   new GalleryDemo(title: 'Time Picker', builder: () => new TimePickerDemo()),
                   new GalleryDemo(title: 'Tooltips', builder: () => new TooltipDemo())
                 ]