Summary - Form validation

Combine Form, validator and onSaved to make an input form.

Summary - Form validation

In this section you learned three things: with Form you group fields and access state via GlobalKey<FormState>; with validator you check field validity and show error messages; with onSaved you collect field values during save.

if (_formKey.currentState!.validate()) {
  _formKey.currentState!.save();
  print('name: $_name');
}

Combining these, you build a login form.

Exercise Build a login form

In Ekrani stateful widget, declare _formKey and _eposta. Place a TextFormField inside a Form; the validator should return 'E-posta gerekli' for empty value, and onSaved should assign the value to _eposta. On button press, if validate succeeds, call save and print 'eposta: $_eposta'. In main, call print('giriş formu').

Show example solution

import 'package:flutter/material.dart';

void main() {
  print('giriş formu');
  runApp(MaterialApp(home: Ekrani()));
}

class Ekrani extends StatefulWidget {
  @override
  _EkraniState createState() => _EkraniState();
}

class _EkraniState extends State<Ekrani> {
  final _formKey = GlobalKey<FormState>();
  String? _eposta;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                validator: (deger) {
                  if (deger!.isEmpty) {
                    return 'E-posta gerekli';
                  }
                  return null;
                },
                onSaved: (deger) {
                  _eposta = deger;
                },
              ),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    _formKey.currentState!.save();
                    print('eposta: $_eposta');
                  }
                },
                child: Text('Giriş'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Test yourself

What should be done first when the user presses the 'Login' button in the login form?
- Close the app
- Clear the form fields
- Navigate immediately
- Validate the form with _formKey.currentState!.validate()
Show answer

Validate the form with _formKey.currentState!.validate() — When the login button is pressed, the form is first validated with _formKey.currentState!.validate(); if successful, save is called and values are collected.

Complete the Form key type

final _formKey = GlobalKey<____>();

Show answer

final _formKey = GlobalKey<FormState>();

Form validation parts

Form

Widget grouping form fields
validator

Callback checking field validity
onSaved

Collects value during save
validate

Validation method called on FormState

Next lesson: What is shared_preferences?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies