website icon indicating copy to clipboard operation
website copied to clipboard

Explain how to open a drawer in the 'Add a drawer to a screen' page

Open sudot opened this issue 1 year ago • 3 comments

Page URL

https://docs.flutter.dev/cookbook/design/drawer/

Page source

https://github.com/flutter/website/tree/main/src/content/cookbook/design/drawer.md

Describe the problem

没有打开 drawer 的相关说明和代码。

Expected fix

请添加打开 drawer 相关的代码和说明。

例如:

通过编程打开 drawer

打开 drawer 有两种常用的操作方式。

第一种方式,在 Builder 中子组件的点击事件中打开 drawer

Scaffold(
  appBar: AppBar(
    leading: Builder(
      builder: (context) {
        return IconButton(
          icon: const Icon(Icons.menu),
          onPressed: () {
            Scaffold.of(context).openDrawer();
          },
        );
      },
    ),
  ),
  drawer: Drawer(),
)

第二种方式,给定一个 GlobalKey<ScaffoldState>,然后你可以使用他来打开 drawer

final GlobalKey<ScaffoldState> scaffoldStateKey = GlobalKey<ScaffoldState>();
Scaffold(
  key: scaffoldStateKey,
  appBar: AppBar(
    leading: IconButton(
      icon: const Icon(Icons.menu),
      onPressed: () {
        scaffoldStateKey.currentState?.openDrawer();
      },
    ),
  ),
  drawer: Drawer(),
)

Additional context

No response

I would like to fix this problem.

  • [X] I will try and fix this problem on docs.flutter.dev.

sudot avatar May 06 '24 08:05 sudot

Rough translation

Describe the problem

There are no instructions or codes for opening the drawer.

Expected fix

Please add the code and instructions related to opening the drawer.

For example: Open drawer programmatically. There are two common operations for opening the drawer.

The first way is to open the drawer in the click event of the subcomponent in the Builder.

The second way, given a GlobalKey<ScaffoldState>, then you can use it to open the drawer.

atsansone avatar May 06 '24 17:05 atsansone

@zoeyfan : Could you check my translation of this contributor's request?

atsansone avatar Jun 03 '24 18:06 atsansone

LGTM!

zoeyfan avatar Jun 03 '24 18:06 zoeyfan