Scaffold – un widjet de mise en page Flutter

Scaffold est une classe Flutter très importante qui implémente la structure de mise en page visuelle material design. Ce widget encapsule de nombreux widgets comme AppBar, Drawer, BottomNavigationBar, FloatingActionButton, SnackBar, etc.

C’est un conteneur de niveau supérieur pour MaterialApp .

Scaffold s’étend pour remplir l’espace disponible, ce qui signifie qu’il occupe tout l’écran. En fait, nous pouvons utiliser le widget Scaffold sans paramètres.

Selon la structure de mise en page visuelle de Material Design , l’écran d’une application mobile affiche plusieurs composants. Par exemple, une barre supérieur, qui porte le nom de l’application, un menu de navigation ou une barre de navigation inférieure et un bouton d’appel à l’action flottant. En effet, ces composants permettent d’accéder à différents écrans et à d’autres fonctionnalités de l’application.

Les attributs du widget Scaffold

Voici les principaux widget de Scaffold :

Le wigdet de Scaffold appBar

C’est la barre horizontale qui s’affiche en haut de l’écran. C’est l’un des principaux composants d’une application. Toutefois, le widget appBar possède ses propres propriétés comme elevation, title, actions, etc.

backgroundColor

Cette propriété définit la couleur d’arrière-plan de Scaffold.

Je vous conseil d’éviter le copier/coller. Lisez chaque ligne de code puis écrivez-la. Utilisez Ctrl+Espace pour afficher les suggestion de votre IDE.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            backgroundColor: Colors.blueGrey,
            appBar: AppBar(                
                title: Text("AppBar"))));
  }
}

Le widget de Scaffold body

Le widget body est une propriété très importante de Scaffold, puisque il affiche les principaux composants de l’écran.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            backgroundColor: Colors.blueGrey,
            appBar: AppBar(title: Text("AppBar")),
            body: Center(
                child: Text("Body",
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: 50.0,
                      fontStyle: FontStyle.italic,
                    )))));
  }
}

L’utilisation de child veut dire un seul widget enfant.

FloatingActionButton()

Le bouton d’action flottant est une icône circulaire qui s’affiche en permanence et on l’utilise généralement pour une action principale.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            backgroundColor: Colors.blueGrey,
            appBar: AppBar(title: Text("AppBar")),
            body: Center(child: Text("Body", style: TextStyle(color: Colors.black, fontSize: 50.0, fontStyle: FontStyle.italic))),
                                     
            floatingActionButton: FloatingActionButton(
                elevation: 10.0,
                child: Icon(Icons.add),
                onPressed: () {
                  print('Un bouton flottant');
                })));
  }
}

elevation – une propriété qui affiche l’ombre sur le bouton.
Icon – le widget qui représente l’icône deFloatingActionButton.
onPressed – une propriété qui renvoie quelque chose lorsque le bouton est appuyé.

Cliquez sur le bouton et regardez ce qui s’affiche dans la console.

Le widget de Scaffold Drawer

Drawer est un panneau latéral qui se positionne sur le côté de l’écran. En fait, nous pouvons afficher les éléments du menu dans le widget Drawer. Une icône appropriée pour Drawer est définie automatiquement dans AppBar.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey,
      appBar: AppBar(title: const Text('<--Drawer')),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              child: Text('Entete du Drawer'),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: const Text('Item 1'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text('Item 2'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

Pour un code plus propre, nous avons créé une autre classe Home.

L’utilisation de children veut dire qu’il prend une liste de widgets.

Nous obtenons un Drawer de base que nous pouvons ouvrir, et il contiendra deux éléments. Ensuite, nous ajoutons également un élément d’en-tête en haut.

On peut aussi cliquer sur la partie droite du menu pour fermer le menu. Cependant, nous pouvons également le fermer en cliquant sur un élément du menu.

Nous pouvons le faire en utilisant l’événement onTap dans listTile. Cliquez sur item1 et item2.

Bottom Navigation Bar

C’est une bande horizontale en bas de l’écran. Elle peut contenir plusieurs éléments et utiliser du texte, des icônes ou une combinaison des deux.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey,
      appBar: AppBar(title: const Text('<--Drawer')),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              child: Text('Entete du Drawer'),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: const Text('Item 1'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text('Item 2'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: 0,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            label: 'Messages',
            icon: Icon(Icons.mail),
          ),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile')
        ],
      ),
    );
  }
}

FloatingActionButtonLocation

Par défaut, floatingActionButton est positionné dans le coin inférieur droit. Il contient de nombreuses constantes prédéfinies, telles que centerDocked, centerFloat, endDocked, endFloat, etc.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey,
      appBar: AppBar(title: const Text('<--Drawer')),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              child: Text('Entete du Drawer'),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: const Text('Item 1'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text('Item 2'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: 0,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            label: 'Messages',
            icon: Icon(Icons.mail),
          ),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile')
        ],
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          // L'action du bouton
        },
        label: const Text('Envoyer'),
        icon: const Icon(Icons.thumb_up),
        backgroundColor: Colors.blue,
      ),
    );
  }
}

L’utilisation de ces propriétés va vous permettre de vous familiariser avec les différents composants du widget Scaffold, ce qui vous facilitera la création d’une application Flutter.