Les autres champs de formulaire : liste, cases, boutons radio, date

Chapitre 8 — Les formulaires Flutter · Les autres champs de formulaire : liste, cases, boutons radio, date

1. Un formulaire, plusieurs types de champs

Aperçu reconstitué de l'écran (Material 3) : le code de la leçon produit cet affichage, aux couleurs du thème près.

2. La liste déroulante

String? _filiere;

DropdownButtonFormField<String>(
  initialValue: _filiere,                         // anciennement « value » (avant Flutter 3.35)
  decoration: const InputDecoration(labelText: 'Filière', prefixIcon: Icon(Icons.school)),
  items: const [
    DropdownMenuItem(value: 'DD', child: Text('Développement digital')),
    DropdownMenuItem(value: 'ID', child: Text('Infrastructure digitale')),
    DropdownMenuItem(value: 'GE', child: Text('Gestion des entreprises')),
  ],
  onChanged: (v) => setState(() => _filiere = v),
  validator: (v) => v == null ? 'Choisissez une filière' : null,
  onSaved: (v) => _filiere = v,
)

3. Boutons radio, interrupteur, case à cocher

enum Niveau { technicien, technicienSpecialise }
Niveau _niveau = Niveau.technicienSpecialise;
bool _annonces = true;

// Boutons radio : le RadioGroup gère la valeur choisie (Flutter 3.35 et plus)
RadioGroup<Niveau>(
  groupValue: _niveau,
  onChanged: (v) => setState(() => _niveau = v!),
  child: const Column(
    children: [
      RadioListTile(value: Niveau.technicienSpecialise, title: Text('Technicien spécialisé')),
      RadioListTile(value: Niveau.technicien, title: Text('Technicien')),
    ],
  ),
),

// Interrupteur
SwitchListTile(
  title: const Text('Recevoir les annonces par e-mail'),
  value: _annonces,
  onChanged: (v) => setState(() => _annonces = v),
),

Sur une version de Flutter antérieure à 3.35, RadioGroup n'existe pas : on place groupValue et onChanged directement sur chaque RadioListTile. Ces deux propriétés sont aujourd'hui marquées obsolètes.

4. Un champ obligatoire qui n'est pas du texte

FormField<bool>(
  initialValue: false,
  validator: (v) => v == true ? null : 'Vous devez accepter le règlement',
  builder: (field) => Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      CheckboxListTile(
        value: field.value,
        onChanged: (v) => field.didChange(v),       // prévient le formulaire du changement
        title: const Text("J'accepte le règlement intérieur"),
        controlAffinity: ListTileControlAffinity.leading,
      ),
      if (field.hasError)
        Padding(
          padding: const EdgeInsets.only(left: 16),
          child: Text(field.errorText!,
              style: TextStyle(color: Theme.of(context).colorScheme.error, fontSize: 12)),
        ),
    ],
  ),
),

FormField<T> transforme n'importe quel widget en champ de formulaire : il reçoit un validator, participe à validate(), save() et reset(), et fournit au builder un objet field (valeur, erreur, didChange).

5. Une date

final _dateCtrl = TextEditingController();
DateTime? _naissance;

TextFormField(
  controller: _dateCtrl,
  readOnly: true,                                    // pas de clavier : on ouvre le calendrier
  decoration: const InputDecoration(labelText: 'Date de naissance', prefixIcon: Icon(Icons.calendar_today)),
  validator: (_) => _naissance == null ? 'Choisissez une date' : null,
  onTap: () async {
    final date = await showDatePicker(
      context: context,
      initialDate: DateTime(2007),
      firstDate: DateTime(1960),
      lastDate: DateTime.now(),
    );
    if (date != null) {
      setState(() {
        _naissance = date;
        _dateCtrl.text = '${date.day.toString().padLeft(2, '0')}/'
            '${date.month.toString().padLeft(2, '0')}/${date.year}';
      });
    }
  },
),

← Validation des e-mails dans FlutterTP 8 : De la maquette Figma à l'application Flutter – inscription en 3 écrans →