pada contoh ini ada 4 file yg dibuat: main, homepage, settingpage, contactpage
1. main.dart
import 'package:bottombar/contactPage.dart';
import 'package:bottombar/homePage.dart';
import 'package:bottombar/settingPage.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyBottomBar(),
);
}
}
class MyBottomBar extends StatefulWidget {
@override
_MyBottomBarState createState() => _MyBottomBarState();
}
class _MyBottomBarState extends State<MyBottomBar> {
int _currentIndex = 0;
final List<Widget> _children = [
HomePage(),
SettingPage(),
ContactPage(),
];
void onTappedBar(int index) {
setState(() {
_currentIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: _children[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
onTap: onTappedBar,
currentIndex: _currentIndex,
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: new Icon(Icons.settings),
title: Text('Setting'),
),
BottomNavigationBarItem(
icon: new Icon(Icons.contacts),
title: Text('Contact'),
),
],
),
);
}
}
2. homePage.dart
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Center(
child: Text('Home Page'),
),
);
}
}
3. settingPage.dart
import 'package:flutter/material.dart';
class SettingPage extends StatefulWidget {
@override
_SettingPageState createState() => _SettingPageState();
}
class _SettingPageState extends State<SettingPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Setting'),
),
body: Center(
child: Text('Setting Page'),
),
);
}
}
4. contactPage.dart
import 'package:flutter/material.dart';
class ContactPage extends StatefulWidget {
@override
_ContactPageState createState() => _ContactPageState();
}
class _ContactPageState extends State<ContactPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Contact'),
),
body: Center(
child: Text('Contact Page'),
),
);
}
}
