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

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

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;
});