Flutter UI Widgets

Nov 9 2021 · Dart 2.14, Flutter 2.5, VS Code 1.61

Part 1: Flutter UI Widgets

10. Work with Forms

Episode complete

Play next episode

Next
About this episode

Leave a rating/review

See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 09. Add Navigation & SliverAppBar Next episode: 11. Display Dialogs

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

Forms are very essential in almost every app. Flutter gives us various ways to handle user inputs. We can manually handle inputs using various techniques but in this episode, we’ll be using the Form widget which is more robust. I’ve linked the FAB to navigate to the CreateArticle page.

...
FormData formData = FormData();
...

body: Padding(
  padding: const EdgeInsets.all(16),
  child: Form(
    child: ListView(
      children: <Widget>[
        TextFormField(
          decoration: const InputDecoration(labelText: 'Title'),
          validator: (value) =>
              value!.isEmpty ? 'Please enter Title' : null,
          onSaved: (value) => formData.title = value,
        ),
        ElevatedButton(
          onPressed: () {},
          child: const Text('Save'),
        )
      ],
    ),
  ),
),

...
final _formKey = GlobalKey<FormState>(); // As class member
...
child: Form(
  key: _formKey,
...

...
onPressed: () {
  final form = _formKey.currentState;
  if (form.validate()) {
    form.save();
    print(formData);
    form.reset();
  }
  FocusScope.of(context).unfocus();
},
...

...
setState(() {
  formData.isBreaking = false;
  formData.category = null;
});