flutter - 如何在颤动中一起创建抽屉和底部导航栏？

Question

我到处搜索，但我找不到如何在颤动中一起使用抽屉和底部导航栏？

我创建了两个用户界面，两者都显示良好。主要问题是我可以在正文中导航抽屉的项目类或底部导航栏类。如果单击底部项目，则应加载底部类，并且当单击抽屉的项目时，应加载其类。

我的代码在下面，如果有任何错误，请查看代码或建议我任何示例。提前谢谢！！

  '''
  //for setting title name of side bar items
    class DrawerItem {
      String title;
      IconData icon;
    
      DrawerItem(this.title, this.icon);
    }
    
    //for setting title name of bottom bar items
    // class widgetBottomItems{
    //   String title;
    //   IconData icon;
    //   widgetBottomItems(this.title, this.icon);
    // }
    
    class DrawerSetting extends StatefulWidget {
      final drawerItems = [
        new DrawerItem("Add Manual FD", Icons.add),
        new DrawerItem("Zero Balance Portfolio", Icons.alarm),
        new DrawerItem("Message", Icons.message),
        new DrawerItem("My Info & Setting", Icons.settings),
        new DrawerItem("Support", Icons.help),
        new DrawerItem("FAQ", Icons.book_outlined),
        new DrawerItem("Contact Us", Icons.contact_phone_outlined),
        new DrawerItem("Logout", Icons.logout)
      ];
    
      @override
      State<StatefulWidget> createState() {
        return new HomePageState();
      }
    }
    
    class HomePageState extends State<DrawerSetting> {
      final Color myColor = Color(0xFF15A2EB);
      final Color myColorLightGray = Color(0xFF989E9E);
      final Color text_Semi_Black_Color = Color(0xFF414B51);
      final Color text_gray_color = Color(0xFF70787C);
    
      int _selectedDrawerIndex = 0;
    
      //bottom navigation
      int _selectedIndex = 0;
      var _screens = [
        DiscoverScreen(),
        HomeFragment(),
        PartnersScreen(),
        // HistoryScreen(),
        AppHistoryTabScreen(),
      ];
      static const TextStyle optionStyle = TextStyle(
        fontSize: 16,
        fontWeight: FontWeight.bold,
        color: Colors.red,
        fontFamily: "verdana_regular",
      );
      static const List<Widget> widgetBottomItems = <Widget>[
        Text(
          'Discover',
          style: optionStyle,
        ),
        Text(
          'Portfolio',
          style: optionStyle,
        ),
        Text(
          'Partners',
          style: optionStyle,
        ),
        Text(
          'History',
          style: optionStyle,
        ),
      ];
    
      String currentProfilePic =
          "https://service2home.in/wp-content/uploads/2021/01/rakesh.jpg";
    
      _getDrawerItemWidget(int pos) {
        switch (pos) {
          case 0:
            return new AddManualFdFragment();
            break;
          case 1:
            return new ZeroBalancePortFolioScreen();
            break;
          case 2:
            return MessageFragment();
            break;
          case 3:
            return new UserProfileScreen("drawer");
            break;
          case 4:
            return new SupportFragment();
            break;
          case 5:
            return new FAQFragment();
            break;
          case 6:
            return new ContactUsScreen();
            break;
          case 7:
            SystemNavigator.pop();
            //exit(0);
            break;
        }
      }
    
      //for bottom items
      void _onItemTapped(int index) {
        setState(() {
          _selectedIndex = index;
          //calling both items
          // _onSelectItem(index);
        });
      }
    
      //for drawer items
      _onSelectItem(int index) {
        setState(() => _selectedDrawerIndex = index);
        Navigator.of(context).pop(); // close the drawer
      }
    
      @override
      Widget build(BuildContext context) {
        List<Widget> drawerOptions = [];
        for (var i = 0; i < widget.drawerItems.length; i++) {
          var d = widget.drawerItems[i];
          drawerOptions.add(new ListTile(
            leading: new Icon(
              d.icon,
            ),
            title: new Text(
              d.title,
              style: TextStyle(
                fontSize: 16,
                color: myColorLightGray,
                fontFamily: "verdana_regular",
              ),
            ),
            selected: i == _selectedDrawerIndex,
            onTap: () => _onSelectItem(i),
          ));
        }
    
        //on backpress return to home screen , you can use it for drawer items
        return WillPopScope(
          onWillPop: () {
            if (_selectedIndex != 0) {
              setState(() {
                _selectedIndex = 0;
              });
              _getDrawerItemWidget(_selectedIndex);
            } else {
              Navigator.pop(context, true);
            }
            return;
          },
          child: Scaffold(
            appBar: new AppBar(
              title: new Text(
                widget.drawerItems[_selectedDrawerIndex].title,
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 16,
                    fontFamily: "verdana_regular"),
              ),
            ),
            drawer: new Drawer(
              child: SingleChildScrollView(
                child: new Column(
                  children: [
                    UserAccountsDrawerHeader(
                      currentAccountPicture: Container(
                        child: new GestureDetector(
                          child: new CircleAvatar(
                            backgroundImage: new NetworkImage(currentProfilePic),
                          ),
                          onTap: () => Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => UserProfileScreen("header")),
                          ),
                        ),
                      ),
                      accountName: new Text(
                        "Rakesh saini",
                        style: TextStyle(
                          fontSize: 18,
                          color: Colors.black,
                          fontFamily: "verdana_regular",
                        ),
                      ),
                      accountEmail: new Text(
                        "[e-mail]",
                        style: TextStyle(
                          fontSize: 15,
                          color: Colors.white,
                          fontFamily: "verdana_regular",
                        ),
                      ),
                    ),
                    Column(children: drawerOptions)
                  ],
                ),
              ),
            ),
            body: /*_screens[_selectedIndex]*/
                _getDrawerItemWidget(_selectedDrawerIndex),
    
            //bottom navigation bar
            bottomNavigationBar: BottomNavigationBar(
              type: BottomNavigationBarType.fixed,
              backgroundColor: myColor,
              items: const <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Icon(Icons.search),
                  label: 'Discover',
                ),
                BottomNavigationBarItem(
                  icon: ImageIcon(
                    AssetImage("assets/images/briefcase.png"),
                    // color: Colors.grey,
                  ),
                  label: 'Portfolio',
                ),
                BottomNavigationBarItem(
                  icon: ImageIcon(
                    AssetImage("assets/images/handshake.png"),
                    // color: Colors.grey,
                  ),
                  label: 'Partners',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.history),
                  label: 'History',
                ),
              ],
              currentIndex: _selectedIndex,
              selectedItemColor: Colors.white,
              unselectedItemColor: myColorLightGray,
              onTap: _onItemTapped,
            ),
            // bottomNavigationBar: BottomNavigationBar(),
          ),
        );
      }
    
      //go to news detail page
      void goToProfile_Screen(BuildContext ctx) {
        Navigator.of(ctx).push(
          MaterialPageRoute(
            builder: (_) {
              return UserProfileScreen("drawer");
            },
          ),
        );
      }
    }
  
  '''

标签： flutterbottomnavigationviewdrawer

Answer 1

首先，我的朋友这是一个非常糟糕的代码。

在下面的这段代码中，我有你想要的，你可以按照这条路走

FooterNavigationBar 只是一个有状态的小部件，有一些行和容器没什么特别的

Scaffold(
  key: _scaffoldKey,
  bottomNavigationBar: FooterNavigationBar(),
  drawer: AppDrawer(
    scaffoldKey: _scaffoldKey,
  ),
  backgroundColor: CBase().backgroundColor,
  body: ......
       InkWell(
          onTap: () {
             _scaffoldKey.currentState.openDrawer();
             },
            child: SvgPicture.asset(
              "images/DrawerIcon.svg"),
                   ),
              ...............