Flutter Drawer Overlaps the bottom Navigation bar - flutter

Question

----------
Here is the 1st-screenshot of my problem
This is the 2nd-second screenshot when after implementing single child scrolled view
I have created a navigation drawer and a Bottom navigation widget, i have face the following problems/
While opening drawer it says the drawer exceeds XX pixels so i wrapped it up in "Single child scroll view and now the drawer opens up like a whole page.
Also, when drawer is pressed the Bottom navigation overlaps it.
I have added images which you can see through my clicking above.
here is my piece of code.
class Mydrawer extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text('Name'),
accountEmail: Text('Username'),
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.white,
child: Text('Hi'),
),
),
ListTile(
leading: Icon(Icons.home),
title: Text(
'Home Page',
),
onTap: () {
Navigator.of(context).pop();
Navigator.of(context).pushNamed(MyHomepage.route);
}),
ListTile(
leading: Icon(Icons.person),
title: Text(
'My Account',
),
onTap: () {
Navigator.of(context).pop();
Navigator.of(context).pushNamed(Account.route);
},
),
ListTile(
leading: Icon(Icons.assignment),
title: Text(
'My Lists',
),
onTap: () {
Navigator.of(context).pop();
Navigator.of(context).pushNamed(Mylist.route);
},
),
ListTile(
leading: Icon(Icons.bookmark),
title: Text(
'Wishlist',
),
onTap: () {
Navigator.of(context).pop();
Navigator.of(context).pushNamed(Wishlist.route);
},
),
Divider(),
ListTile(
leading: Icon(Icons.mail),
title: Text(
'Contact us',
),
onTap: () {
Navigator.of(context).pop();
Navigator.of(context).pushNamed(Contactus.route);
},
),
ListTile(
leading: Icon(Icons.info),
title: Text(
'Info & FAQ',
),
onTap: () {
Navigator.of(context).pop();
Navigator.of(context).pushNamed(Infofaq.route);
},
),
Divider(),
ListTile(
leading: Icon(Icons.lock_open),
title: Text(
'Logout',
),
onTap: () {
Navigator.pop(context);
},
),
],
),
),
),
);
}
}
Bottom Navigation Code
class Nav extends StatefulWidget {
#override
_NavState createState() => _NavState();
}
class _NavState extends State<Nav> {
int _selectedIndex = 0;
final List<Widget> _widgetOptions = [
NavHome(),
NavInspiration(),
NavNotification(),
NavMessages(),
];
void _onitemtap(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: _widgetOptions[_selectedIndex],
bottomNavigationBar: BottomNavigationBar(
showSelectedLabels: false,
showUnselectedLabels: false,
type: BottomNavigationBarType.fixed,
onTap: _onitemtap,
currentIndex: _selectedIndex,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.filter_none),
title: Text('Inspiration'),
),
BottomNavigationBarItem(
icon: Icon(Icons.notifications_none),
title: Text('Notifications'),
),
BottomNavigationBarItem(
icon: Icon(Icons.mail_outline),
title: Text('Messages'),
),
],
),
);
}
}
Main Dart
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter demo',
home: Nav(),
theme: ThemeData(
primarySwatch: Colors.blue,
),
//home: Homepage(),
//initialRoute: '/',
routes: {
MyHomepage.route: (_) => MyHomepage(),
Account.route: (_) => Account(),
Mylist.route: (_) => Mylist(),
Wishlist.route: (_) => Wishlist(),
Contactus.route: (_) => Contactus(),
Infofaq.route: (_) => Infofaq(),
},
);
}
}
----------

Answer 1

Check this!
It's work for me
use drawer part of scaffold().

Answer 2

The best thing that can be done here is, just like you have your Drawer seperate, create a seperate navbar class with no scaffold or body, just the navbar. Now, call both of these, the drawer and the navbar, in a third widget, which contains your scaffold. For changing the index, you can pass the function as a parameter to your navbar widget.

Answer 3

i have changed how u relay your codes, try implementing this in your code. and i have decomposed Nav(), so take in mind that im not using the Nav() as awhole
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: MainEntry(),
theme: ThemeData(
primarySwatch: Colors.blue,
),
//home: Homepage(),
//initialRoute: '/',
routes: {
MyHomepage.route: (_) => MyHomepage(),
Account.route: (_) => Account(),
Mylist.route: (_) => Mylist(),
Wishlist.route: (_) => Wishlist(),
Contactus.route: (_) => Contactus(),
Infofaq.route: (_) => Infofaq(),
},
);
}
}
class MainEntry extends StatefulWidget {
#override
_MainEntryState createState() => _MainEntryState();
}
class _MainEntryState extends State<MainEntry> {
#override
Widget build(BuildContext context) {
return MaterialApp(debugShowCheckedBanner: false,
home: Scaffold(
drawer: MyDrawer(),
body: _widgetOptions[_selectedIndex] //your body
bottomNavigationBar: BottomNavigationBar(
showSelectedLabels: false,
showUnselectedLabels: false,
type: BottomNavigationBarType.fixed,
onTap: _onitemtap,
currentIndex: _selectedIndex,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.filter_none),
title: Text('Inspiration'),
),
BottomNavigationBarItem(
icon: Icon(Icons.notifications_none),
title: Text('Notifications'),
),
BottomNavigationBarItem(
icon: Icon(Icons.mail_outline),
title: Text('Messages'),
),
],
)
)
);
}
}