Formulaires

Les champs de saisie de texte

Les champs de saisie sont l’expression la plus simple et généraliste de ces widgets. Dans un espace dédié, l’utilisateur peut saisir du texte. On en retrouve pour toute sorte d’usage et notamment au moment de la connexion pour la récupération d’un login et d’un mot de passe. Il existe deux widgets qui peuvent jouer ce rôle : TextField et CupertinoTextField.

import 'package:flutter/cupertino.dart';  
import 'package:flutter/material.dart'; 
 
void main() => runApp(MyApp()); 
 
class MyApp extends StatelessWidget { 
 @override 
 Widget build(BuildContext context) { 
   return MaterialApp( 
     title: 'Flutter Demo', 
     theme: ThemeData( 
       primarySwatch: Colors.blue, 
     ), 
     home: MyHomePage(title: 'Flutter Demo Champs texte'), 
   ); 
 } 
} 
 
class MyHomePage extends StatefulWidget { 
 MyHomePage({Key key, this.title}) : super(key: key); 
 
 final String title; 
 ...

Dates et heures

Dans les formulaires, il est courant d’avoir besoin de récupérer des dates et/ou des heures. De nouveau, ces widgets se déclinent dans les deux styles, Material Design et iOS.

import 'package:flutter/material.dart'; 
 
 
void main() => runApp(MyApp()); 
 
class MyApp extends StatelessWidget { 
 @override 
 Widget build(BuildContext context) { 
   return MaterialApp( 
     title: 'Flutter Demo', 
     theme: ThemeData.light(), 
     home: MyHomePage(title: 'Flutter Demo Date'), 
     ); 
 } 
} 
 
class MyHomePage extends StatefulWidget { 
 MyHomePage({Key key, this.title}) : super(key: key); 
 
 final String title; 
  
 
 @override 
 _MyHomePageState createState() => _MyHomePageState(); 
} 
 
class _MyHomePageState extends State<MyHomePage> { 
    
  
 @override 
 Widget build(BuildContext context) { 
   return Scaffold( 
     appBar: AppBar( 
       title: Text(widget.title), 
     ), 
     body: Center( 
       child: Column( 
         mainAxisAlignment: MainAxisAlignment.center, ...

Switch

Le switch est communément considéré comme un interrupteur. Il possède deux positions correspondant à un état faux et un autre vrai. Il est parfait pour permettre à l’utilisateur de faire des choix simples.

Radio

Les boutons « radios » sont une autre manière de récupérer un choix émis par l’utilisateur. Ils offrent potentiellement plus de choix qu’un Switch, mais reste limités puisque le choix multiple n’est pas autorisé.

Concernant Flutter, il n’existe qu’un seul widget au style Material, nommé Radio. Le constructeur impose trois paramètres obligatoires : value, groupValue et onChanged. La logique est donc proche de celle du Switch. La différence principale réside dans la présence du paramètre groupValue qui sert à « lier » les occurrences de Radio entre elles en les faisant appartenir à un même groupe.

Pour présenter le widget au sein de la même application, une énumération est ajoutée. Elle va servir de base au choix que l’utilisateur peut effectuer :

enum RadioChoix { Voiture, Avion, Bateau } 

Elle doit être placée en dehors de la classe _MyHomePageState. Trois possibilités y sont renseignées sur un éventuel mode de transport qui pourra être voiture, avion ou bateau.

Au début de la classe, deux variables sont ajoutées en dessous de celle du booléen _choixSwitch vu dans la section Switch de ce chapitre. La première prend le type de l’énumération soit RadioChoix. Par défaut, elle porte sur la valeur avion. La seconde est une icône qui sera utilisée pour confirmer visuellement le choix fait par l’utilisateur. Elle aussi est configurée avec l’icône de l’avion pour être cohérente avec la précédente :

bool _choixSwitch = false; 
RadioChoix _choixRadio = RadioChoix....

Checkbox

Pour compléter les widgets offrant une liberté de choix à un utilisateur, il faut évoquer les Checkbox. Contrairement aux boutons radios, les cases à cocher permettent un choix multiple. Il n’y a donc pas de notion de groupe, chacune étant indépendante. De fait, leur constructeur ne possède que deux paramètres obligatoires que sont value et onChanged.

Bien sûr, il existe d’autres paramètres qui permettent d’améliorer l’esthétique du widget comme activeColor.

Pour en faire une démonstration, toujours sur la même application, une variable va être ajoutée. Il s’agit d’une Map qui, pour rappel, a la particularité de fonctionner avec un système de clé/valeur. Cela va s’avérer utile puisque le paramètre value attend un booléen. Concernant la clé, il va être confortable de réutiliser l’énumération précédemment définie. L’objet Map compose donc comme ceci :

Map _mapTransport = { 
 RadioChoix.Voiture: false, 
 RadioChoix.Avion: false, 
 RadioChoix.Bateau: false, 
}; 

Pour l’instant, toutes les valeurs sont passées à false. Aucune Checkbox ne sera cochée. Celles-ci sont placées après un Divider au sein d’une Row :

Divider(), ...

Slider

Les sliders sont un autre type de composant de formulaire. Ils permettent à l’utilisateur de choisir une valeur sur une échelle définie. Cette fois-ci, deux widgets remplissent ce rôle, chacun avec le style lié à sa plateforme.

double _choixSlider = 5.0;