Scaffold

Le widget Scaffold est un élément clé dans la création d'une interface utilisateur dans Flutter. Il fournit une structure de base pour une page, comprenant une barre d'applications, un tiroir (drawer) et un corps (body). Voici un exemple d'utilisation du widget Scaffold :

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Mon Application',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ma Page'),
      ),
      body: Center(
        child: Text('Contenu de ma page'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Action à effectuer lors du clic sur le bouton flottant
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

Les propriétés les plus utilisées du widget Scaffold

Voici une description des propriétés les plus utilisées du widget Scaffold :

• appBar : Le widget AppBar affiche une barre d'applications en haut de l'écran. Vous pouvez définir le titre de la barre d'applications à l'aide de la propriété title.

• body : Le widget body définit le contenu principal de la page. Vous pouvez y placer n'importe quel widget, tel qu'un Container, un ListView, etc.

• floatingActionButton : Le widget FloatingActionButton définit un bouton d'action flottant qui est généralement utilisé pour des actions contextuelles. Vous pouvez définir l'icône du bouton à l'aide de la propriété child et définir l'action à exécuter lors du clic sur le bouton à l'aide de la propriété onPressed.

• drawer : Le widget drawer définit un tiroir (drawer) qui peut être tiré depuis le côté de l'écran pour afficher des options de navigation ou d'autres fonctionnalités. Vous pouvez y placer n'importe quel widget, tel qu'un ListView, pour afficher des éléments de menu.

• bottomNavigationBar : Le widget bottomNavigationBar affiche une barre de navigation en bas de l'écran. Vous pouvez y placer des boutons de navigation, des onglets, etc.

• backgroundColor : La propriété backgroundColor définit la couleur de fond du Scaffold. Vous pouvez définir n'importe quelle couleur, par exemple Colors.blue pour un fond bleu.

• resizeToAvoidBottomInset : La propriété resizeToAvoidBottomInset contrôle le redimensionnement automatique du contenu lorsque le clavier logiciel apparaît. Si elle est définie sur true, le contenu est redimensionné pour éviter que le clavier ne cache les éléments situés en bas de l'écran.

• resizeToAvoidBottomPadding : La propriété resizeToAvoidBottomPadding est similaire à resizeToAvoidBottomInset, mais elle redimensionne le contenu pour éviter que le clavier ne cache les éléments situés en bas de l'écran en ajoutant du padding en bas du contenu.

• extendBody : La propriété extendBody contrôle si le corps de la page s'étend pour remplir l'espace disponible en dessous de la barre d'applications et au-dessus de la barre de navigation. Si elle est définie sur true, le corps s'étend pour remplir tout l'espace disponible.

Ces propriétés vous permettent de personnaliser facilement l'apparence et le comportement de votre interface utilisateur dans Flutter en utilisant le widget Scaffold.