fbpx

11. Les Widgets Flutter de base

On passe maintenant à la deuxième partie de notre chapitre sur les bases de Flutter.

Il s’agira ici de construire de véritables applications Flutter, avec les fondements d’une interface utilisateur.

Nous avons vu dans les leçons précédentes comment manipuler les Widgets Flutter et créer de premières applications très simples.

Maintenant, nous allons voir comment ajouter d’autres Widgets de type image, icône et bouton dans nos applications.

1. Le widget Text

On commence avec un widget que l'on a déjà abordé à de nombreuses reprises: le widget Text.

En fait il existe trois widgets Text dans Flutter qui nous permettent d'affecter ou non les mêmes propriétés de style à tout son contenu.

On utilisera en premier le widget le plus simple Text() qui nous permet déjà de créer un bon design: https://api.flutter.dev/flutter/widgets/Text-class.html

On lui appliquera la classe TextStyle() pour lui modifier toutes ses propriétés visuelles: https://api.flutter.dev/flutter/painting/TextStyle-class.html.

Par exemple pour augmenter la taille de la police de mon texte, je n'ai qu'à ajouter la classe TextStyle avec la propriété fontSize:

Text(
  'Hello World',
  style: TextStyle(fontSize: 30),
)

Vous retrouverez dans la documentation toutes les propriétés existantes pour le widget Text().

Je peux par exemple lui ajouter un fond de couleur rouge et mettre le texte en blanc:

Text(
  'Hello World',
  style: TextStyle(
    fontSize: 30,
    color: Colors.white,
    backgroundColor: Colors.red,
  ),
),

Voilà le résultat de mon application de démarrage avec ces propriétés appliquées à mon texte centré:

On peut finir également avec la propriété fontWeight qui permet de donner une certaine épaisseur à notre texte.

On peut ainsi utiliser la classe FontWeight pour renvoyer la constante bold directement et rendre notre texte gras:

Text(
  'Hello World',
  style: TextStyle(
    fontSize: 30,
    color: Colors.white,
    fontWeight: FontWeight.bold,
    backgroundColor: Colors.red,
  ),
),

Voilà pour les principales propriétés des widgets Text(), nous aurons l'occasion d'en aborder de nouvelles avec le chapitre sur l'interface utilisateur.

2. Le widget Image

On passe maintenant à un nouveau widget très intéressant, celui des images dans Flutter.

Celui-ci va nous permettre d'afficher des images ou logos pour nos applications Flutter et va donc être très utile.

De la photo de profil utilisateur, aux photos partagées dans un chat ou encore le logo de votre application, les images sont très courantes.

Je vous laisse comme d'habitude le lien de la documentation officielle pour plus de détail: https://flutter.dev/docs/development/ui/assets-and-images.

Pour commencer je vous invite à créer un dossier pour contenir toutes les images de votre application.

Vous pouvez l'appeler "assets" ou tout simplement "images" dans le cas où il ne contiendra que des images:

Une fois ce nouveau dossier créé, je vous invite à y placer une photo de votre choix, par exemple cette image de bébé Yoda:

bebe_yoda.jpeg

Une fois que votre nouvelle image a été ajouté, vous pouvez ouvrir Visual Studio à votre fichier YAML:

pubspec.yaml

C'est en effet dans ce fichier que nous allons déclarer notre image pour pouvoir l'utiliser.

Vous retrouverez vers la fin de votre fichier pubspec la section assets qui vous permettra d'indiquer les ressources de votre application.

Il pourra s'agir de différents types de fichiers (PDF, MP4, GIF) mais nous allons commencer par les images simples.

Vous pouvez ainsi ajouter la référence de votre image avec la syntaxe suivante:

assets:
  - images/bebe_yoda.jpeg

Une fois notre référence ajoutée, nous pouvons utiliser le Widget Image avec le champ image et la classe AssetImage():

body: const Center(
  child: Image(
    image: AssetImage('images/bebe_yoda.jpeg'),
  ),
),

C'est à cette classe AssetImage() que nous indiquons l'adresse de notre image dans notre application Flutter.

On peut également directement utiliser la méthode asset() pour indiquer l'adresse de l'image:

body: Center(
  child: Image.asset('images/bebe_yoda.jpeg'),
),

Évidemment, vous devez avoir indiqué la bonne adresse dans votre fichier pubspec.

Voilà le résultat de votre image centrée dans votre application Flutter:

Je vous propose maintenant une petite variante de notre widget Image qui consiste à utiliser des photos issues d'internet.

On utilise pour cela la fonction network() pour indiquer l'adresse web de notre fichier image que l'on souhaite afficher.

Vous pouvez par exemple effectuer une recherche dans Google Images avec les termes "bébé yoda gif":

Sélectionnez l'image ou le gif de votre choix, puis cliquez sur "Copier l'adresse de l'image'.

Vous pouvez ensuite remplacer votre widget Image par le code suivant avec votre adresse URL en paramètre:

Image.network(
  'https://drissas.com/wp-content/uploads/2021/08/bebe_yoda.gif'),

Votre gif animé de bébé Yoda devrait donc correctement s'afficher dans votre application Flutter.

3. Le widget Icon

On continue avec un widget très utile également, celui des icônes du Material Design de Google.

Flutter propose en effet un widget dédié pour afficher et personnaliser les icônes de la bibliothèque Material.

Je vous laisse le lien de ce widget pour accéder à toutes les icônes disponibles: https://api.flutter.dev/flutter/material/Icons-class.html

Avant d'utiliser le widget Icon() de Flutter, vous devez vous assurer que la police des icônes Material est bien présente dans votre fichier pubspec.yaml:

name: my_awesome_application
flutter:
  uses-material-design: true

Flutter propose par défaut cette classe dans la section dédié de votre fichier YAML désormais.

Nous pouvons donc utiliser le widget Icon() dans notre application pour afficher une première icône très simple:

body: const Center(
  child: Icon(Icons.chat),
),

Ici on précise le nom de notre icône avec la constante dédié, par exemple chat pour afficher le symbole correspondant:

Évidemment notre affichage est ainsi le plus simple possible, avec une couleur noir et une taille réduite au minimum.

Comme je vous l'ai déjà expliqué, Flutter vous proposera toujours un style de base, c'est à vous par la suite de lui appliquer le design de votre choix.

On peut par exemple ajouter une couleur à notre icône avec le champ color et une taille plus grande avec le champ size:

body: const Center(
  child: Icon(
    Icons.favorite,
    color: Colors.pink,
    size: 100,
  ),
),

De cette manière, vous pouvez vous amuser avec différentes icônes, des couleurs cohérentes et des tailles plus grandes:

Nous verrons dans le chapitre sur le design comment les intégrer dans d'autres widgets de contenu.

4. Le widget Button

(Attention, depuis la mise à jour Flutter 2.0, il est recommandé d'utiliser les widgets ElevatededButton et TextButton. Dans la vidéo, j'utilise les RaisedButton, donc prenez soin de bien suivre les nouvelles indications écrites ci-dessous.)

On termine notre leçon sur les principaux Widgets de Flutter avec les boutons.

Les boutons sont souvent utilisés pour les formulaires d'envoi de données, mais également pour valider certaines actions.

Un bouton aura la capacité de faire exécuter du code une fois que l'utilisateur aura cliqué dessus.

Nous verrons dans cette partie comment les personnaliser pour obtenir tous les résultats souhaités:

Il existe dans Flutter bien plus qu'un seul type de bouton, je vous laisse donc la liste de toutes les variants possibles: https://flutter.dev/docs/development/ui/widgets/material#Buttons

Nous allons utiliser dans cette partie essentiellement le classe de bouton ElevatedButton: https://api.flutter.dev/flutter/material/ElevatedButton-class.html

Ce widget va nous permettre de créer des boutons vraiment les plus simples possibles, avec toutes les propriétés de style.

Voilà par exemple le code de notre premier bouton Flutter, avec du texte et un message qui s'affiche dans la console lorsqu'on clique dessus:

body: Center(
  child: ElevatedButton(
    onPressed: () {
      debugPrint('code de mon bouton');
    },
    child: const Text('Premier bouton'),
  ),
),

Et voilà le rendu de notre bouton qui par défaut s'affichera en bleu dans notre page:

Il est évidemment possible d'ajouter des propriétés de style à notre bouton pour lui donner l'apparence souhaitée.

