Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Flutter
  3. Formulaires
Extrait - Flutter Développez vos applications mobiles multiplateformes avec Dart
Extraits du livre
Flutter Développez vos applications mobiles multiplateformes avec Dart
5 avis
Revenir à la page d'achat du livre

Formulaires

Introduction

Dans la liste conséquente des widgets de Flutter, il en existe un certain nombre dédiés aux interactions avec les utilisateurs. Ces widgets actifs existent pour récupérer de l’information. Pour le Web, ils composent un groupe alimentant les formulaires. Dans ce chapitre, ces widgets vont être détaillés. Pour débuter, les champs qui permettent la saisie de texte seront étudiés. Le chapitre s’attardera ensuite sur les dates et heures. Enfin, les widgets permettant d’effectuer un choix comme les switches, les radio boutons, les checkbox ou encore les sliders seront abordés.

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.

1. TextField

Le widget TextField est donc un champ de saisie d’un texte pour le style Material Design. Comme souvent avec les widgets, il possède de nombreuses propriétés permettant de modifier son apparence. Le paramètre decoration du constructeur est par exemple dédié à cette tâche. Il faut y associer une instance de type InputDecoration. Le constructeur de cette classe comprend une grande quantité de paramètres optionnels allant d’un texte de remplacement (hintText) à la mise en place d’une icône ou encore d’un label (labelText). Les couleurs des différents éléments sont modifiables également.

Pour comprendre son fonctionnement, une nouvelle application est créée. La classe MyHomePage étend StatefulWidget afin de pouvoir modifier l’affichage en fonction des saisies réalisées dans le champ TextField.

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.

1. Material Design

a. Date

La mise en place d’un DatePicker comporte plusieurs étapes. Le widget qui va être utilisé est showDatePicker. Il fonctionne donc comme les pop-ups évoqués dans le chapitre Pop-up et navigation. Il va falloir une fonction de type Future pour gérer cela.

Mais avant d’examiner le code de cette dernière, il faut préparer le squelette de l’application. Il se base sur une classe StatefulWidget puisque la gestion des états va servir à mettre à jour l’écran en fonction de la date récupérée.

Pour déclencher l’ouverture de la fenêtre dédiée au choix de la date, un widget RaisedButton est intégré. Juste en dessous, une zone de texte viendra afficher la date qui aura été choisie.

Cette application ressemble à cela :

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.

1. Material Design

Le widget Switch est celui qui correspond au style Material Design. Son constructeur prend deux paramètres obligatoires. Il faut, dans un premier temps définir une valeur (value), en l’occurrence un booléen. Puis, la propriété onChanged doit être complétée. Il sera tout à fait possible d’y insérer un appel à setState.

D’autres paramètres optionnels sont également présents. Parmi ceux les plus utilisés, il y a activeColor qui permet de définir une couleur précise quand le Switch est actif. La couleur choisie est opérante pour le curseur tout comme pour la piste (track) qui se décline dans une note plus claire. Si cette déclinaison ne convient pas, il est toujours possible d’en spécifier une autre avec activeTrackColor. À l’inverse, quand l’utilisateur bascule le Switch dans une position inactive, la couleur du curseur pourra être modifiée grâce à inactiveThumbColor et la track avec inactiveTrackColor.

Le curseur peut même être remplacé par une image via activeThumbImage et inactiveThumbImage.

Pour mettre en lumière un exemple, une application...

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.

1. Material Design

Le widget au style Material Design se nomme tout simplement Slider. Son constructeur n’impose que deux paramètres obligatoires, value qui attend une valeur de type double, et onChanged.

Cependant, d’autres paramètres sont tout aussi importants. En effet, min et max, qui permettent de définir des valeurs minimales et maximales, désactiveront le Slider s’ils ne sont pas renseignés.

Au-delà, il est possible de définir des paliers avec divisions. Un label peut aussi être inséré. Il viendra accompagner le déplacement du curseur pour donner une indication.

Enfin, comme d’habitude, l’aspect graphique possède aussi ses paramètres comme activeColor et inactiveColor.

Pour tester le widget dans la même application, il faut au préalable créer une variable de type double. C’est elle qui va évoluer au fur et à mesure. Elle est insérée au début de _MyHomePageState.

double _choixSlider = 5.0; 

Dans l’appel à build, un Divider permet de séparer le code précédent du Slider. Dans ce dernier...