Membuat Bottom Navigation Bar di Flutter

Share:
Membuat Bottom Navigation Bar di Flutter

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan membuat fitur bottom navigation pada flutter. Ayo ikuti pembahasannya di bawah ini.

Untuk membuat bottom navigation bar di flutter cukup mudah. Kali ini saya juga akan menjelaskan bagaimana cara membuat indicator bar, jadi nantinya menu yang diklik akan memiliki warna yang berbeda. Selain itu kita juga akan belajar cara menampilkan content yang berbeda setiap klik menu yang berbeda pula.

Ok, sebelum kita masuk tutorial, saya sudah memiliki beberapa tutorial flutter seru yang kalian bisa pelajari secara mendiri atau bisa dijadikan cheatsheet. Berikut beberap link tutorialnnya.

Baca Artikel Lain ✨
📰 1. Cara Paling Mudah Membuat Login Google di Flutter read more
📰 2. CRUD Flutter + PHP + MySQL Part 2, Membuat Mobile App read more
📰 3. Membuat Aplikasi CRUD dengan Flutter dan SQFlite read more


Membuat Bottom Navigation Bar di Flutter

1. Buatlah sebuah project flutter baru dengan nama bebas. Pada tutorial ini saya sudah menggunakan flutter versi null safety.

2. Buka main.dart lalu ikuti scriptnya seperti di bawah ini. Untuk penjelasan sudah saya sertakan di dalamnya.

    

    import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Bottom Navigation', home: Home(), ); } } class Home extends StatefulWidget { const Home({Key? key}) : super(key: key); @override State<Home> createState() => _HomeState(); } class _HomeState extends State<Home> { //inisialisasi variabel int _currentIndex = 0; String _currentMenu = 'Home'; //metod ini akan dijalankna saat diklik void _changeSelectedNavBar(int index) { setState(() { _currentIndex = index; if (index == 0) { _currentMenu = 'Home'; }else if(index == 1){ _currentMenu = 'Order'; }else if(index == 2){ _currentMenu = 'Inbox'; }else if(index == 3){ _currentMenu = 'Account'; } }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Bottom Navigation"), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( "Menu yang Aktif", style: TextStyle(fontSize: 20), ), SizedBox(height: 5,), Text( "Index: "+_currentIndex.toString(), style: TextStyle(fontSize: 20), ), SizedBox(height: 5,), Text( "Menu: "+_currentMenu, style: TextStyle(fontSize: 20), ), ], ), ), //membuat bottom navigation bottomNavigationBar: BottomNavigationBar( //membuat item navigasi items: [ BottomNavigationBarItem( icon: Icon(Icons.home), label: 'Home' ), BottomNavigationBarItem( icon: Icon(Icons.assignment), label: 'Order' ), BottomNavigationBarItem( icon: Icon(Icons.mail), label: 'Inbox' ), BottomNavigationBarItem( icon: Icon(Icons.person), label: 'Account' ), ], //currentindex mengikuti baris item bottom navigasi yang diklik currentIndex: _currentIndex, //warna saat item diklik selectedItemColor: Colors.blue, //metode yang dijalankan saat ditap onTap: _changeSelectedNavBar, //agar bottom navigation tidak bergerak saat diklik type: BottomNavigationBarType.fixed, ), ); } }

3. Buka emulator dan jalankan projectnya. Jika berhasil maka tampilannya tampak seperti gambar di bawah ini.

Membuat Bottom Navigation Flutter
Hasil Akhir



Ok, sekian tutorial flutter kali ini tentang cara membuat bottom navigation bar di flutter. Semoga bermanfaat. Jika ada kesulitan atau kebingungan silahkan tanya langsung di kolom komentar atau tanya langsung di fanspage sahretech.

No comments

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik