Flutter

Comment utiliser le widget TabBar de Flutter

Un cours complet pour maîtriser Comment utiliser le widget TabBar de Flutter.

0 chapitres 0 QCM Accès gratuit

Objectifs
- L'objectif de ce cours est de vous guider à travers l'utilisation du widget TabBar dans Flutter. Nous allons couvrir les aspects suivants :
- Introduction à TabBar: Comprendre ce qu'est le widget TabBar et son rôle dans la création d'une interface à onglets.
- Création d'une Page à Onglets: Mettre en place une structure de base pour une page à onglets utilisant DefaultTabController et TabBar.
- Personnalisation des Onglets: Apprendre à personnaliser l'apparence des onglets en ajoutant des icônes, des étiquettes, etc.
- Gestion du Contenu des Onglets: Utiliser TabBarView pour gérer le contenu affiché lorsque chaque onglet est sélectionné.
- Cas Pratiques: Explorer des cas pratiques et des exemples concrets pour renforcer la compréhension.
Introduction à TabBar dans Flutter
- Le widget AppBar peut avoir un paramètre de constructeur supplémentaire appelé bottom et c'est là que nous fournissons un widget TabBar comme paramètre d'entrée.
- Le widget TabBar est un composant de l'interface utilisateur dans Flutter qui permet de créer une disposition à onglets. Il est souvent utilisé pour organiser le contenu d'une application en plusieurs sections, chaque section étant accessible via un onglet.
- Le widget TabBar est souvent utilisé en conjonction avec TabBarView et DefaultTabController pour gérer la navigation entre les onglets.
- Le widget TabBar permet de créer des onglets dans une interface Flutter. Il est utilisé pour organiser le contenu en sections, améliorant ainsi la navigation au sein de l'application.
- Le widget TabBar prend un widget enfant appelé tabs, qui peut prendre le tableau de widgets, chacun d'eux deviendra un onglet dans le TabBar.
- Ce code créera un TabBar dans le AppBar. Cependant, avant de pouvoir afficher nos onglets, nous devons ajouter du code supplémentaire. Nous avons besoin d'un TabController pour notre TabBar
- Un TabController est requis pour gérer divers aspects d'un onglet, y compris, mais sans s'y limiter, la délégation du contrôle à un widget lorsqu'un onglet est sélectionné.
- Il existe deux façons de créer un onglet TabController. Nous pouvons soit utiliser le controller: paramètre du TabBarwidget, soit utiliser DefaultTabController celui qui contient presque toutes les fonctionnalités requises pour utiliser un onglet.
Configuration de TabBar dans Flutter
- Pour implémenter TabBar dans votre application Flutter, procédez comme suit :
  - Implimentez le Scaffoldwidget à l’intérieur du fichier DefaultTabController. Cela devrait être utilisé pour la plupart des cas d’utilisation simples. Si vous souhaitez contrôler les onglets par programme, vous devez utiliser TabController et éviter cette étape
  - Placez le TabBarwidget comme propriété inférieure de AppBar
  - Fournir TabBarView dans le corps du AppBar. TabBarView est comme PageView, qui est principalement utilisé avec TabBar car il affiche le widget en fonction de l'onglet actuellement sélectionné.
  - Le widget TabBarwidget est utilisé pour créer une rangée horizontale d'onglets qui peut être utilisée en combinaison avec un TabBarView pour implémenter une interface à onglets.
  - Voici une brève explication des paramètres clés :
    - tabs(obligatoire) : une liste de widgets représentant les onglets individuels.
    - controller: Un facultatif TabController qui contrôle la sélection actuelle parmi les tabs. S’il n’est pas fourni, l'ancêtre DefaultTabController doit être présent.
    - isScrollable: Indique si la barre d'onglets peut défiler. S'il est défini sur true, les onglets défileront horizontalement s'il y en a trop pour tenir dans l'espace disponible.
    - indicatorColor: La couleur de la ligne qui apparaît sous l'onglet sélectionné.
    - indicatorWeight: L'épaisseur de la ligne sous l'onglet sélectionné.
    - indicatorPadding: Rembourrage ajouté à l'indicateur.
    - indicator: Une décoration à utiliser pour la ligne qui apparaît sous l'onglet sélectionné.
    - indicatorSize: Contrôle la taille du indicator. Il peut être défini sur TabBarIndicatorSize.tab(par défaut) ou TabBarIndicatorSize.label.
    - labelColor: La couleur du texte sur l'onglet sélectionné.
    - labelStyle: Le style du texte sur l'onglet sélectionné.
    - labelPadding: Remplissage ajouté à l'étiquette.
    - unselectedLabelColor: La couleur du texte sur les onglets non sélectionnés.
    - unselectedLabelStyle: Le style du texte sur les onglets non sélectionnés.
    - onTap : Un rappel appelé lorsqu'un onglet est enfoncé.
    - Vous pouvez utiliser ces paramètres pour personnaliser l'apparence et le comportement de votre TabBarwidget. Par exemple, vous pouvez définir les couleurs, les styles et le remplissage des étiquettes, personnaliser l'indicateur et contrôler si les onglets peuvent défiler ou non.
    La seule contrainte avec DefaultTabController est que nous devons envelopper le widget Scaffold complet à l'intérieur car il ne fonctionnera pas comme paramètre du widget TabBar .

