[Flutter][81] Custom Bottom Navigation Bar (Part 1)

Monday, 30 Aug 2021 | By Riza

Hello World, 

Berikut ini adalah percobaan membuat bottom navigation bar yang kadang banyak kita temukan di timeline instagram yang biasanya desainnya dibuat oleh para desainer ui/ux di luar sana. Saya tertarik untuk mencoba menerapkannya pada flutter dan jadilah desain berikut.


Code lengkapnya kira-kira berikut ini.


import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
var _selectedBottomNav = 0;

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(title: Text("Bottom Nav")),
body: Center(
child: Text("Hello"),
),
bottomNavigationBar: CustomBottomNav(
items: items,
index: _selectedBottomNav,
onItemSelected: (index) {
print(index);
setState(() {
_selectedBottomNav = index;
});
},
),
);
}

List items = [
NavigationItem(Icons.home, "Dashboard"),
NavigationItem(Icons.list, "Menu"),
NavigationItem(Icons.calendar_today, "Calendar"),
NavigationItem(Icons.alarm, "Notifikasi"),
];
}

class NavigationItem {
final IconData icon;
final String title;

NavigationItem(this.icon, this.title);
}

// ignore: must_be_immutable
class CustomBottomNav extends StatelessWidget {
int index;
List items;
ValueChanged<int> onItemSelected;

CustomBottomNav({this.items, this.onItemSelected, this.index});

@override
Widget build(BuildContext context) {
return Container(
height: 80,
padding: EdgeInsets.fromLTRB(5, 10, 5, 10),
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: items.map((item) {
var itemIndex = items.indexOf(item);
return GestureDetector(
onTap: () => onItemSelected(itemIndex),
child: AnimatedContainer(
duration: Duration(milliseconds: 300),
height: 45.0,
padding: EdgeInsets.fromLTRB(18, 10, 15, 10),
decoration: BoxDecoration(
color: index == itemIndex
? Colors.blue
: Colors.white,
borderRadius: BorderRadius.circular(30.0)),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
item.icon,
size: 20,
color: index == itemIndex ? Colors.white : Colors.grey,
),
index == itemIndex
? Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Text(
item.title,
style: TextStyle(color: Colors.white),
),
)
: SizedBox()
],
),
),
);
}).toList(),
),
);
}
}


Selamat mencoba :)