How to properly pre-fill flutter form field?
TextFormField
has initialValue
property.
To accomplish this with a TextField
, you can user a controller to set the initial value as such:
final _controllerFirstName = TextEditingController();
_controllerFirstName.text = 'First Name here';
TextField(
controller: _controllerFirstName,
onChanged: (nameVal) => setState(() {
_displayName = nameVal;
}),
),
// to clear the controller
_controllerFirstName.clear();
Using initialValue:
property works well with TextFormField
.
Figured it out: switched from TextFormField
to TextField
, created local variables to store changes to the fields, and used initState
to set initial form values instead of doing it in build
.
import 'dart:async';
import 'package:flutter/material.dart';
import '../models/user.dart';
class EditProfileView extends StatefulWidget {
@override
_EditProfileViewState createState() => new _EditProfileViewState();
}
class _EditProfileViewState extends State<EditProfileView> {
final GlobalKey<FormState> _formKey = new GlobalKey<FormState>();
void _handleSubmitted() {
final FormState form = _formKey.currentState;
if (!form.validate()) {
_autovalidate = true; // Start validating on every change.
showInSnackBar('Please fix the errors in red before submitting.');
} else {
showInSnackBar('snackchat');
User.instance.first_name = firstName;
User.instance.last_name = lastName;
User.instance.save().then((result) {
print("Saving done: ${result}.");
});
}
}
// controllers for form text controllers
final TextEditingController _firstNameController = new TextEditingController();
String firstName = User.instance.first_name;
final TextEditingController _lastNameController = new TextEditingController();
String lastName = User.instance.last_name;
@override
void initState() {
_firstNameController.text = firstName;
_lastNameController.text = lastName;
return super.initState();
}
@override
Widget build(BuildContext context) {
final ThemeData themeData = Theme.of(context);
final DateTime today = new DateTime.now();
return new Scaffold(
appBar: new AppBar(title: const Text('Edit Profile'), actions: <Widget>[
new Container(
padding: const EdgeInsets.fromLTRB(0.0, 10.0, 5.0, 10.0),
child: new MaterialButton(
color: themeData.primaryColor,
textColor: themeData.secondaryHeaderColor,
child: new Text('Save'),
onPressed: () {
_handleSubmitted();
Navigator.pop(context);
},
))
]),
body: new Form(
key: _formKey,
autovalidate: _autovalidate,
onWillPop: _warnUserAboutInvalidData,
child: new ListView(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
children: <Widget>[
new Container(
child: new TextField(
decoration: const InputDecoration(labelText: "First Name", hintText: "What do people call you?"),
autocorrect: false,
controller: _firstNameController,
onChanged: (String value) {
firstName = value;
},
),
),
new Container(
child: new TextField(
decoration: const InputDecoration(labelText: "Last Name"),
autocorrect: false,
controller: _lastNameController,
onChanged: (String value) {
lastName = value;
},
),
),
],
)));
}
}