Comment utiliser le widget TabBar de Flutter

• 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 .

1. 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),
          ]),
        )
     )
          );

  }
}

2. 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),
          ]),
        )
     )
          );

  }
}

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')),
  ],
),