Dans le monde du développement d’applications mobiles, Flutter Dart s’impose comme l’un des frameworks les plus populaires et puissants. En tant que développeur, il est essentiel de disposer de ressources fiables pour naviguer efficacement dans cet environnement. C’est là qu’intervient notre mémento Flutter Dart. Ce guide pratique compile les informations les plus cruciales sur les widgets, les fonctionnalités et les meilleures pratiques, permettant aux développeurs de gagner du temps et d’optimiser leur flux de travail. Que vous soyez novice en Flutter ou que vous cherchiez à perfectionner vos compétences, ce mémento est conçu pour vous fournir tout ce dont vous avez besoin pour créer des applications mobiles performantes et esthétiques.

Mémento Flutter Ultime

Tableau des Widgets Flutter

Widget	Description	Attributs
Container	Un conteneur flexible pour des widgets enfants, permettant de les styliser, positionner et aligner.	width, height, color, padding, margin, alignment, decoration, child
Column	Affiche ses enfants verticalement.	children, mainAxisAlignment, crossAxisAlignment, mainAxisSize, verticalDirection
Row	Affiche ses enfants horizontalement.	children, mainAxisAlignment, crossAxisAlignment, mainAxisSize, textDirection
Text	Affiche du texte avec divers styles.	data, style, textAlign, overflow, maxLines, softWrap
Image	Affiche une image à partir d’un fichier, d’une URL ou d’une ressource.	image, width, height, fit, alignment, color, colorBlendMode
Button	Un bouton cliquable.	onPressed, child, style, color, padding, shape
ElevatedButton	Un bouton avec une élévation qui lui donne une apparence surélevée.	onPressed, child, style, elevation, focusElevation, hoverElevation
TextField	Champ de texte où l’utilisateur peut entrer des données.	controller, decoration, keyboardType, obscureText, maxLines, onChanged
ListView	Une liste défilante de widgets enfants.	children, itemCount, itemBuilder, scrollDirection, shrinkWrap, physics
GridView	Une grille défilante de widgets enfants.	gridDelegate, children, scrollDirection, shrinkWrap, physics
Scaffold	Structure de base pour les applications Flutter.	appBar, body, floatingActionButton, drawer, bottomNavigationBar, backgroundColor, resizeToAvoidBottomInset
AppBar	Barre d’application pour les en-têtes.	title, actions, leading, backgroundColor, elevation, bottom
Snackbar	Une notification temporaire qui apparaît en bas de l’écran.	content, action, duration, backgroundColor, behavior
Drawer	Un panneau latéral qui s’ouvre à partir du bord de l’écran.	child, elevation, backgroundColor, width
Form	Un conteneur pour les champs de formulaire.	key, child, autovalidateMode, onWillPop, onChanged
Checkbox	Une case à cocher pour les choix binaires.	value, onChanged, activeColor, checkColor, materialTapTargetSize
Radio	Boutons radio pour sélectionner une option parmi plusieurs.	value, groupValue, onChanged, activeColor
Switch	Un interrupteur pour activer ou désactiver une option.	value, onChanged, activeColor, inactiveThumbColor, inactiveTrackColor
Tooltip	Indique une info-bulle lorsque l’utilisateur survole un widget.	message, child, height, verticalOffset, preferBelow
Expanded	Un widget qui prend tout l’espace disponible dans un Row, Column ou Flex.	child, flex
Flexible	Semblable à Expanded, mais permet de spécifier un rapport de flexibilité.	child, flex, fit
Stack	Superpose des widgets les uns sur les autres.	children, alignment, fit, clipBehavior
Positioned	Positionne un enfant dans un Stack.	top, bottom, left, right, width, height

Détails des Attributs

1. Container

• Attributs :
  • width: double – Largeur du conteneur.
  • height: double – Hauteur du conteneur.
  • color: Color – Couleur de fond.
  • padding: EdgeInsets – Espace intérieur.
  • margin: EdgeInsets – Espace extérieur.
  • alignment: Alignment – Alignement des enfants.
  • decoration: BoxDecoration – Styles de décoration (ex: ombre, bordure).
  • child: Widget – Widget enfant.
• Exemple :dartCopier le codeContainer( width: 100, height: 100, color: Colors.blue, padding: EdgeInsets.all(8), child: Text('Hello'), )

