flutter/examples/flutter_gallery/lib/demo/text_field_demo.dart
Adam Barth 8ca4caa440 Rename Flexible to Expanded and improve docs (#6978)
This patch replaces uses of Flexible with Expanded where we're using
FlexFit.tight. We still need to think of a better name for the
FlexFit.loose variant.

Also, improve the docs for Row, Column, Flex, and RenderFlex to be more
problem-oriented and to give a complete account of the layout algorithn.

Fixes #6960
Fixes #5169
2016-11-21 23:16:43 -08:00

147 lines
4.8 KiB
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 StatefulWidget {
TextFieldDemo({ Key key }) : super(key: key);
static const String routeName = '/text-field';
@override
TextFieldDemoState createState() => new TextFieldDemoState();
}
class PersonData {
String name = '';
String phoneNumber = '';
String password = '';
}
class TextFieldDemoState extends State<TextFieldDemo> {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
PersonData person = new PersonData();
void showInSnackBar(String value) {
_scaffoldKey.currentState.showSnackBar(new SnackBar(
content: new Text(value)
));
}
GlobalKey<FormState> _formKey = new GlobalKey<FormState>();
GlobalKey<FormFieldState<InputValue>> _passwordFieldKey = new GlobalKey<FormFieldState<InputValue>>();
void _handleSubmitted() {
FormState form = _formKey.currentState;
if (form.hasErrors) {
showInSnackBar('Please fix the errors in red before submitting.');
} else {
form.save();
showInSnackBar('${person.name}\'s phone number is ${person.phoneNumber}');
}
}
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 value) {
FormFieldState<InputValue> passwordField = _passwordFieldKey.currentState;
if (passwordField.value == null || passwordField.value.text.isEmpty)
return 'Please choose a password.';
if (passwordField.value.text != value.text)
return 'Passwords don\'t match';
return null;
}
@override
Widget build(BuildContext context) {
return new Scaffold(
key: _scaffoldKey,
appBar: new AppBar(
title: new Text('Text fields')
),
body: new Form(
key: _formKey,
child: new Block(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
children: <Widget>[
// It's simpler to use an InputFormField, as below, but a FormField
// that builds an Input is equivalent.
new FormField<InputValue>(
initialValue: InputValue.empty,
onSaved: (InputValue val) { person.name = val.text; },
validator: _validateName,
builder: (FormFieldState<InputValue> field) {
return new Input(
hintText: 'What do people call you?',
labelText: 'Name',
value: field.value,
onChanged: field.onChanged,
errorText: field.errorText
);
},
),
new InputFormField(
hintText: 'Where can we reach you?',
labelText: 'Phone Number',
keyboardType: TextInputType.phone,
onSaved: (InputValue val) { person.phoneNumber = val.text; },
validator: _validatePhoneNumber,
),
new InputFormField(
hintText: 'Tell us about yourself (optional)',
labelText: 'Life story',
maxLines: 3,
),
new Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Expanded(
child: new InputFormField(
key: _passwordFieldKey,
hintText: 'How do you log in?',
labelText: 'New Password',
hideText: true,
onSaved: (InputValue val) { person.password = val.text; }
)
),
new SizedBox(width: 16.0),
new Expanded(
child: new InputFormField(
hintText: 'How do you log in?',
labelText: 'Re-type Password',
hideText: true,
validator: _validatePassword,
)
)
]
),
new Container(
padding: const EdgeInsets.all(20.0),
alignment: const FractionalOffset(0.5, 0.5),
child: new RaisedButton(
child: new Text('SUBMIT'),
onPressed: _handleSubmitted,
),
)
]
)
)
);
}
}