Usare i Form in Flutter

L'oggetto Form in Flutter non è obbligatorio per inviare/salvare dati, ma è molto comodo in quanto ha diverse cose interessanti.

In questo articolo vediamo un esempio di form login, con una validazione basica.

Nel caso che la validazione vada a buon fine, ci limiteremo a visualizzare i dati in console.

Ecco il codice:

import 'package:flutter/material.dart';

class LoginScreen extends StatefulWidget {
  const LoginScreen({super.key});

  @override
  State<LoginScreen> createState() {
    return _LoginState();
  }
}

class _LoginState extends State<LoginScreen> {
  final _formKey = GlobalKey<FormState>();

  void _login() {
    _formKey.currentState!.validate();
    _formKey.currentState!.save();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Circoli Sportivi - Login"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(12),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                keyboardType: TextInputType.emailAddress,
                decoration: const InputDecoration(
                  label: Text('Email'),
                ),
                validator: (value) {
                  // TODO Controllo forma email
                  if (value == null || value.isEmpty || value.trim().isEmpty) {
                    return 'Inserire una email!';
                  }
                  return null;
                },
                onSaved: (value) {
                  print(value);
                },
              ),
              TextFormField(
                obscureText: true,
                decoration: const InputDecoration(
                  label: Text('Password'),
                ),
                validator: (value) {
                  if (value == null || value.isEmpty || value.trim().isEmpty) {
                    return 'Inserire una password!';
                  }
                  return null;
                },
                onSaved: (value) {
                  print(value);
                },
              ),
              const SizedBox(
                height: 30,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  ElevatedButton(
                    onPressed: _login,
                    child: const Text('Login'),
                  ),
                  TextButton(
                    onPressed: () {},
                    child: const Text('Hai dimenticato la password?'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Come vedete all'interno delle TextFormField abbiamo usato validator; all'interno ci abbiamo messo la nostra logica di controllo.

Per agganciare i validator al form abbiamo usato una GlobalKey, agganciato al Form attraverso key.

Nel caso in cui la validazione non vada a buon fine, vedremmo gli errori in rosso sotto le input.

Enjoy!