Personnalisation des Onglets

Pour personnaliser davantage les onglets d'un TabBar dans Flutter, vous pouvez utiliser le widget Tab et fournir votre propre widget comme contenu de chaque onglet. Cela vous donne un contrôle total sur le style et le contenu de chaque onglet.

Le style de coin arrondi avec dégradé

Le style de coin arrondi peut être réalisé en ajoutant BoxDecoration avec borderRadius 50.

Code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.white,
            foregroundColor: Colors.blue,
             title: const Text('Gestion d\'applications'),
            elevation: 0,
            bottom: TabBar(
                unselectedLabelColor: Colors.blueAccent,
                indicatorSize: TabBarIndicatorSize.tab,
                indicator: BoxDecoration(
                    gradient: const LinearGradient(
                        colors: [Colors.blueAccent, Colors.orangeAccent]),
                    borderRadius: BorderRadius.circular(50),
                    color: Colors.blueAccent),
                tabs: const [
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("APPS"),
                    ),
                  ),
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("FILMS"),
                    ),
                  ),
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("JEUX"),
                    ),
                  ),
                ]),
          ),
          body: const TabBarView(children: [
            Icon(Icons.apps),
            Icon(Icons.movie),
            Icon(Icons.games),
          ]),
        )
     )
          );

  }
}

Style d'onglet personnalisé avec coins carrés" ou "onglets carrés"

Le style carré peut être réalisé en changeant le petit code du précédent. BorderRadius de la boxDecoration peut être modifié en ajoutant 10 pour leftTop et rightTop. Ensuite, je change la couleur d'arrière-plan de la barre d'application en rouge pour la rendre meilleure.

Code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.blueAccent,
            foregroundColor: Colors.white,
             title: const Text('Gestion d\'applications'),
            elevation: 0,
            bottom: const TabBar(
                labelColor: Colors.blueAccent,
                unselectedLabelColor: Colors.white,
                indicatorSize: TabBarIndicatorSize.label,
                indicator: BoxDecoration(
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(10),
                        topRight: Radius.circular(10)),
                    color: Colors.white),
                tabs: [
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("APPS"),
                    ),
                  ),
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("MOVIES"),
                    ),
                  ),
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("GAMES"),
                    ),
                  ),
                ]
            ),
          ),
          body: TabBarView(children: [
            Icon(Icons.apps),
            Icon(Icons.movie),
            Icon(Icons.games),
          ]),
        )
     )
          );

  }
}

Gestion du Contenu des Onglets

Utilisons TabBarView pour définir le contenu de chaque onglet.

TabBarView(
  children: [
    Center(child: Text('Contenu de l\'onglet 1')),
    Center(child: Text('Contenu de l\'onglet 2')),
    Center(child: Text('Contenu de l\'onglet 3')),
  ],
),

Cas Pratiques
- Explorez des cas pratiques tels que la navigation entre les onglets, la personnalisation avancée, etc.
- Cela devrait vous donner une base solide pour comprendre et utiliser le widget TabBar dans Flutter. N'hésitez pas à poser des questions spécifiques ou à demander des clarifications sur des points particuliers !
- 1- Ecrivez le code qui permet de réaliser l'écran suivant:
- 2- Ecrivez le code qui permet de réaliser l'écran suivant:
- 3- Ecrivez le code qui permet de réaliser l'écran suivant:

Comment utiliser le widget TabBar de Flutter

Sommaire du cours

Autres catégories

Objectifs

Introduction à TabBar dans Flutter

Configuration de TabBar dans Flutter

Personnalisation des Onglets

Le style de coin arrondi avec dégradé

Style d'onglet personnalisé avec coins carrés" ou "onglets carrés"

Gestion du Contenu des Onglets

Cas Pratiques

Cours Flutter