Flutter Drawer when menu icon is tapped - flutter

Question

I am currently trying out drawer widget. I have constructed an appbar with a hamburger menu icon, title text and a search icon.
Here is my code:
`
import 'package:flutter/material.dart';
import 'package:hexcolor/hexcolor.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: PreferredSize(
child: Container(
color: Colors.white,
padding:
EdgeInsets.only(left: 10, right: 10, top: 10, bottom: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.menu),
Text(
'Appbar',
style: TextStyle(fontWeight: FontWeight.bold),
),
Icon(Icons.search)
],
),
),
preferredSize: Size.fromHeight(40)),
backgroundColor: Hexcolor('#e9f1fe'),
body: Center(
child: Text('Experimenting drawer'),
)));
}
}
`
Here is the output :,
Also I have a separate dart file for a custom drawer I want to be displayed when the hamburger menu icon is tapped. How can I make that possible?
Here is the code for custom drawer:
import 'package:flutter/material.dart';
class DrawerScreen extends StatefulWidget {
#override
_DrawerScreenState createState() => _DrawerScreenState();
}
class _DrawerScreenState extends State<DrawerScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
drawer: Drawer(
child: Column(
children: [
ListTile(
leading: CircleAvatar(
radius: 28,
backgroundColor: Colors.blueGrey,
child: CircleAvatar(
radius: 50,
backgroundImage: AssetImage('assets/images/joker.jpg'),
),
),
title: Text(
'Joaquin Phoenix',
style: TextStyle(
color: Colors.black,
fontFamily: 'Roboto',
fontWeight: FontWeight.bold,
fontSize: 14,
),
),
subtitle: Text(
"You wouldn't get it",
style: TextStyle(
color: Colors.black,
fontFamily: 'Roboto',
fontWeight: FontWeight.w400,
fontSize: 10.0),
),
)
],
)),
backgroundColor: Colors.blue[50],
);
}
}

Answer 1

You can copy paste run two full code below
Step 1: _DrawerScreenState remove Scaffold
Step 2: For drawer background color, you can wrap with Theme
class _DrawerScreenState extends State<DrawerScreen> {
#override
Widget build(BuildContext context) {
return Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.blue[50],
),
child: Drawer(
Step 3: Use DrawerScreen() in main.dart
SafeArea(
child: Scaffold(
drawer: DrawerScreen(),
Step 4: wrap Icons.menu with Builder and open with openDrawer()
Builder(
builder: (context) => GestureDetector(
onTap: () {
Scaffold.of(context).openDrawer();
},
child: Icon(Icons.menu)),
),
working demo
full code main.dart
import 'package:flutter/material.dart';
import 'package:hexcolor/hexcolor.dart';
import 'drawer.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
drawer: DrawerScreen(),
appBar: PreferredSize(
child: Container(
color: Colors.white,
padding:
EdgeInsets.only(left: 10, right: 10, top: 10, bottom: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Builder(
builder: (context) => GestureDetector(
onTap: () {
Scaffold.of(context).openDrawer();
},
child: Icon(Icons.menu)),
),
Text(
'Appbar',
style: TextStyle(fontWeight: FontWeight.bold),
),
Icon(Icons.search)
],
),
),
preferredSize: Size.fromHeight(40)),
backgroundColor: Hexcolor('#e9f1fe'),
body: Center(
child: Text('Experimenting drawer'),
)));
}
}
full code drawer.dart
import 'package:flutter/material.dart';
class DrawerScreen extends StatefulWidget {
#override
_DrawerScreenState createState() => _DrawerScreenState();
}
class _DrawerScreenState extends State<DrawerScreen> {
#override
Widget build(BuildContext context) {
return Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.blue[50],
),
child: Drawer(
child: Column(
children: [
ListTile(
leading: CircleAvatar(
radius: 28,
backgroundColor: Colors.blueGrey,
child: CircleAvatar(
radius: 50,
backgroundImage: AssetImage('assets/images/joker.jpg'),
),
),
title: Text(
'Joaquin Phoenix',
style: TextStyle(
color: Colors.black,
fontFamily: 'Roboto',
fontWeight: FontWeight.bold,
fontSize: 14,
),
),
subtitle: Text(
"You wouldn't get it",
style: TextStyle(
color: Colors.black,
fontFamily: 'Roboto',
fontWeight: FontWeight.w400,
fontSize: 10.0),
),
)
],
)),
);
}
}