Card image cap
[Flutter][30] Bottom Navigation Bar
Wednesday, 12 Jun 2019

Hello world,

BottomNavigationBar adalah Widget material yang ditampilkan di bagian bawah aplikasi untuk memilih di antara sejumlah tampilan, biasanya antara tiga dan lima. Bilah navigasi bawah terdiri dari beberapa item dalam bentuk label teks, ikon, atau keduanya. BottomNavigationBar menyediakan navigasi cepat dan mudah yang sudah banyak digunakan pada aplikasi-aplikasi jaman sekarang. Untuk layar yang lebih besar, navigasi samping mungkin lebih cocok.

Di bawah ini saya buat contoh sederhana dimana kita akan membuat halaman utama, kemudian kita akan membuat 3 halaman yang bisa dibuka melalui bottom navigation bar.

halaman utama.

import 'package:flutter/material.dart';
import './halamansatu.dart';
import './halamandua.dart';
import './halamantiga.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new Halamannav(),
));
}

class Halamannav extends StatefulWidget {
@override
_HalamannavState createState() => _HalamannavState();
}

class _HalamannavState extends State {
int _selectedIndex = 0;

final _widgetOptions = [
Halamansatu(),
Halamandua(),
Halamantiga(),
];

@override
Widget build(BuildContext context) {
return Scaffold(
body: _widgetOptions.elementAt(_selectedIndex),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.pin_drop),
title: Text('Satu'),
),
BottomNavigationBarItem(
icon: Icon(Icons.view_compact),
title: Text('Dua'),
),
BottomNavigationBarItem(
icon: Icon(Icons.library_books),
title: Text('Tiga'),
),
],
type: BottomNavigationBarType.fixed,
currentIndex: _selectedIndex,
fixedColor: Colors.blueAccent,
onTap: _onItemTapped,
),
);
}

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

Pada halaman utama kita memanggil 3 halaman (warna kuning) yaitu halamansatu, halamandua dan halamantiga. Kemudian pada BottomNavigationBar kita buat 3 tombol BottomNavigationBarItem yang berisi icon dan text. CurrentIndex (warna hijau) digunakan untuk menunjukkan halaman yang mana yang akan terbuka pertama kali saat halamanutama dibuka. 

Selanjutnya ada onTab (warna ungu) berisi fungsi untuk mengubah _selectedIndex (halaman terpilih) setiap kali navigasi diklik. Kemudian kita bisa membuat 3 halaman tersebut seperti contoh di bawah.

Halamansatu

import 'package:flutter/material.dart';

void main(){
runApp(
new MaterialApp(
title: "Halaman satu",
home: new Halamansatu(),
)
);
}


class Halamansatu extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("Halaman satu"),
),
body: new Container(
padding: EdgeInsets.all(20.0),
child: new Center(
child: new Text("Halaman satu"),
)
)
);
}
}

Untuk halamandua dan halamantiga bisa dibuat seperti halamansatu hanya tinggal dibedakan saja di text atau titlenya.

Selamat mencoba :)