Nous pouvons utiliser par exemple des champs comme primary et textStyle pour colorer le fond et changer la taille du texte.

Avec le champ padding, je peux détailler les marges intérieures de mon bouton avec la méthode fromLTRB().

Et enfin je peux modifier la taille du texte de mon bouton avec la classe TextStyle que nous avons abordé précédemment.

Voilà donc le code de notre deuxième bouton avec de la couleur et une taille plus grande:

ElevatedButton(
  style: ElevatedButton.styleFrom(
    primary: Colors.purple,
    padding: const EdgeInsets.fromLTRB(40, 10, 40, 10),
    textStyle: const TextStyle(fontSize: 20),
  ),
  child: const Text('Deuxième bouton'),
  onPressed: () {
    debugPrint('Code de mon bouton');
  },
),

Et voilà le rendu de notre deuxième bouton, qui est cette fois beaucoup plus lisible dans notre application:

On continue avec une personnalisation encore plus poussée de notre bouton Flutter.

On souhaite cette fois-ci lui ajouter des bords arrondis pour le rendre encore plus moderne.

Pour cela on utilise le champ shape (forme en anglais) pour lui indiquer que nous voulons un bouton aux bords arrondis (RoundedRectangleBorder).

On utilise ensuite le champ borderRadius pour préciser le type de bords arrondis, ici circulaire avec un rayon de 30 pixels:

ElevatedButton(
  style: ElevatedButton.styleFrom(
    primary: Colors.teal,
    textStyle: const TextStyle(fontSize: 25),
    padding: const EdgeInsets.fromLTRB(40, 10, 40, 10),
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(30)),
    ),
  ),
  child: const Text('Troisième bouton'),
  onPressed: () {
    debugPrint('Code de mon bouton');
  },
),

Voilà pour le rendu de notre troisième bouton qui possède vraiment un bon design selon moi.

C'est ce genre de bouton que j'utiliserais la plupart du temps dans mes propres applications Flutter.

On continue avec un autre type de bouton Flutter, ici le widget TextButton qui va nous permettre de créer des boutons à fond transparent.

En fait la syntaxe pour notre TextButton est quasiment identique, nous avons accès au même champ de personnalisation.

Simplement ici notre bouton n'aura pas de fond de couleur, ou alors un fond blanc.

On utilise juste en plus le champ side pour ajouter un bord visible à notre bouton, toujours arrondi:

TextButton(
  onPressed: () {
    debugPrint('Code de mon bouton');
  },
  style: TextButton.styleFrom(
    primary: Colors.redAccent,
    padding: const EdgeInsets.fromLTRB(60, 15, 60, 15),
    textStyle: const TextStyle(fontSize: 25),
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(30)),
      side: BorderSide(color: Colors.redAccent, width: 2),
    ),
  ),
  child: const Text('Quatrième bouton'),
),

Voilà pour le rendu de notre quatrième bouton, plus discret que les versions précédentes:

Ce type de bouton peut nous permettre de mettre en avant des boutons avec différents niveaux d'importance (connexion / inscription par exemple).

On termine avec le cinquième bouton (avec un fond dégradé) et qui est de loin le plus complexe à coder.

J'ai repris un exemple de la documentation Flutter et l'ai adapté à notre type de bouton circulaire précédent.

Le résultat est un bouton aux bords arrondis et avec un fond de couleurs dégradées.

Voilà le code du bouton qui contient en fait un Widget Container() avec le fond dégradé:

ElevatedButton(
  style: ElevatedButton.styleFrom(
    padding: const EdgeInsets.all(0),
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(30)),
    ),
  ),
  child: Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(30),
      gradient: const LinearGradient(
        colors: <Color>[
          Colors.red,
          Colors.deepOrange,
          Colors.orange,
        ],
      ),
    ),
    padding: const EdgeInsets.fromLTRB(60, 15, 60, 15),
    child: const Text('Cinquième bouton',
                      style: TextStyle(fontSize: 25)),
  ),
  onPressed: () {
    debugPrint('Code de mon bouton');
  },
),

Et voilà le rendu de notre cinquième bouton, que vous pouvez évidemment personnaliser à l'infini:

C'est ainsi que nous concluons cette leçon sur les principaux widgets Flutter à utiliser dans nos applications.