Code:
import 'package:flutter/material.dart';
import 'pages/ariplay_screen.dart';
import 'pages/email_screen.dart';
import 'pages/home_screen.dart';
import 'pages/scanner_screen.dart';
class BottomNavigationWidget extends StatefulWidget {
_BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
}
class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
final _bottomNavColor = Colors.blue;
int _currentIndex = 0;
List<Widget> list = List();
@override
void initState(){
list
..add(HomeScreen())
..add(ScannerScreen())
..add(EmailScreen())
..add(AirplayScreen());
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: list[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
color: _bottomNavColor,
),
title: Text(
'home',
style: TextStyle(color: _bottomNavColor),
)
),
BottomNavigationBarItem(
icon: Icon(
Icons.email,
color: _bottomNavColor,
),
title: Text(
'Email',
style: TextStyle(color: _bottomNavColor),
)
),
BottomNavigationBarItem(
icon: Icon(
Icons.airplay,
color: _bottomNavColor,
),
title: Text(
'Airplay',
style: TextStyle(color: _bottomNavColor),
)
),
BottomNavigationBarItem(
icon: Icon(
Icons.scanner,
color: _bottomNavColor,
),
title: Text(
'Scnner',
style: TextStyle(color: _bottomNavColor),
)
)
],
currentIndex: _currentIndex,
onTap: (int index){
setState(() {
_currentIndex = index;
});
},
),
);
}
}
Each fake page code
import 'package:flutter/material.dart';
class AirplayScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Airplay'),),
body: Center(
child: Text('Airplay'),
),
);
}
}
to sum up:
Bottom navigation bar of 2
Click on the navigation bar transforms layout
Ontap:(int index){
setState(){
_xxxx = index;/
}
}
// switch state highlighted
currentIndex : _xxxx