Membuat Bottom Navigation Bar dengan Flutter

Selamat siang teman teman hari ini saya akan membagikan tutorial cara membuat Bottom Navigation Bar dengan menggunakan Flutter....

Contoh Bottom Navigation Bar yang akan kita buat seperti gambar di bawah:

Pertama tama kita sediakan 2 file dart dengan nama:

1. home.dart
2. bottom_navigation.dart

Adapun code untuk File home.dart sebagai berikut:

import 'package:bottom_navigation_bar/bottom_navigation.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const BottomNavigation(title: 'Bottom Navigation Bar'),
    );
  }
}

Selanjutnya untuk file bottom_navigation.dart masukkan code dibawah:

import 'package:flutter/material.dart';

class BottomNavigation extends StatefulWidget {
  const BottomNavigation({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<BottomNavigation> createState() => _BottomNavigationState();
}

class _BottomNavigationState extends State<BottomNavigation> {
  int currentPage = 0;
  String text = "Home Page";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Text(text),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setPage(4, "Add Items"),
        child: const Icon(
          Icons.add,
          color: Colors.white,
          size: 30,
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        color: Colors.blue,
        shape: const CircularNotchedRectangle(),
        child: Container(
          padding: const EdgeInsets.symmetric(vertical: 5),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              IconButton(
                  onPressed: () => setPage(0, "Home Page"),
                  icon: Icon(
                    Icons.home,
                    color: currentPage == 0 ? Colors.white : Colors.grey,
                    size: 30,
                  )),
              IconButton(
                  onPressed: () => setPage(1, "Search Page"),
                  icon: Icon(
                    Icons.search,
                    color: currentPage == 1 ? Colors.white : Colors.grey,
                    size: 30,
                  )),
              const SizedBox(),
              IconButton(
                  onPressed: () => setPage(2, "Notifications Page"),
                  icon: Icon(
                    Icons.notifications,
                    color: currentPage == 2 ? Colors.white : Colors.grey,
                    size: 30,
                  )),
              IconButton(
                  onPressed: () => setPage(3, "History Page"),
                  icon: Icon(
                    Icons.history,
                    color: currentPage == 3 ? Colors.white : Colors.grey,
                    size: 30,
                  )),
            ],
          ),
        ),
      ),
    );
  }

  void setPage(int index, String text) {
    setState(() {
      currentPage = index;
      this.text = text;
    });
  }
}

Jika cara diatas sudah dilakukan maka selanjutnya jalankan aplikasi, jika tampilan aplikasi sama dengan contoh diatas....SELAMAT anda sudah bisa membuat Bottom Navigation Bar dengan Flutter

Untuk lebih jelasnya silahkan lihat tutorial nya di video berikut
Link Youtube