Gauerdia
Gauerdia

Reputation: 45

Flutter: Combine Drawer and BottomNav in PageView

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

Answers (0)

Related Questions