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. Les widgets de base
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

Les widgets de base

Introduction

Flutter est composé de widgets. C’est le cœur du framework dont le slogan est « In Flutter everything is a Widget » ! En français, on pourrait dire qu’avec Flutter tout est widget.

Le Widget est donc l’élément central du SDK. Il en existe pour à peu près tout, en allant des éléments graphiques jusqu’aux fonctionnalités.

À ce jour, sur la page web qui référence l’ensemble des Widgets, https://flutter.dev/docs/reference/widgets, il est possible d’en dénombrer 154.

L’objectif n’est pas de tous les détailler. Le chapitre va se consacrer à la découverte des principaux widgets pouvant servir lors d’un projet. D’autres seront abordés plus tard puisqu’ils possèdent certaines spécificités.

Tout d’abord, nous prendrons le temps d’examiner les structures graphiques principales sur les deux plateformes Android et iOS. Ce sera également l’occasion d’évoquer la détection de ces dernières pour obtenir un rendu adapté.

D’autres aspects seront ensuite détaillés comme les différents styles de boutons ou l’insertion de médias (images, icônes). Ce dernier point permettra aussi de s’attarder sur les dépendances et leur gestion....

Material Component

Parmi les regroupements de widgets, il y a tous ceux qui concernent l’aspect graphique calé sur le style Material Design de Google. C’est celui qui est appliqué sur Android. Il conditionne la tenue générale de l’écran ainsi que d’autres éléments comme les boutons, par exemple.

1. Scaffold

Le Scaffold est la structure de base des applications Android. Il s’agit d’un ensemble pouvant regrouper plusieurs éléments comme une appBar, un body, un floatingActionButton ou encore une bottomNavigationBar.

Comme il s’agit d’un élément principal, il sera le premier à être retourné dans le widget de construction graphique, le build.

