Reputation: 45
I would like to have a bottomNavBar and a Drawer at the same time, which are supposed to lead to different pages. In my PageView there are a few Screens, which are, so I thought, accessible if I call the pageController's function to change the page with the correct index. Now the tricky part: I only use 3 out of these 6 in my BottomNav and they work just fine. But I was thinking that it has to be possible to access the other ones too, if I get the correct index, i.e. I want to access the other screens/indices with the drawer. However, if I use the _pageController.jumpToPage(int page) command with any index greater than 2, I get the following error:
'0 <= currentIndex && currentIndex < items.length': is not true.
Any ideas what I am missing?
Edit:
class _MainScreenState extends State<MainScreen> {
var _pageController = PageController();
int _page = 0;
List drawerItems = [
{"icon": Icons.add,"name": "Feed",},
{"icon": Icons.delete, "name": "Your Feed",},
{"icon": Icons.delete, "name": "test1",},
{"icon": Icons.delete, "name": "test2",},
{"icon": Icons.delete, "name": "test3",},
];
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () => Dialogs().showExitDialog(context),
child: Scaffold(
body: _buildPageView(),
bottomNavigationBar: _buildBottomNavigation(),
drawer: _buildDrawer(),
),
);
}
PageView _buildPageView(){
return PageView(
physics: const NeverScrollableScrollPhysics(),
controller: _pageController,
onPageChanged: onPageChanged,
children: const [
Test1Screen(),
Test2Screen(),
Test3Screen(),
Test4Screen(),
Test5Sreen(),
Test6Screen()
],
);
}
void navigationTapped(int page) {
_pageController.jumpToPage(page);
}
@override
void initState() {
super.initState();
_pageController = PageController(initialPage: 0);
}
@override
void dispose() {
super.dispose();
_pageController.dispose();
}
void onPageChanged(int page) {
print(page);
setState(() {
this._page = page;
});
}
BottomNavigationBar _buildBottomNavigation(){
return BottomNavigationBar(
backgroundColor: Theme.of(context).primaryColor,
selectedItemColor: Theme.of(context).accentColor,
unselectedItemColor: Colors.grey[500],
elevation: 20,
type: BottomNavigationBarType.fixed,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(
FeatherIcons.home,
),
label: "Test1"
),
BottomNavigationBarItem(
icon: Icon(
FeatherIcons.compass,
),
label: "Test2"
),
BottomNavigationBarItem(
icon: Icon(
FeatherIcons.settings,
),
label: "Test3"
),
],
onTap: navigationTapped,
currentIndex: _page,
);
}
Drawer _buildDrawer(){
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
DrawerHeader(
child: const Center(
child: Text("Header Area"),
),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor
),
),
ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: drawerItems.length,
itemBuilder: (BuildContext context, int index){
Map item = drawerItems[index];
return _buildDrawerListTile(item,index);
})
],
),
);
}
Widget _buildDrawerListTile(Map item, int index){
return ListTile(
leading: Icon(
item['icon'],
color: _page == index
?Theme.of(context).primaryColorLight
: Theme.of(context).primaryColorDark
),
title: Text(
item["name"],
style: TextStyle(
color: _page == index
?Theme.of(context).primaryColorLight
:Theme.of(context).primaryColorDark
)
),
onTap: (){
navigationTapped;
},
);
}
}
Upvotes: 0
Views: 343