Des onglets avec une barre de navigation

Fait partie de la section Listes et écrans du Journey Flutter de Coddy. Leçon 23 sur 33.

De nombreuses applications regroupent leurs pages principales dans des onglets en bas de l’écran. NavigationBar les affiche ; vous le transmettez à bottomNavigationBar: du Scaffold.

NavigationBar(
  selectedIndex: index,
  onDestinationSelected: (int i) {
    setState(() {
      index = i;
    });
  },
  destinations: const [
    NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
    NavigationDestination(icon: Icon(Icons.settings), label: 'Settings'),
  ],
)

Chaque NavigationDestination correspond à un onglet, avec une icône et un libellé. selectedIndex indique quel onglet est mis en évidence, en comptant à partir de 0. Lorsqu’on appuie sur un onglet, onDestinationSelected reçoit son index.

La barre ne mémorise pas elle-même l’onglet : vous conservez index dans votre état et le modifiez avec setState. Le corps affiche la page correspondant à cet index, ici pages[index] dans une liste de widgets.

Défi

Facile

La barre comporte trois onglets, mais appuyer dessus ne fait rien. Ajoute onDestinationSelected: pour qu’un onglet sélectionné soit mis en surbrillance et que sa page s’affiche : Favorites page pour Favorites, Settings page pour Settings.

Essayez vous-même

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int index = 0;
  final List<Widget> pages = const [
    Center(child: Text('Home page')),
    Center(child: Text('Favorites page')),
    Center(child: Text('Settings page')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My App')),
      body: pages[index],
      bottomNavigationBar: NavigationBar(
        selectedIndex: index,
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.favorite), label: 'Favorites'),
          NavigationDestination(icon: Icon(Icons.settings), label: 'Settings'),
        ],
      ),
    );
  }
}