When adding Items to the Bottom Navigation bar please remember following things.
icon and title properties are required and you must set relevant widgets to those.
YOu can add this BottomNavigationBar with Diffrent Design code :
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentNav,
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home,color: Colors.indigo,),
title: Text("Home"),
),
BottomNavigationBarItem(
icon: Icon(Icons.category,color: Colors.indigo),
title: Text("Shop"),
),
BottomNavigationBarItem(
icon: Icon(Icons.message,color: Colors.indigo),
title: Text("Shop"),
),
BottomNavigationBarItem(
icon: Icon(Icons.more_vert,color: Colors.indigo),
title: Text("Shop"),
)
],
onTap: (index){
setState(() {
_currentNav = index;
});
},
),
import 'package:flutter/material.dart';
import 'package:bottom_navy_bar/bottom_navy_bar.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'App Design',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _currentNav = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text('BottomNavigation Bar Design'),
backgroundColor: Colors.indigo,
),
body: Center(
child: Text('Hello World'),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentNav,
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home,color: Colors.indigo,),
title: Text("Home"),
),
BottomNavigationBarItem(
icon: Icon(Icons.category,color: Colors.indigo),
title: Text("Shop"),
),
BottomNavigationBarItem(
icon: Icon(Icons.message,color: Colors.indigo),
title: Text("Shop"),
),
BottomNavigationBarItem(
icon: Icon(Icons.more_vert,color: Colors.indigo),
title: Text("Shop"),
)
],
onTap: (index){
setState(() {
_currentNav = index;
});
},
),
);
}
}