[Flutter] a simple Bottom Navigation (Material, Cupertino)

import 'package:flutter/material.dart';


void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MainNavigationScreen(),
    );
  }
}

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

  @override
  State<MainNavigationScreen> createState() => _MainNavigationScreenState();
}

class _MainNavigationScreenState extends State<MainNavigationScreen> {
  int _selectedIndex = 0;

  final screens = [
    const Center(
      child: Text('Home'),
    ),
    const Center(
      child: Text('Search'),
    )
  ];

  void _onTap(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: screens[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: _onTap,
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "Home",
            tooltip: "What are you?",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: "Search",
            tooltip: "What are you?",
          ),
        ],
      ),
    );
  }
}

Material 3 design

bottomNavigationBar: NavigationBar(
  // NavigationBar is Material 3 design
  selectedIndex: _selectedIndex,
  onDestinationSelected: _onTap,
  destinations: [
    NavigationDestination(
      icon: Icon(Icons.home),
      label: "Home",
    ),
    NavigationDestination(
      icon: Icon(Icons.search),
      label: "Search",
    ),
  ],
),

Material 3 design을 한다면, BottomNavigationBar 대신 NavigationBar를 사용한다.

머티리얼 디자인 3(Material Design 3)

Cupertino design

bottomNavigationBar: CupertinoTabScaffold(
  tabBar: CupertinoTabBar(
    items: const [
      BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.house),
        label: "Home",
      ),
      BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.search),
        label: "Search",
      ),
    ],
  ),
  tabBuilder: (context, index) => screens[index],
),

https://dartpad.dev/?id=9cf3dba7ee99cd3ac8c104a3a69717f1