In this example, we are going to show you how to change the drawer menu hamburger icon in Flutter. You will also learn to change the icon size and color. After changing the icon, we will implement drawer open and close functionality on icon button.
Scaffold(
appbar:AppBar(),
drawer: Drawer(),
body: Container()
)
This is the basic structure of Scaffold. When you add Drawer() widget, the menu icon will appear on the AppBar at left side, we will change the icon on app bar.
AppBar(
leading: IconButton(
icon: Icon(Icons.person), //icon
onPressed: (){
},
),
)
Change the icon data according to your need, if you want to change the size and color, then pass the following attributes.
AppBar(
leading: IconButton(
icon: Icon(Icons.person, size: 40, color: Colors.red,), //icon
onPressed: (){
},
),
)
But, the problem is, if you tap on it, the drawer will not open or close, to implement the opening and closing of the drawer when clicking on this button, use the following code:
final scaffoldKey = GlobalKey<ScaffoldState>();
Declare the key for Scaffold, and apply it to Scaffold:
Scaffold(
key: scaffoldKey,
drawer: Drawer()
)
Now, apply the drawer icon like below with click action:
AppBar(
title: Text("My AppBar"),
leading: IconButton(
icon: Icon(Icons.person),
onPressed: (){
if(scaffoldKey.currentState!.isDrawerOpen){
scaffoldKey.currentState!.closeDrawer();
//close drawer, if drawer is open
}else{
scaffoldKey.currentState!.openDrawer();
//open drawer, if drawer is closed
}
},
),
)
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
);
}
}
class Home extends StatefulWidget{
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
final scaffoldKey = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
appBar: AppBar(
title: Text("My AppBar"),
leading: IconButton(
icon: Icon(Icons.person),
onPressed: (){
if(scaffoldKey.currentState!.isDrawerOpen){
scaffoldKey.currentState!.closeDrawer();
//close drawer, if drawer is open
}else{
scaffoldKey.currentState!.openDrawer();
//open drawer, if drawer is closed
}
},
),
),
drawer: Drawer(),
body: Container()
);
}
}
In this way, you can change the drawer icon in Flutter.
Please Wait...
No any Comments on this Article