mirror of
https://github.com/flutter/flutter
synced 2024-10-13 11:42:54 +00:00
Add a basic Text Fields demo to Material Gallery app.
BUG=https://github.com/flutter/flutter/issues/1547
This commit is contained in:
parent
3d8176ed16
commit
0da63e4c2b
117
examples/material_gallery/lib/demo/text_field_demo.dart
Normal file
117
examples/material_gallery/lib/demo/text_field_demo.dart
Normal file
|
@ -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<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
|
||||
)
|
||||
)
|
||||
]
|
||||
)
|
||||
]
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
|
@ -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())
|
||||
]
|
||||
|
|
Loading…
Reference in a new issue