6. Créer une application Flutter vierge

On entre enfin dans le vif du sujet: Flutter. Après avoir abordé les bases du Dart, nous allons mettre en application tout ce que nous avons appris.

Cette partie consistera à vous faire prendre en main Flutter et à vous faire découvrir ses meilleures pratiques.

Le code de notre application Flutter peut rapidement devenir impressionnant lorsqu’on débute notre apprentissage.

La syntaxe du Dart et la structure des Widgets de Flutter peuvent nous faire peur quand on voit les longues pages de code.

C’est pourquoi je souhaitais revenir sur les bases avec une application quasiment vierge, de cette manière, nous verrons étapes par étapes comment ajouter du contenu à notre page.

1. Le fichier Dart

Comme d'habitude nous allons travailler sur le fichier Dart principal:

lib/main.dart

Dans lequel vous pouvez copier le code suivant pour créer une première application quasiment vierge:

import 'package:flutter/material.dart';

void main() {
  runApp(
    Container(
      color: Colors.blue.shade600,
      child: const Center(
        child: Text(
          'Hello World',
          textDirection: TextDirection.ltr,
        ),
      ),
    ),
  );
}

Après enregistrement, votre émulateur devrait vous afficher la page suivante:

Cette fois-ci, pas de titre, de menu ou de bouton flottant, simplement un texte centré sur fond bleu.

2. Créer une page vide

Nous allons maintenant reprendre le code Dart de cette première application Flutter pour vous permettre de bien saisir toutes les étapes.

On commence par l'importation du package Material de Flutter:

import 'package:flutter/material.dart';

Je vous renvoie vers la documentation de cette librairie indispensable de Flutter: https://api.flutter.dev/flutter/material/material-library.html

Ce package vous donne tout simplement accès à tous les widgets Flutter les plus utilisés pour créer du contenu.

Il peut s'agir de boutons, d'animations, d'icônes ou encore de menus, bref les widgets indispensables même pour notre application quasiment vierge.

On retrouve ensuite notre fonction main() qui comme on l'a vu dans les leçons sur le Dart, permet d'exécuter tout notre code:

void main() {}

On ajoute le terme void devant notre fonction main() pour indiquer le type de résultat retourné.

Voyons maintenant la fonction runApp() jusque-là inconnu, qui nous permet de lancer notre application:

runApp()

Cette fonction est disponible depuis le package Material de Flutter dont je vous laisse la documentation : https://api.flutter.dev/flutter/widgets/runApp.html

Concrètement, c’est cette fonction qui va faire le lien entre notre code et l'écran de notre smartphone.

Nous allons en effet ajouter du contenu à l'intérieur de cette fonction qui sera chargé dans notre émulateur.

3. Créer un fond de couleur

Passons maintenant à la dernière partie de notre code, les widgets qui contiennent le contenu de notre page.

Dans notre fonction runApp() on lui ajoute comme paramètre le widget Container, qui représente une boîte simple:

runApp(Container());

Pour commencer on donne simplement à notre widget Container une propriété de couleur pour le visualiser.

Sachez aussi que le widget Container prendra automatiquement 100% de l'espace disponible.

On utilise donc la propriété color ainsi que les couleurs prédéfinies de Flutter:

Container(
  color: Colors.blue,
),

En actualisant votre émulateur, vous devriez voir votre application Flutter se recharger avec une page de couleur bleue.

Pour changer de couleur, rien de plus simple: entrez simplement "Colors." et attendez que Visual Studio Code vous affiche la fenêtre de sélection de couleur.

Amusez-vous à tester différentes couleurs ainsi que les différentes nuances que la syntaxe Colors.blue.shade600 propose.

Voilà donc comment créer une première application Flutter avec une page de couleur simple.

4. Créer du texte centré dans notre page

On finit maintenant avec nos deux derniers widgets pour afficher et centrer du texte dans notre page.

Cela nous permettra d'aborder la notion de child de Flutter qui permet à un widget de contenir un autre widget.

Souvent dans les codes Dart et Flutter que vous rencontrerez, vous remarquerez cette arborescence de ligne de code et en fait de Widgets, qui s'incluent les uns dans les autres.

J'utilise donc la propriété child pour lui indiquer un widget enfant, Center():

Container(
  color: Colors.blue.shade600,
  child: const Center()
),

Ce widget comme son nom l'indique permet de centrer du contenu verticalement et horizontalement dans un autre widget.

Ici notre contenu sera parfaitement centré dans notre page, car il n'y a aucun autre contenu.

On ajoute ensuite un autre widget à l'intérieur de celui-ci, avec la propriété child:

Container(
  color: Colors.blue.shade600,
  child: const Center(
    child: Text(
      'Hello World',
      textDirection: TextDirection.ltr,
    ),
  ),
),

Ce widget Text() contient ici deux champs, le premier pour lui indiquer le texte à afficher et le deuxième pour lui indiquer son sens de lecture (left to right).

On est obligé de préciser le sens de lecture, car notre texte n'est pas inclus dans un widget de type Scaffold (échafaudage d'une page) que nous verrons dans le prochain tutoriel.

Nous aurons aussi l'occasion de revoir en détail les principaux widgets de Flutter, ainsi que les propriétés qui leur sont associées.

Voilà pour la création de notre application Flutter vierge, j'ai essayé de faire au plus court et au plus simple pour notre code.