2. Column

• Attributs :
  • children: List<Widget> – Enfants à afficher.
  • mainAxisAlignment: MainAxisAlignment – Alignement principal (ex: start, center).
  • crossAxisAlignment: CrossAxisAlignment – Alignement croisé (ex: start, end).
  • mainAxisSize: MainAxisSize – Taille de l’axe principal (min ou max).
  • verticalDirection: VerticalDirection – Direction verticale (ex: up ou down).
• Exemple :dartCopier le codeColumn( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('First'), Text('Second'), ], )

3. Row

• Attributs :
  • children: List<Widget> – Enfants à afficher.
  • mainAxisAlignment: MainAxisAlignment – Alignement principal (ex: start, center).
  • crossAxisAlignment: CrossAxisAlignment – Alignement croisé (ex: start, end).
  • mainAxisSize: MainAxisSize – Taille de l’axe principal (min ou max).
  • textDirection: TextDirection – Direction du texte (ex: ltr, rtl).
• Exemple :dartCopier le codeRow( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ Text('Left'), Text('Center'), Text('Right'), ], )

4. Text

• Attributs :
  • data: String – Texte à afficher.
  • style: TextStyle – Style du texte (ex: police, taille).
  • textAlign: TextAlign – Alignement du texte (ex: left, center).
  • overflow: TextOverflow – Comportement en cas de dépassement (ex: clip, ellipsis).
  • maxLines: int – Nombre maximum de lignes.
  • softWrap: bool – Permet au texte de se couper à la fin de la ligne.
• Exemple :dartCopier le codeText( 'Hello Flutter', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold), textAlign: TextAlign.center, )

5. Image

• Attributs :
  • image: ImageProvider – Source de l’image (ex: AssetImage, NetworkImage).
  • width: double – Largeur de l’image.
  • height: double – Hauteur de l’image.
  • fit: BoxFit – Ajustement de l’image (ex: cover, contain).
  • alignment: Alignment – Alignement de l’image.
  • color: Color – Couleur de filtrage.
  • colorBlendMode: BlendMode – Mode de mélange de couleur.
• Exemple :dartCopier le codeImage( image: NetworkImage('https://example.com/image.png'), width: 100, height: 100, fit: BoxFit.cover, )

6. Button

• Attributs :
  • onPressed: VoidCallback – Fonction à appeler lors du clic.
  • child: Widget – Contenu du bouton.
  • style: ButtonStyle – Style du bouton.
  • color: Color – Couleur de fond.
  • padding: EdgeInsets – Espace intérieur.
  • shape: ShapeBorder – Forme du bouton.
• Exemple :dartCopier le codeElevatedButton( onPressed: () { print('Button pressed'); }, child: Text('Press Me'), )

7. ElevatedButton

• Attributs :
  • onPressed: VoidCallback – Fonction à appeler lors du clic.
  • child: Widget – Contenu du bouton.
  • style: ButtonStyle – Style du bouton.
  • elevation: double – Élévation du bouton.
  • focusElevation: double – Élévation lors du focus.
  • hoverElevation: double – Élévation lors du survol.
• Exemple :dartCopier le codeElevatedButton( onPressed: () { // Action à effectuer }, child: Text('Elevated Button'), style: ElevatedButton.styleFrom( elevation: 5, primary: Colors.blue, ), )

8. TextField

• Attributs :
  • controller: TextEditingController – Contrôleur pour gérer le texte.
  • decoration: InputDecoration – Décoration du champ.
  • keyboardType: TextInputType – Type de clavier à afficher.
  • obscureText: bool – Masquer le texte (ex: pour mot de passe).
  • maxLines: int – Nombre maximum de lignes.
  • onChanged: ValueChanged<String> – Appelé lors du changement de texte.
• Exemple :dartCopier le codeTextField( decoration: InputDecoration( labelText: 'Enter your name', border: OutlineInputBorder(), ), onChanged: (value) { print(value); }, )

9. ListView

• Attributs :
  • children: List<Widget> – Enfants à afficher.
  • itemCount: int – Nombre total d’éléments.
  • itemBuilder: IndexedWidgetBuilder – Fonction pour construire chaque élément.
  • scrollDirection: Axis – Direction de défilement (ex: vertical, horizontal).
  • shrinkWrap: bool – Adapter la taille à la taille des enfants.
  • physics: ScrollPhysics – Comportement de défilement (ex: BouncingScrollPhysics).
• Exemple :dartCopier le codeListView.builder( itemCount: 10, itemBuilder: (context, index) { return ListTile( title: Text('Item $index'), ); }, )

10. GridView

• Attributs :
  • gridDelegate: SliverGridDelegate – Configuration de la grille.
  • children: List<Widget> – Enfants à afficher.
  • scrollDirection: Axis – Direction de défilement.
  • shrinkWrap: bool – Adapter la taille à la taille des enfants.
  • physics: ScrollPhysics – Comportement de défilement.
• Exemple :dartCopier le codeGridView.count( crossAxisCount: 2, children: List.generate(10, (index) { return Card( child: Center(child: Text('Grid Item $index')), ); }), )

11. Scaffold

• Attributs :
  • appBar: PreferredSizeWidget – Barre d’application.
  • body: Widget – Contenu principal.
  • floatingActionButton: FloatingActionButton – Bouton flottant.
  • drawer: Widget – Panneau latéral.
  • bottomNavigationBar: Widget – Barre de navigation inférieure.
  • backgroundColor: Color – Couleur de fond.
  • resizeToAvoidBottomInset: bool – Ajuster la taille lorsque le clavier est ouvert.
• Exemple :dartCopier le codeScaffold( appBar: AppBar(title: Text('My App')), body: Center(child: Text('Hello, World!')), floatingActionButton: FloatingActionButton( onPressed: () {}, child: Icon(Icons.add), ), )

12. AppBar

• Attributs :
  • title: Widget – Titre de la barre.
  • actions: List<Widget> – Actions supplémentaires.
  • leading: Widget – Widget à gauche (ex: icône).
  • backgroundColor: Color – Couleur de fond.
  • elevation: double – Élévation de la barre.
  • bottom: PreferredSizeWidget – Widget en bas de l’AppBar.
• Exemple :dartCopier le codeAppBar( title: Text('My AppBar'), actions: [ IconButton( icon: Icon(Icons.settings), onPressed: () {}, ), ], )

13. Snackbar

• Attributs :
  • content: Widget – Contenu de la notification.
  • action: SnackBarAction – Action de la notification.
  • duration: Duration – Durée d’affichage.
  • backgroundColor: Color – Couleur de fond.
  • behavior: SnackBarBehavior – Comportement (ex: fixed, floating).
• Exemple :dartCopier le codeScaffoldMessenger.of(context).showSnackBar( SnackBar( content: Text('This is a Snackbar'), action: SnackBarAction(label: 'Undo', onPressed: () {}), ), );

14. Drawer

• Attributs :
  • child: Widget – Contenu du tiroir.
  • elevation: double – Élévation du tiroir.
  • backgroundColor: Color – Couleur de fond.
  • width: double – Largeur du tiroir.
• Exemple :dartCopier le codeDrawer( child: ListView( children: [ DrawerHeader(child: Text('Header')), ListTile(title: Text('Item 1')), ListTile(title: Text('Item 2')), ], ), )

15. Form

• Attributs :
  • key: GlobalKey<FormState> – Clé globale pour le formulaire.
  • child: Widget – Contenu du formulaire.
  • autovalidateMode: AutovalidateMode – Mode de validation automatique.
  • onWillPop: Future<bool> Function() – Appelé lors de la tentative de retour.
  • onChanged: void Function() – Appelé lors des changements dans le formulaire.
• Exemple :dartCopier le codeForm( key: _formKey, child: Column( children: [ TextFormField( decoration: InputDecoration(labelText: 'Name'), validator: (value) { if (value == null || value.isEmpty) { return 'Please enter some text'; } return null; }, ), ElevatedButton( onPressed: () { if (_formKey.currentState!.validate()) { // Process data } }, child: Text('Submit'), ), ], ), )

16. Checkbox

• Attributs :
  • value: bool – État de la case à cocher.
  • onChanged: ValueChanged<bool> – Appelé lors du changement d’état.
  • activeColor: Color – Couleur active.
  • checkColor: Color – Couleur du marqueur.
  • materialTapTargetSize: MaterialTapTargetSize – Taille de la zone cliquable.
• Exemple :dartCopier le codeCheckbox( value: _isChecked, onChanged: (bool? value) { setState(() { _isChecked = value!; }); }, )

17. Radio

• Attributs :
  • value: T – Valeur de ce bouton radio.
  • groupValue: T – Valeur du groupe de boutons radio.
  • onChanged: ValueChanged<T> – Appelé lors du changement de sélection.
  • activeColor: Color – Couleur active.
• Exemple :dartCopier le codeRadio( value: 1, groupValue: _selectedValue, onChanged: (int? value) { setState(() { _selectedValue = value!; }); }, )

18. Switch

• Attributs :
  • value: bool – État du commutateur.
  • onChanged: ValueChanged<bool> – Appelé lors du changement d’état.
  • activeColor: Color – Couleur active.
  • inactiveThumbColor: Color – Couleur du pouce lorsqu’il est inactif.
  • inactiveTrackColor: Color – Couleur de la piste lorsqu’il est inactif.
• Exemple :dartCopier le codeSwitch( value: _isSwitchOn, onChanged: (bool value) { setState(() { _isSwitchOn = value; }); }, )

19. Tooltip

• Attributs :
  • message: String – Message à afficher dans l’info-bulle.
  • child: Widget – Widget à envelopper.
  • height: double – Hauteur de l’info-bulle.
  • verticalOffset: double – Décalage vertical.
  • preferBelow: bool – Préférer afficher en dessous.
• Exemple :dartCopier le codeTooltip( message: 'This is a tooltip', child: Icon(Icons.info), )

20. Expanded

• Attributs :
  • child: Widget – Enfant à développer.
  • flex: int – Rapport de flexibilité (par défaut 1).
• Exemple :dartCopier le codeRow( children: [ Expanded(child: Container(color: Colors.red)), Expanded(child: Container(color: Colors.blue)), ], )

21. Flexible

• Attributs :
  • child: Widget – Enfant à développer.
  • flex: int – Rapport de flexibilité.
  • fit: FlexFit – Déterminer comment l’espace libre est utilisé.
• Exemple :dartCopier le codeRow( children: [ Flexible(flex: 2, child: Container(color: Colors.red)), Flexible(flex: 1, child: Container(color: Colors.blue)), ], )

22. Stack

• Attributs :
  • children: List<Widget> – Enfants à superposer.
  • alignment: Alignment – Alignement des enfants.
  • fit: StackFit – Ajustement des enfants.
  • clipBehavior: Clip – Comportement de découpe.
• Exemple :dartCopier le codeStack( alignment: Alignment.center, children: [ Container(width: 100, height: 100, color: Colors.red), Container(width: 50, height: 50, color: Colors.blue), ], )

23. Positioned

• Attributs :
  • top: double – Position verticale.
  • bottom: double – Position verticale.
  • left: double – Position horizontale.
  • right: double – Position horizontale.
  • width: double – Largeur de l’élément.
  • height: double – Hauteur de l’élément.
• Exemple :dartCopier le codeStack( children: [ Container(width: 100, height: 100, color: Colors.red), Positioned( top: 20, left: 20, child: Container(width: 50, height: 50, color: Colors.blue), ), ], )

En résumé, le mémento Flutter Dart est un atout indispensable pour tout développeur désireux d’exceller dans la création d’applications mobiles. Grâce à ses explications claires et à ses exemples pratiques, ce mémento vous aide à comprendre rapidement les concepts fondamentaux de Flutter et Dart. En intégrant les connaissances acquises dans ce guide, vous pourrez non seulement améliorer votre productivité, mais aussi réaliser des applications qui se démarquent sur le marché. N’attendez plus pour enrichir votre expérience en développement mobile avec notre mémento Flutter Dart.

Plongez-vous dans l’univers de Flutter et Dart et commencez à bâtir des projets exceptionnels dès aujourd’hui ! Je vous invite à consulter également la documentation de Flutter et la documentation dart si vous avez besoin de connaitre des beaucoup d’autres éléments qui ne s’y trouvent pas dans ce moment.

Passionné par la création de site web et ne sachant pas comment le lancer ? Découvre l’article dédiée à comment devenir développeur web en partant de zéro