blantt/myflutter

myflutter

myflutter's Issues

textFormField

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class TextFormFieldExample extends StatefulWidget {
const TextFormFieldExample({Key? key}) : super(key: key);

@OverRide
State createState() => _TextFormFieldExampleState();
}

// Adapted from the text form demo in official gallery app:
// https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/material/text_form_field_demo.dart
class _TextFormFieldExampleState extends State {
final GlobalKey<FormFieldState> _passwordFieldKey =
GlobalKey<FormFieldState>();

String? _name;
String? _phoneNumber;
String? _email;
String? _password;

String? _validateName(String? value) {
if (value?.isEmpty ?? false) {
return 'Name is required.';
}
final RegExp nameExp = RegExp(r'^[A-Za-z ]+$');
if (!nameExp.hasMatch(value!)) {
return 'Please enter only alphabetical characters.';
}
return null;
}

@OverRide
Widget build(BuildContext context) {
return SingleChildScrollView(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(height: 24.0),
// "Name" form.
TextFormField(
textCapitalization: TextCapitalization.words,
decoration: const InputDecoration(
border: UnderlineInputBorder(),
filled: true,
icon: Icon(Icons.person),
hintText: 'What do people call you?',
labelText: 'Name *',
),
onSaved: (String? value) {
this._name = value;
print('name=$_name');
},
validator: _validateName,
),
const SizedBox(height: 24.0),
// "Phone number" form.
TextFormField(
decoration: const InputDecoration(
border: UnderlineInputBorder(),
filled: true,
icon: Icon(Icons.phone),
hintText: 'Where can we reach you?',
labelText: 'Phone Number *',
prefixText: '+86',
),
keyboardType: TextInputType.phone,
onSaved: (String? value) {
this._phoneNumber = value;
print('phoneNumber=$_phoneNumber');
},
// TextInputFormatters are applied in sequence.
inputFormatters: [
FilteringTextInputFormatter.digitsOnly
],
),
const SizedBox(height: 24.0),
// "Email" form.
TextFormField(
decoration: const InputDecoration(
border: UnderlineInputBorder(),
filled: true,
icon: Icon(Icons.email),
hintText: 'Your email address',
labelText: 'E-mail',
),
keyboardType: TextInputType.emailAddress,
onSaved: (String? value) {
this._email = value;
print('email=$_email');
},
),
const SizedBox(height: 24.0),
// "Life story" form.
TextFormField(
decoration: const InputDecoration(
border: OutlineInputBorder(),
hintText: 'Tell us about yourself',
helperText: 'Keep it short, this is just a demo.',
labelText: 'Life story',
),
maxLines: 3,
),
const SizedBox(height: 24.0),
// "Salary" form.
TextFormField(
keyboardType: TextInputType.number,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Salary',
prefixText: '$',
suffixText: 'USD',
suffixStyle: TextStyle(color: Colors.green),
),
),
const SizedBox(height: 24.0),
// "Password" form.
PasswordField(
fieldKey: _passwordFieldKey,
helperText: 'No more than 8 characters.',
labelText: 'Password *',
onFieldSubmitted: (String value) {
setState(() {
this._password = value;
});
},
),
const SizedBox(height: 24.0),
// "Re-type password" form.
TextFormField(
enabled: this._password != null && this._password!.isNotEmpty,
decoration: const InputDecoration(
border: UnderlineInputBorder(),
filled: true,
labelText: 'Re-type password',
),
maxLength: 8,
obscureText: true,
),
],
),
);
}
}

class PasswordField extends StatefulWidget {
const PasswordField({
this.fieldKey,
this.hintText,
this.labelText,
this.helperText,
this.onSaved,
this.validator,
this.onFieldSubmitted,
});

final Key? fieldKey;
final String? hintText;
final String? labelText;
final String? helperText;
final FormFieldSetter? onSaved;
final FormFieldValidator? validator;
final ValueChanged? onFieldSubmitted;

@OverRide
_PasswordFieldState createState() => _PasswordFieldState();
}

class _PasswordFieldState extends State {
bool _obscureText = true;

@OverRide
Widget build(BuildContext context) {
return TextFormField(
key: widget.fieldKey,
obscureText: _obscureText,
maxLength: 8,
onSaved: widget.onSaved,
validator: widget.validator,
onFieldSubmitted: widget.onFieldSubmitted,
decoration: InputDecoration(
border: const UnderlineInputBorder(),
filled: true,
hintText: widget.hintText,
labelText: widget.labelText,
helperText: widget.helperText,
suffixIcon: GestureDetector(
onTap: () {
setState(() {
_obscureText = !_obscureText;
});
},
child: Icon(_obscureText ? Icons.visibility : Icons.visibility_off),
),
),
);
}
}

mytest

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

class TextFieldExample extends StatefulWidget {
const TextFieldExample({Key? key}) : super(key: key);

@OverRide
State createState() => _TextFieldExampleState();
}

