Pada kali ini kita akan membuat sebuah widget yaitu Bottomnavigationbar. BotomNavigationBar adalah sebuah button atau navigasi yang terletak di bagian bawah atau bottom. Bottom ini berfungsi untuk berpindah halaman dan mempunyai sebuah design yang unik dan indah

Cara membuat sebuah bottomnavigationbar

• Langkah pertama buatlah sebuah project baru
• Buatlah sebuah state untuk berpindah halaman berikutnya

int _selectedIndex = 0;

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

static const List<Widget> selectbody = <Widget>[
  Text('Home'),
  SecondPage(),
  Text('Storage'),
  Text('Shopping'),
];

• Buatlah sebuah Bottomnavigationbar pada body

bottomNavigationBar: BottomNavigationBar(
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
  selectedItemColor: Colors.blue,
  unselectedItemColor: Colors.black,
  showUnselectedLabels: true,
  items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.home),
      label: "Home",
    ),
    BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.search),
      label: "Search",
    ),
    BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.doc_append),
      label: "Storage",
    ),
    BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.cart),
      label: "Cart",
    ),
  ],
),

• Pada bagian selectBody terdapat sebuah class Secondpage maka kita membuat sebuah file baru untuk membuat sebuah UI nya

import 'package:flutter/material.dart';

class SecondPage extends StatefulWidget {
  const SecondPage({Key? key}) : super(key: key);

  @override
  State<SecondPage> createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text("Udacoding")),
    );
  }
}

• Codingan semuanya

import 'package:bottomnavigationbar/home/second_pages.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  int _selectedIndex = 0;

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

  static const List<Widget> selectbody = <Widget>[
    Text('Home'),
    SecondPage(),
    Text('Storage'),
    Text('Shopping'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Magang Bacth 9 Udacoding"),
      ),
      body: Center(
        child: selectbody.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        selectedItemColor: Colors.blue,
        unselectedItemColor: Colors.black,
        showUnselectedLabels: true,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.home),
            label: "Home",
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.search),
            label: "Search",
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.doc_append),
            label: "Storage",
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.cart),
            label: "Cart",
          ),
        ],
      ),
    );
  }
}