how to show the drawer icon on bottom right in flutter? - flutter

Question

I need to show the the total of 5 icons (4 bottom navigation icon + 1 menu drawer icon) in the bottom of the page. I am using BottomNavigationBarItem to show the four bottom navigation icons. In that i need to add the menu drawer icon. I can find answers for only bottom right and left. Kindly help to resolve this
class HomeScreen extends StatefulWidget{
final int indexvalue;
HomeScreen({Key key, #required this.indexvalue}) : super(key: key);
#override
State createState() {
return HomeScreenState();
}
}
class HomeScreenState extends State<HomeScreen> {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
int _selectedPage = 0;
final _pageOptions = [
Screen1(),
WebView1(),
Home(),
Leader(),
];
#override
Widget build(BuildContext context){
Size size = MediaQuery.of(context).size;
var val = widget.indexvalue;
print(widget.indexvalue);
return MaterialApp(
title: 'Home',
home: Scaffold(
key: _scaffoldKey,
appBar: AppBar(title: Text('Home'),),
body: _pageOptions[_selectedPage],
endDrawer: build_1(),
bottomNavigationBar: new Theme(
data: Theme.of(context).copyWith(
// sets the background color of the `BottomNavigationBar`
canvasColor: Colors.green,
// sets the active color of the `BottomNavigationBar` if `Brightness` is light
primaryColor: Colors.red,
textTheme: Theme
.of(context)
.textTheme
.copyWith(caption: new TextStyle(color: Colors.yellow))), // sets the inactive color of the `BottomNavigationBar`
child: new BottomNavigationBar(
showSelectedLabels: false, // <-- HERE
showUnselectedLabels: false,
currentIndex: _selectedPage,
onTap: (int index) {
setState(() {
_selectedPage = index;
});
},
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(icon: Icon(Icons.photo_library), title: Text('photo_library')),
BottomNavigationBarItem(icon: Icon(Icons.book), title: Text('book')),
BottomNavigationBarItem(icon: Icon(Icons.notifications), title: Text('download')),
],
),
),
)
);
}
}
build_1(){
return SizedBox(
//width: size.width,
child: Drawer(
child: new ListView(
children: <Widget>[
new DrawerHeader(
child: new Text("Drawer Header"),
decoration: new BoxDecoration(
color: Colors.blue,
),
),
new Text("Item 1"),
new Text("Item 2"),
new Text("Item 3"),
new Text("Item 4"),
new Text("Item 5"),
new Text("Item 6"),
],
),
),
);
}

Answer 1

You can add another item in your bottomNavigationBar
BottomNavigationBarItem(icon: Icon(Icons.menu), title: Text('Menu'))
and check the index in onTap method and call _scaffoldKey.currentState.openDrawer(); to open the drawer
onTap: () {
int menuIndex = 4;//if you want it to be the last(bottom right)
if (index == menuIndex) {
_scaffoldKey.currentState.openDrawer();
}
else {
setState(() {
_selectedPage = index;
});
}
}
}
if you want to just add an icon everywhere in your screen to open your drawer just call
_scaffoldKey.currentState.openDrawer(); in onTap method
For exampe:
IconButton(
icon: Icon(Icons.menu),
color: Colors.white,
onPressed: () {
_scaffoldKey.currentState.openDrawer();
},)

Answer 2

If you are using in your Scaffold:
drawer: Drawer() use _scaffoldKey.currentState.openDrawer();
endDrawer: Drawer() use _scaffoldKey.currentState.openEndDrawer();