【发布时间】：2021-05-16 10:10:49
【问题描述】：
我到处搜索，但我找不到如何在颤动中同时使用抽屉和底部导航栏？
我创建了两个 ui，因为两者都显示良好。主要问题是我可以在正文中导航抽屉的项目类或底部导航栏类。如果单击底部项目，则应加载底部类，并且当单击抽屉的项目时，应加载其类。
我的代码如下，如果有任何错误请查看代码或建议我任何示例。提前谢谢！
'''
//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(
"rakesh.ollosoft@gmail.com",
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");
},
),
);
}
}
'''
【问题讨论】：
标签： flutter bottomnavigationview drawer