Guide complet Flutter : Le widget Scaffold

À quoi sert le Scaffold dans Flutter ?

Le widget Scaffold (échafaudage) est un widget de base qui va vous permettre d’implémenter la structure visuelle de votre MaterialApp. Les deux widgets sont indissociables l’un de l’autre, car sans MaterialApp, impossible d’accéder à la page, mais sans Scaffold, impossible de créer des éléments visuels comme un fond, du texte, des boutons, etc. 

Pour mieux comprendre, voici les étapes qui sont suivies au moment de la compilation  : 

1. La fonction void main(), sert de point de départ à la compilation. Elle va prendre comme argument la méthode runApp() ; 
2. La méthode runApp, va permettre de lancer l’application en partant d’une MaterialApp qu’elle va prendre comme argument. 
3. La MaterialApp va permettre de donner un contexte à la construction de notre page. Par exemple, elle permet d’ajouter facilement un thème de couleurs, ou bien de gérer les changements d’orientation de l’appareil. Elle peut prendre comme argument un Scaffold dans lequel on va venir créer le visuel de notre page. 
4. Enfin, le Scaffold représente la partie visible de votre application. C’est dans celui-ci que vous allez créer le corps (body) de votre page, et y placer vos containers, vos lignes, vos colonnes, boutons, etc.

Voici ce que cela donne une fois sous la forme d’un code :

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Le nom de mon App'),
        ),
        body: Center(
          child: Text('Le corps de ma page'),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
            BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Paramètres'),
          ],
        ),
      ),
    );
  }
}

Quels éléments contient le Scaffold ? 

Comme expliqué précédemment, le Scaffold va nous permettre d’organiser les éléments visuels d’une page, en haut, au centre et en bas de notre écran. On va ainsi trouver les paramètres : 

• appBar, qui prend comme argument un widget de type AppBar(). On parle ici de la partie en haut de l’écran ; 
• body, qui peut prendre différents arguments, comme des widgets Container, Row, Column, TabbarView, etc. On parle ici de toute la partie centrale de l’écran, qui prend tout l’espace si vous n’avez pas défini de appBar ou de bottomNavigationBar ; 
• bottomNavigationBar, qui joue la même fonction que la appBar mais en bas de l’écran. 

C’est à l’intérieur de ces trois widgets que vous allez pouvoir ensuite placer les différents éléments visuels de votre application Flutter et ainsi construire votre page.

Conclusion

Pour conclure, le widget Scaffold est la base de la construction d’une page d’application. C’est le cadre qui va permettre de structurer votre contenu et le repartir sur l’écran. Pour continuer, je vous propose de découvrir un autre widget que vous allez beaucoup utiliser :

Guide complet Flutter : le widget Container →