@override 
Widget build(BuildContext context) { 
 return Scaffold( 
) ; //Scaffold 

a. AppBar

L’appBar est un widget qui vient se situer en haut de l’écran et dans lequel le titre se trouve généralement placé. C’est un élément du Scaffold.

Il s’agit d’un outil complet qui peut également accueillir des boutons.

Voici un exemple de code plaçant une appBar au sein d’un Scaffold et intégrant un bouton « j’aime ».

@override 
Widget build(BuildContext context) { 
 return Scaffold( 
   appBar: AppBar( 
     title: Text(widget.title), 
     actions: <Widget>[ 
       IconButton( 
           icon: _coeur, 
           onPressed: _likeThis 
       ), 
     ], 
     backgroundColor: Colors.red, 
   ), 
 ); 
} 

Dans l’exemple, à l’intérieur de la structure basique, Scaffold, une appBar est intégrée. Elle comporte le titre de la page ainsi que le bouton « j’aime ». Pour varier un peu, la propriété backgroundColor est modifiée pour afficher la couleur rouge.

Pour le bouton, le choix se porte sur un widget IconButton. Il est intégré dans un paramètre nommé actions qui attend une liste de widgets. L’IconButton sera vu, peu après, plus en détail....

Cupertino (Style iOS)

En parallèle du style Google, le Material Design, qui s’applique à la plateforme Android, Flutter comprend des widgets pour iPhone correspondant au style présent sur iOS. Il s’agit des widgets Cupertino (nom donné en référence à la ville où se situe le siège d’Apple). Dans cette partie, tous les widgets Cupertino ne seront pas vus. Certains éléments plus spécifiques tels que les boutons seront abordés un peu plus loin.

1. Scaffold de base

Sous iOS, il existe également un Scaffold. Il sert, tout comme celui du Material Design, à structurer l’écran. Il s’agit du CupertinoPageScaffold.

Afin de l’utiliser, il faut importer la bibliothèque Cupertino car, par défaut, seulement celle de Material est présente.

import 'package:flutter/cupertino.dart'; 

La suite du code est assez semblable au Scaffold vu plus haut :

@override 
Widget build(BuildContext context) { 
 return CupertinoPageScaffold( 
     child: Center( 
       child: Column( 
         mainAxisAlignment: MainAxisAlignment.center, 
         children: <Widget>[ 
 
         ], 
       ), 
     ), 
   backgroundColor: Colors.red[100], 
 ); 
} 

L’exemple reprend la présentation vue couramment, à savoir un Center suivi d’un Column. Une propriété backgroundColor existe également pour définir la couleur de fond. L’autre widget pouvant être incorporé est une navigationBar. Avant de voir cet élément en détail, il existe un autre Scaffold à découvrir qui en possède déjà une.

2. Scaffold avec barre de navigation

Il existe un autre...

Détection de la plateforme

Si l’objectif d’une application est de se fondre dans le style de son système d’exploitation hôte, il convient alors de lui faire posséder les deux styles : Material Design et Cupertino. Dès lors, un outil de détection de la plateforme est nécessaire pour savoir quel style sera chargé.

Pour tester cela, il faut, au préalable, créer deux Widgets, un pour Android et l’autre pour iOS. En l’occurrence, il s’agira respectivement d’un Scaffold et d’un CupertinoPageScaffold.

À l’intérieur de la classe _MyHomePageState, le code du widget Material Design correspondra à ceci :

Widget material() { 
 return Scaffold( 
   appBar: AppBar( 
     title: Text(widget.title), 
     backgroundColor: Colors.red, 
   ), 
   body: Center( 
     child: Column( 
       mainAxisAlignment: MainAxisAlignment.center, 
       children: <Widget>[ 
         Text( 
           'style Material Design', 
         ), 
       ], 
     ), 
   ), 
   bottomNavigationBar: BottomNavigationBar( 
     items: const <BottomNavigationBarItem>[ 
       BottomNavigationBarItem( 
           icon: Icon( 
             Icons.home, 
             color: Colors.white, 
           ), 
           title: Text( 
             'Accueil', 
             style: TextStyle(color: Colors.white), 
           )), 
       BottomNavigationBarItem( 
           icon: Icon( 
             Icons.supervised_user_circle, 
             color: Colors.white, 
       ...

Boutons

Dans le développement d’une application, les boutons sont essentiels. Ils garantissent la possibilité d’action à l’utilisateur. Les boutons peuvent prendre diverses formes. Cette partie va rendre compte des widgets de type bouton qui sont couramment utilisés avec Flutter.

1. FloatingActionButton

Le bouton d’action flottant, parfois appelé par son acronyme FAB, a été détaillé précédemment dans les sections AppBar et FloatingActionButton. Ce widget peut être considéré comme faisant partie du Scaffold contrairement aux autres boutons qui, eux, s’intègrent dans la propriété body du Scaffold, au sein d’autres widgets le plus souvent.

2. RaisedButton

Le raisedButton est un bouton Material Design. Il s’agit d’un bouton simulant un relief. Cet effet est donné par une surélévation. Cette dernière augmente davantage lors de l’appui. Sa taille minimum est de 88.0 par 36.0.

Côté action, il propose deux appels : onPressed et onLongPressed. S’ils sont nuls, le bouton est désactivé (disable) par défaut.

Le changement de couleur du bouton n’est apparent que dans le cas où il est actif. Il faut donc alimenter une valeur non nulle pour onPressed et/ou onLongPressed

Afin de voir l’aspect d’un RaisedButton, une application est créée avec simplement un floatingActionButton ainsi qu’un texte central qui va détecter un appui sur ce dernier :

class _MyHomePageState extends State<MyHomePage> { 
 String _choixBtn = 'Aucun bouton'; 
 
 void _quelBouton(String btn) { 
   setState(() { 
     switch (btn) {  
       case 'fab': 
         { 
           _choixBtn = "FloatingActionButton"; 
         } 
         break; 
       } 
   }); 
 } 
  void _fabOnPressed() { 
   _quelBouton('fab'); 
 } 
 
  
 @override 
 Widget build(BuildContext...

Médias

Dans le développement d’applications, il est indispensable de rendre l’expérience utilisateur la plus réussie possible. Il est donc primordial de savoir intégrer des médias. Dans cette section, le sujet va porter sur les icônes et les images.

1. Icônes

Les icônes sont l’un des outils les plus employés de nos jours. Elles permettent d’obtenir une compréhension rapide simplement au travers d’un visuel. De plus, à force de les employer, des conventions se sont mises en place. Par exemple, tout le monde associe la loupe à une recherche ou une roue dentée aux paramètres.

L’insertion de l’icône peut être réalisée au travers du widget Icon. Ce dernier permet de jouer avec certaines propriétés. Il est notamment possible de définir la taille de l’icône grâce à size. Sa couleur peut également être modifiée via color.

En dehors de ces paramètres optionnels, la classe Icon attend obligatoirement un objet de type IconData. C’est le cas pour les Icons et les CupertinoIcons

Flutter offre un vaste choix d’icônes. Faciles à trouver, puisqu’il existe un choix important déjà prévu. Il propose deux possibilités de base, soit en travaillant avec la classe Icons qui comporte une collection au style Material Design, soit avec la classe CupertinoIcons qui propose un style iOS.

a. Icons (Material Design)

Il est possible de retrouver l’ensemble de ces icônes de cette classe à cet endroit : https://material.io/resources/icons/?style=baseline

Voici la mise en place d’une application simple comportant une icône de style Material Design (Icons) :

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: 'Icônes Flutter'), 
   ); 
 } ...