Flutter - le tutoriel le plus détaillé (NavigationBar)

Introduction à la barre de navigation

Composant de la barre de navigation du matériel 3. La barre de navigation fournit un moyen persistant et pratique de basculer entre les principales destinations de votre application.

scènes à utiliser :

Module de la barre de menu inférieure

Les attributs	effet
onDestinationSelected	sélectionnez l'écouteur de rappel d'index
index sélectionné	Index de la destination actuellement sélectionnée
destinations	bouton de menu de magasin
Couleur de l'arrière plan	Couleur de fond de la barre de navigation
élévation	Altitude
hauteur	hauteur de la barre de navigation
étiquetteComportement	Afficher ou non le texte en bas de la barre de menus
shadowColor	couleur de l'ombre
animationDurée	Durée d'affichage de l'animation de la capsule
indicateurForme	Sélectionnez l'arrière-plan du menu, les coins arrondis ou le style de bordure
indicateurCouleur	Couleur d'arrière-plan du menu sélectionné

alwaysShow : l'icône et le texte sont affichés en même temps ;

alwaysHide : le texte est masqué en même temps ;

onlyShowSelected : Le texte de menu sélectionné de l'index actuel est affiché en même temps ;

backgroundColor : La couleur de fond de la barre de navigation est verte

indicatorShape : style d'arrière-plan du bouton

Bloc de code : exécutez et visualisez par vous-même

import 'package:flutter/material.dart';

class NavigationBars extends StatefulWidget {
  const NavigationBars({super.key});

  @override
  State<NavigationBars> createState() => _NavigationBarsState();
}

class _NavigationBarsState extends State<NavigationBars> {

  int currentPageIndex = 0;
  NavigationDestinationLabelBehavior labelBehavior =
      NavigationDestinationLabelBehavior.alwaysShow;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: NavigationBar(
        labelBehavior: labelBehavior,
        selectedIndex: currentPageIndex,
        backgroundColor: Colors.green,
        indicatorColor: Colors.red,
        indicatorShape:  RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
          side: BorderSide(color: Colors.yellow, width: 2.0),
        ),
        surfaceTintColor: Colors.yellow,
        // animationDuration: Duration(milliseconds: 2000),
        // shadowColor: Colors.black,
        height: 70,
        elevation: 1,
        onDestinationSelected: (int index) {
          setState(() {
            currentPageIndex = index;
          });
        },
        destinations: const <Widget>[
          NavigationDestination(
            tooltip: "",
            icon: Icon(Icons.explore),
            label: 'Explore',
          ),
          NavigationDestination(
            icon: Icon(Icons.commute),
            label: 'Commute',
          ),
          NavigationDestination(
            selectedIcon: Icon(Icons.bookmark),
            icon: Icon(Icons.bookmark_border),
            label: 'Saved',
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Label behavior: ${labelBehavior.name}'),
            const SizedBox(height: 10),
            OverflowBar(
              spacing: 10.0,
              children: <Widget>[
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      labelBehavior =
                          NavigationDestinationLabelBehavior.alwaysShow;
                    });
                  },
                  child: const Text('alwaysShow'),
                ),
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      labelBehavior =
                          NavigationDestinationLabelBehavior.onlyShowSelected;
                    });
                  },
                  child: const Text('onlyShowSelected'),
                ),
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      labelBehavior =
                          NavigationDestinationLabelBehavior.alwaysHide;
                    });
                  },
                  child: const Text('alwaysHide'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}