class _TextFieldExampleState extends State {
bool _numberInputIsValid = true;

Widget _buildNumberTextField() {
return TextField(
keyboardType: TextInputType.number,
style: Theme.of(context).textTheme.headline4,
decoration: InputDecoration(
icon: const Icon(Icons.attach_money),
labelText: 'Enter an integer:',
errorText: _numberInputIsValid ? null : 'Please enter an integer!',
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
),
),
onSubmitted: (val) => Fluttertoast.showToast(msg: 'You entered: ${int.parse(val)}'),
onChanged: (String val) {
final v = int.tryParse(val);
debugPrint('parsed value = $v');
if (v == null) {
setState(() => _numberInputIsValid = false);
} else {
setState(() => _numberInputIsValid = true);
}
},
);
}

final _controller = TextEditingController();

Widget _buildMultilineTextField() {
return TextField(
controller: this._controller,
maxLines: 10,
textCapitalization: TextCapitalization.sentences,
decoration: InputDecoration(
counterText: '${_countWords(text: this._controller.text)} words',
labelText: 'Enter multiline text:',
alignLabelWithHint: true,
hintText: 'type something...',
border: const OutlineInputBorder(),
),
onChanged: (text) => setState(() {}),
);
}

int _countWords({required String text}) {
final trimmedText = text.trim();
if (trimmedText.isEmpty) {
return 0;
} else {
return trimmedText.split(RegExp("\s+")).length;
}
}

bool _showPassword = false;

Widget _buildPasswordTextField() {
return TextField(
obscureText: !this._showPassword,
decoration: InputDecoration(
labelText: 'password',
prefixIcon: const Icon(Icons.security),
suffixIcon: IconButton(
icon: Icon(
Icons.remove_red_eye,
color: this._showPassword ? Colors.blue : Colors.grey,
),
onPressed: () {
setState(() => this._showPassword = !this._showPassword);
},
),
),
);
}

Widget _buildBorderlessTextField() {
return const TextField(
maxLines: 3,
decoration: InputDecoration.collapsed(hintText: 'borderless input'),
);
}

@OverRide
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(8.0),
children: [
const ListTile(title: Text('1. Number input field')),
_buildNumberTextField(),
const ListTile(title: Text('2. Multiline input field')),
_buildMultilineTextField(),
const ListTile(title: Text('3. Password input field')),
_buildPasswordTextField(),
const ListTile(title: Text('4. Borderless input')),
_buildBorderlessTextField(),
],
);
}
}

fileform

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

class TextFieldExample extends StatefulWidget {
const TextFieldExample({Key? key}) : super(key: key);

@OverRide
State createState() => _TextFieldExampleState();
}

class _TextFieldExampleState extends State {
bool _numberInputIsValid = true;

Widget _buildNumberTextField() {
return TextField(
keyboardType: TextInputType.number,
style: Theme.of(context).textTheme.headline4,
decoration: InputDecoration(
icon: const Icon(Icons.attach_money),
labelText: 'Enter an integer:',
errorText: _numberInputIsValid ? null : 'Please enter an integer!',
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
),
),
onSubmitted: (val) => Fluttertoast.showToast(msg: 'You entered: ${int.parse(val)}'),
onChanged: (String val) {
final v = int.tryParse(val);
debugPrint('parsed value = $v');
if (v == null) {
setState(() => _numberInputIsValid = false);
} else {
setState(() => _numberInputIsValid = true);
}
},
);
}

final _controller = TextEditingController();

Widget _buildMultilineTextField() {
return TextField(
controller: this._controller,
maxLines: 10,
textCapitalization: TextCapitalization.sentences,
decoration: InputDecoration(
counterText: '${_countWords(text: this._controller.text)} words',
labelText: 'Enter multiline text:',
alignLabelWithHint: true,
hintText: 'type something...',
border: const OutlineInputBorder(),
),
onChanged: (text) => setState(() {}),
);
}

int _countWords({required String text}) {
final trimmedText = text.trim();
if (trimmedText.isEmpty) {
return 0;
} else {
return trimmedText.split(RegExp("\s+")).length;
}
}

bool _showPassword = false;

Widget _buildPasswordTextField() {
return TextField(
obscureText: !this._showPassword,
decoration: InputDecoration(
labelText: 'password',
prefixIcon: const Icon(Icons.security),
suffixIcon: IconButton(
icon: Icon(
Icons.remove_red_eye,
color: this._showPassword ? Colors.blue : Colors.grey,
),
onPressed: () {
setState(() => this._showPassword = !this._showPassword);
},
),
),
);
}

Widget _buildBorderlessTextField() {
return const TextField(
maxLines: 3,
decoration: InputDecoration.collapsed(hintText: 'borderless input'),
);
}

@OverRide
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(8.0),
children: [
const ListTile(title: Text('1. Number input field')),
_buildNumberTextField(),
const ListTile(title: Text('2. Multiline input field')),
_buildMultilineTextField(),
const ListTile(title: Text('3. Password input field')),
_buildPasswordTextField(),
const ListTile(title: Text('4. Borderless input')),
_buildBorderlessTextField(),
],
);
}
}