Skip to content

Instantly share code, notes, and snippets.

@tanabe1478

tanabe1478/provider + BottomNavigation(custom widget wrapping BottomNavigationBar).dart

Last active April 29, 2020 17:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tanabe1478/53e232915313fa0da88a46256357ca7c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tanabe1478/53e232915313fa0da88a46256357ca7c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
provider + BottomNavigation(custom widget wrapping BottomNavigationBar).dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primaryColor: Colors.cyan,
backgroundColor: Colors.cyan[50],
bottomAppBarColor: Colors.cyan,
),
darkTheme: ThemeData.dark(),
home: ChangeNotifierProvider<BottomNavigationSelectedState>(
child: BottomNavigationBarPage(),
create: (BuildContext context) => BottomNavigationSelectedState(),
));
}
}
class BottomNavigationBarPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
var provider = Provider.of<BottomNavigationSelectedState>(context);
return Scaffold(
body: BottomNavigation.tabBody[provider.currentTab],
bottomNavigationBar: BottomNavigation(
currentTab: provider.currentTab,
onSelectTab: provider.selectTab,
),
);
}
}
class BottomNavigationSelectedState with ChangeNotifier {
TabItem _currentTab = TabItem.timer;
get currentTab => _currentTab;
void selectTab(TabItem tabItem) {
_currentTab = tabItem;
notifyListeners();
}
}
enum TabItem { timer, home, profile, setting }
class BottomNavigation extends StatelessWidget {
static List<TabItem> tabOrder = [
TabItem.timer,
TabItem.home,
TabItem.profile,
TabItem.setting,
];
static Map<TabItem, Widget> tabBody = {
TabItem.timer: TimerPage(),
TabItem.home: HomePage(),
TabItem.profile: ProfilePage(),
TabItem.setting: SettingPage(),
};
static Map<TabItem, String> tabName = {
TabItem.timer: 'timer',
TabItem.home: 'home',
TabItem.profile: 'profile',
TabItem.setting: 'setting',
};
static Map<TabItem, Icon> icons = {
TabItem.timer: Icon(Icons.timer),
TabItem.home: Icon(Icons.home),
TabItem.profile: Icon(Icons.near_me),
TabItem.setting: Icon(Icons.settings),
};
BottomNavigation({this.currentTab, this.onSelectTab});
final ValueChanged<TabItem> onSelectTab;
final TabItem currentTab;
@override
Widget build(BuildContext context) {
var provider = Provider.of<BottomNavigationSelectedState>(context);
return BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: tabOrder.indexOf(provider.currentTab),
items: [
_bottomNavigationBarItem(tabItem: TabItem.timer),
_bottomNavigationBarItem(tabItem: TabItem.home),
_bottomNavigationBarItem(tabItem: TabItem.profile),
_bottomNavigationBarItem(tabItem: TabItem.setting),
],
onTap: (index) => onSelectTab(
tabOrder[index],
),
);
}
BottomNavigationBarItem _bottomNavigationBarItem({TabItem tabItem}) {
String text = tabName[tabItem];
Icon icon = icons[tabItem];
return BottomNavigationBarItem(icon: icon, title: Text(text));
}
}
class TimerPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.cyan[50],
),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.pink[50],
child: ListView(
children: <Widget>[
_menuItem('menu1', Icon(Icons.palette)),
_menuItem('menu2', Icon(Icons.palette)),
_menuItem('menu3', Icon(Icons.palette)),
_menuItem('menu4', Icon(Icons.palette)),
_menuItem('menu5', Icon(Icons.palette)),
_menuItem('menu6', Icon(Icons.palette)),
_menuItem('menu7', Icon(Icons.palette)),
_menuItem('menu8', Icon(Icons.palette)),
_menuItem('menu9', Icon(Icons.palette)),
_menuItem('menu10', Icon(Icons.palette)),
_menuItem('menu11', Icon(Icons.palette)),
_menuItem('menu12', Icon(Icons.palette)),
_menuItem('menu13', Icon(Icons.palette)),
_menuItem('menu14', Icon(Icons.palette)),
_menuItem('menu15', Icon(Icons.palette)),
_menuItem('menu16', Icon(Icons.palette)),
_menuItem('menu17', Icon(Icons.palette)),
_menuItem('menu18', Icon(Icons.palette)),
_menuItem('menu19', Icon(Icons.palette)),
_menuItem('menu20', Icon(Icons.palette)),
_menuItem('menu21', Icon(Icons.palette)),
_menuItem('menu22', Icon(Icons.palette)),
_menuItem('menu23', Icon(Icons.palette)),
_menuItem('menu24', Icon(Icons.palette)),
_menuItem('menu25', Icon(Icons.palette)),
_menuItem('menu26', Icon(Icons.palette)),
],
)),
);
}
Widget _menuItem(String title, Icon icon) {
return GestureDetector(
child: Container(
padding: EdgeInsets.all(8.0),
decoration: new BoxDecoration(
border: new Border(
bottom: BorderSide(width: 1.0, color: Colors.grey))),
child: Row(
children: <Widget>[
Container(
margin: EdgeInsets.all(10.0),
child: icon,
),
Text(
title,
style: TextStyle(color: Colors.black, fontSize: 18.0),
),
],
)),
onTap: () {
print("onTap called.");
},
);
}
}
class ProfilePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.black,
),
);
}
}
class SettingPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.green[50],
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment