Tabs mit einer Navigationsleiste

Teil des Abschnitts Listen und Bildschirme der Flutter-Journey von Coddy. Lektion 23 von 33.

Viele Apps zeigen ihre Hauptseiten in Tabs am unteren Bildschirmrand. NavigationBar zeichnet sie; du übergibst sie an das bottomNavigationBar: des 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'),
  ],
)

Jedes NavigationDestination ist ein Tab mit einem Symbol und einer Beschriftung. selectedIndex gibt an, welcher Tab hervorgehoben ist, beginnend bei 0. Wenn ein Tab angetippt wird, erhält onDestinationSelected seinen Index.

Die Leiste merkt sich den Tab nicht selbst: Du speicherst index in deinem Zustand und änderst ihn mit setState. Der Body zeigt die Seite für diesen Index, hier pages[index] aus einer Liste von Widgets.

Aufgabe

Einfach

Die Leiste hat drei Registerkarten, aber beim Antippen passiert nichts. Füge onDestinationSelected: hinzu, damit die angetippte Registerkarte hervorgehoben wird und ihre Seite angezeigt wird: Favorites page für Favorites, Settings page für Settings.

Probier es selbst

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