From 0da63e4c2b053cd30258f97546d4e393b205c9fb Mon Sep 17 00:00:00 2001 From: Matt Perry Date: Thu, 10 Mar 2016 13:56:43 -0500 Subject: [PATCH] Add a basic Text Fields demo to Material Gallery app. BUG=https://github.com/flutter/flutter/issues/1547 --- .../lib/demo/text_field_demo.dart | 117 ++++++++++++++++++ .../material_gallery/lib/gallery/home.dart | 4 +- 2 files changed, 120 insertions(+), 1 deletion(-) create mode 100644 examples/material_gallery/lib/demo/text_field_demo.dart diff --git a/examples/material_gallery/lib/demo/text_field_demo.dart b/examples/material_gallery/lib/demo/text_field_demo.dart new file mode 100644 index 00000000000..566a1727ba1 --- /dev/null +++ b/examples/material_gallery/lib/demo/text_field_demo.dart @@ -0,0 +1,117 @@ +// 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 { + final GlobalKey _scaffoldKey = new GlobalKey(); + final List _inputs = [ + 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: [ + 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: [ + 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 + ) + ) + ] + ) + ] + ) + ); + } +} diff --git a/examples/material_gallery/lib/gallery/home.dart b/examples/material_gallery/lib/gallery/home.dart index 29fb32d55cb..d8c119d266b 100644 --- a/examples/material_gallery/lib/gallery/home.dart +++ b/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 { colors: Colors.amber, demos: [ 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 { 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()) ]