Flutter side drawer as a widget - dart

Question

I am trying to implement side drawer as a widget in my flutter app
home.dart
import '../widgets/navigation_drawer_widget.dart'; //imported the nav drawer class from widgets directory
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return DefaultTabController(length: 2,
child: Scaffold(
drawer: DrawerWidget(),
appBar: AppBar(
title: Text('Home'),
bottom: TabBar(tabs: <Widget>[
Tab(
icon: Icon(Icons.access_time),
text: 'Tab 1',
),
Tab(
icon: Icon(Icons.calendar_today),
text: 'Tab 2',
)
]),
),
body: TabBarView(children: <Widget>[
Tab1(),
Tab2()
]),
)
);
}
}
my drawer widget ** navigation_drawer_widget.dart** file
import 'package:flutter/material.dart';
class DrawerWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
AppBar(
automaticallyImplyLeading: false,
title: Text('Menu'),
),
ListTile(
leading: Icon(Icons.home),
title: Text('Home'),
onTap: () {
Navigator.pushReplacementNamed(context, '/home');
},
),
ListTile(
leading: Icon(Icons.person),
title: Text('My Profile'),
onTap: () {
Navigator.pushReplacementNamed(context, '/profile');
},
),
ListTile(
leading: Icon(Icons.school),
title: Text('My Education'),
onTap: () {
Navigator.pushReplacementNamed(context, '/education');
},
),
],
);
}
}
But when I click the nav hamburger icon it shows me something like this
As you can see the nav drawer becomes transparent and extends to the full width of the page. If I move the drawer code to the home page (instead of doing DrawerWidget() ) it will show the regular good ol nav drawer.
Any idea whats happening here?

Answer 1

You need to wrap the Column in the DrawerWidget with a Drawer if you want default material design drawer.
From the doc:
A drawer could be any Widget, but it’s often best to use the Drawer widget from the material library, which adheres to the Material Design spec.
https://flutter.io/cookbook/design/drawer/

Answer 2

You can declare your Drawer as a Widget instead of a Class and then import inside your file.
Widget myDrawer = Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(...),
ListTile(...)
],
),
);
and then just:
import 'mydrawer.dart';
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(...),
body: Container(...),
drawer: myDrawer
);
}
}

Answer 3

Use Container to change transparent drawer
Example:
class DrawerWidget extends StatelessWidget {
#override
Widget build(BuildContext contx) {
return Container(
color: Colors.amber[600],
child: Column(
children: <Widget>[
AppBar(automaticallyImplyLeading: false, title: Text('menu')),
ListTile(
leading: Icon(Icons.home),
title: Text('Home'),
onTap: () {
Navigator.pushReplacementNamed(contx, '/home');
},
),
ListTile(
leading: Icon(Icons.person),
title: Text('My Profile'),
onTap: () {
Navigator.pushReplacementNamed(contx, '/profile');
},
),
ListTile(
leading: Icon(Icons.school),
title: Text('My Education'),
onTap: () {
Navigator.pushReplacementNamed(contx, '/education');
},
),
],
),
);
}
}