Home > Back-end >  Flutter: How to call openDrawer from other widget
Flutter: How to call openDrawer from other widget

Time:08-27

Question: I want to call openDrawer from onPressed() of Header.dart

The Drawer.dart, Header.dart and Home.dart files are separate.

I have triedScaffold.of(context).openDrawer(); not worked.

I tried using cotroller but it not work. Perhaps it was not used in the right way.

I would appreciate any advice you could give me.

code:

Codes are omitted.

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: Header('App'),
      endDrawer: Menu(),
    )}}

class Header extends StatefulWidget implements PreferredSizeWidget {
  const Header(this.heading, {Key? key});
  final String heading;
  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);

  @override
  State<Header> createState() => _HeaderState(heading);
}

class _HeaderState extends State<Header> {
  _HeaderState(this.heading);

  final String heading;

  @override
  Widget build(BuildContext context) {
    return AppBar(
      centerTitle: false,
      actions: <Widget>[
        IconButton(
          icon: const Icon(Icons.menu, size: 30.0),
          tooltip: '',
          onPressed: () {
            // _key.currentState!.openDrawer();
          },
        ),]
    );
  }
}
class Menu extends StatelessWidget {
  const Menu({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Drawer()
}

CodePudding user response:

You're using an end drawer, so instead of Scaffold.of(context).openDrawer(), you should use Scaffold.of(context).openEndDrawer():

class _HeaderState extends State<Header> {
  _HeaderState(this.heading);

  final String heading;

  @override
  Widget build(BuildContext context) {
    return AppBar(
      centerTitle: false,
      actions: <Widget>[
        IconButton(
          icon: const Icon(Icons.menu, size: 30.0),
          tooltip: '',
          onPressed: () {
            Scaffold.of(context).openEndDrawer();
          },
        ),]
    );
  }
}

Side Note: You don't need to pass arguments from the StatefulWidget to the State - Every instance of State has a widget property, which you can use to access the properties of the parent widget.

In your case it would look like:

class Header extends StatefulWidget implements PreferredSizeWidget {
  const Header(this.heading, {Key? key});

  final String heading;

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);

  @override
  State<Header> createState() => _HeaderState();
}

class _HeaderState extends State<Header> {
  @override
  Widget build(BuildContext context) {
    return AppBar(
      centerTitle: false,

      // Assuming this is what the heading argument is for
      title: Text(widget.heading), 

      actions: <Widget>[
        IconButton(
          icon: const Icon(Icons.menu, size: 30.0),
          tooltip: '',
          onPressed: () {
            Scaffold.of(context).openEndDrawer();
          },
        ),
      ],
    );
  }
}
  • Related