Tab dengan Bilah Navigasi

Termasuk bagian List dan Layar dalam perjalanan Flutter di Coddy. Pelajaran 23 dari 33.

Banyak aplikasi menampilkan halaman utamanya dalam tab di bagian bawah layar. NavigationBar menggambarnya; kamu memasangnya pada bottomNavigationBar: milik 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'),
  ],
)

Setiap NavigationDestination adalah satu tab, dengan ikon dan label. selectedIndex menentukan tab yang disorot, dihitung mulai dari 0. Saat sebuah tab diketuk, onDestinationSelected menerima indeksnya.

Bar tidak mengingat tab dengan sendirinya: kamu menyimpan index dalam state dan mengubahnya dengan setState. Body menampilkan halaman untuk indeks tersebut, di sini pages[index] dari list widget.

Tantangan

Mudah

Bar ini memiliki tiga tab, tetapi mengetuknya tidak melakukan apa pun. Tambahkan onDestinationSelected: agar tab yang diketuk disorot dan halamannya ditampilkan: Favorites page untuk Favorites, Settings page untuk Settings.

Coba sendiri

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