Comment utiliser le widget AppBar dans Flutter

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AppMaking.co"),
      ),
    );
  }

• Pour afficher un titre à l’intérieur de AppBar(), vous devez passer un widget Text() dans le paramètre title.

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AppMaking.co"),
        centerTitle: true,
      ),
    );
  }

• Pour afficher un titre en position centrale, vous devez transmettre une valeur booléenne pour centerTitle

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AppMaking.co"),
        centerTitle: true,
        backgroundColor: Colors.green,
      ),
    );
  }

• Pour changer la couleur d’arrière-plan de votre Flutter AppBar, vous devez transmettre l’objet Colors en propriété backgroundColor. vous pouvez choisir toutes les couleurs que vous voulez.

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AppMaking.co"),
        centerTitle: true,
        backgroundColor: Colors.green,
        leading: Icon(Icons.menu),
        actions: [
          IconButton(onPressed: () => {}, icon: Icon(Icons.search)),
          IconButton(onPressed: () => {}, icon: Icon(Icons.more_vert)),
        ],
      ),
    );
  }

• Pour ajouter des boutons/icônes dans votre AppBar, nous avons deux méthodes.
• Si vous souhaitez passer l’icône avant le titre, vous devez passer Icon()dans une leadingpropriété.
• Si vous souhaitez transmettre l’icône après le titre, vous devrez peut-être l’ajouter sous action:[]

L’objectif de ce TP est de créer une application Flutter qui gère un compteur. L’utilisateur doit pouvoir augmenter ou diminuer la valeur du compteur en utilisant des boutons interactifs. L’application doit également comporter une barre d’application (AppBar) avec des icônes et des actions.

1. Mise en place de l’application :

• Créez un nouveau projet Flutter nommé CounterApp.
• Dans ce projet, vous allez créer une interface utilisateur avec un compteur central.

2. Créer une interface utilisateur simple :

• Utilisez MaterialApp comme point d’entrée de votre application et désactivez la bannière de débogage.
• Créez une page principale (MyHomePage) en utilisant un widget StatefulWidget pour gérer l’état du compteur.

3. Développer le compteur :

• Initialisez un compteur avec une valeur par défaut de 0.
• Ajoutez deux boutons, « Incrémenter » et « Décrémenter« , pour augmenter et diminuer le compteur.
• Incrémenter : Le bouton « Incrémenter » doit ajouter 10 au compteur chaque fois qu’on clique dessus.
• Décrémenter : Le bouton « Décrémenter » doit soustraire 2 du compteur à chaque clic.
• Les deux boutons que vous allez ajouter sont des boutons de type ElevatedButton dans Flutter.
• Un ElevatedButton est un bouton qui s’affiche avec un relief, idéal pour les actions principales de l’interface utilisateur.
• Pour ajouter ces boutons, utilisez le widget ElevatedButton et passez une fonction onPressed qui va contenir la logique de modification du compteur :

Exemple d’implémentation :

// Bouton pour incrémenter
ElevatedButton(
  onPressed: _incrementCounter, // Fonction qui ajoute 10 au compteur
  child: const Text('Incrémenter'),
),

// Bouton pour décrémenter
ElevatedButton(
  onPressed: _decrementCounter, // Fonction qui soustrait 2 du compteur
  child: const Text('Décrémenter'),
),

• Le bouton Incrémenter appelle la fonction _incrementCounter, qui augmente la valeur du compteur de 10.
• Le bouton Décrémenter appelle la fonction _decrementCounter, qui diminue la valeur du compteur de 2.
• Affichez la valeur du compteur dans le centre de l’écran, dans un style de texte large.

4. Ajouter une AppBar avec des actions :

• Dans la partie supérieure de votre application, ajoutez une barre d’application (AppBar) avec un titre de votre choix.
• Sur cette AppBar, ajoutez une icône de menu à gauche.
• À droite, ajoutez trois icônes d’actions : paramètres, onglet, et recherche.
• Les boutons d’actions dans l’AppBar n’ont pas besoin de fonctionnalités supplémentaires pour ce TP.

• Les boutons « Incrémenter » et « Décrémenter » doivent être centrés horizontalement sous le compteur.
• Séparez les boutons par un espace approprié (20 pixels).
• Le compteur doit être centré verticalement dans l’application.

• Le code complet de l’application, avec les fonctionnalités demandées.
• Une capture d’écran de l’application en fonctionnement, montrant les différentes actions de compteur.

Assurez-vous de bien utiliser setState pour mettre à jour la valeur du compteur.
Testez votre application pour vérifier que le compteur se met bien à jour selon les actions sur les boutons.