CODEWITHSUNDEEP
flutterflutter-drawer
Lukas Kirner
Lukas Kirner

Reputation: 4319

Open drawer on clicking AppBar

If you create an Scaffold there is an option for a Drawer. If you now create this drawer you get automatically the menu icon on the leading position of the Appbar. But I want another icon there to open the drawer. I tried to make an iconButton myself on the leading position, but this button can't open the drawer even with Scaffold.of(context).openDrawer().

Is there any option to replace the icon for the drawer button?

Upvotes: 63

Views: 105535

Answers (6)

Shoua Ul Qammar
Shoua Ul Qammar

Reputation: 233

Here is your Menu Button

backButton: IconButton(
    onPressed: () {
        Scaffold.of(context).isDrawerOpen
            ? Scaffold.of(context).closeDrawer()
            : Scaffold.of(context).openDrawer();
        }
    icon: Icon(
        Icons.menu,
        color: AppColors.white,
    ),
),

Upvotes: 0

Vipin Maurya
Vipin Maurya

Reputation: 31

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        key: _scaffoldKey,
        appBar: AppBar(
          leading: IconButton(
              onPressed: () {
                _scaffoldKey.currentState!.openDrawer();
              },
              icon: const Icon(Icons.home)),
        ),
        drawer: const Drawer(),
      ),

 - List item

    );
  }
}

Upvotes: 3

Uhelliton
Uhelliton

Reputation: 186

Using GlobalKey:

final GlobalKey<ScaffoldState> _key = GlobalKey(); // Create a key

@override
Widget build(BuildContext context) {
  return Scaffold(
    key: _key, // Assign the key to Scaffold.
    drawer: Drawer(),
    floatingActionButton: FloatingActionButton(
      onPressed: () => _key.currentState!.openDrawer(), // <-- Opens drawer
    ),
  );
}

Using Builder:

@override
Widget build(BuildContext context) {
  return Scaffold(
    drawer: Drawer(),
    floatingActionButton: Builder(builder: (context) {
      return FloatingActionButton(
        onPressed: () => Scaffold.of(context).openDrawer(), // <-- Opens drawer.
      );
    }),
  );
}

Upvotes: 13

Shady Aziza
Shady Aziza

Reputation: 53317

Use a Key in your Scaffold and show the drawer by calling myKey.currentState.openDrawer(), here is a working code:

enter image description here

import "package:flutter/material.dart";

class Test extends StatefulWidget {
  @override
  _TestState createState() => new _TestState();
}

class _TestState extends State<Test> {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      key: _scaffoldKey,
      drawer: new Drawer(),
      appBar: new AppBar(
        leading: new IconButton(
          icon: new Icon(Icons.settings),
          onPressed: () => _scaffoldKey.currentState.openDrawer(),
        ),
      ),
    );
  }
}

Upvotes: 180

Sebastian Roth
Sebastian Roth

Reputation: 11537

Alternative to the accepted answer which does not require a GlobalKey:

class _TestState extends State<Test> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      drawer: new Drawer(),
      appBar: new AppBar(
        leading: Builder(
        builder: (context) => IconButton(
            icon: new Icon(Icons.settings),
            onPressed: () => Scaffold.of(context).openDrawer(),
          ),
        ),
      ),
    );
  }
}

Upvotes: 121

user9139407
user9139407

Reputation: 1012

you need initialize scaffoldKey after that,

Open drawer and close drawer

 GestureDetector(
          onTap: () {
            if(scaffoldKey.currentState.isDrawerOpen){
              scaffoldKey.currentState.openEndDrawer();
            }else{
              scaffoldKey.currentState.openDrawer();
            }
          },
          child:  LeadingIcon(icon: Icons.menu),//your button
        ),

Upvotes: 8

Related Questions