可以显示在我所有页面上的 Flutter 应用 DRAWER答案

【问题标题】：Flutter app DRAWER that can be displayed on all my pages可以显示在我所有页面上的 Flutter 应用 DRAWER
【发布时间】：2021-03-25 01:19:21
【问题描述】：

我想知道是否有更好的方法来做到这一点：我想要一个打开菜单（列表视图和列表图块）的抽屉，可用于导航我的应用程序、注销和更改语言。抽屉从应用栏前缀的菜单图标下拉（自动）

我已经做了抽屉，它可以工作。我将它编码到设置页面，但我希望这个抽屉/图标在所有页面上都可用（一旦你登录）

我的“菜鸟解决方案”是在所有页面上复制并粘贴抽屉代码，但我知道有更好的方法，我只是不记得它是什么或如何做。我知道这是基本的，但它让我卡住了，我不知道如何用谷歌搜索，是如何创建方法吗？一个函数？自定义小部件？私有方法？

有人可以帮忙吗

【问题讨论】：

标签： flutter dart

【解决方案1】：

您可以只创建一个专用小部件（有状态或无状态）并将所有抽屉的代码放入该小部件中。然后，您可以在每次需要时实例化该小部件。

class AppDrawer extends StatefulWidget {

  @override
  _AppDrawerState createState() => _AppDrawerState();

}

class _AppDrawerState extends State<AppDrawer> {
  @override
  Widget build(BuildContext context) {
     // your drawer's code
  }
}

然后在您需要抽屉的其他小部件中：

@override
Widget build(BuildContext context) => Scaffold(
    appBar: [...]
    drawer: AppDrawer(),
    body: [...]
);

【讨论】：

谢谢。我花了一段时间来正确实施它，但我做到了。创建了一个新类（statefull 小部件）该类返回了一个抽屉（包含该抽屉的所有代码）我通过编码在其他页面上创建了一个实例：抽屉：AppDrawer（），就在应用程序条形码下方和正文上方代码。它似乎工作正常。再次感谢！亲切的问候，

【解决方案2】：

可能有更好的方法，但这是我的做法。

这是包含抽屉的主仪表板

 return Scaffold(
          drawer: Drawer(
            key: Key("dash_board_screen_key"),
            child: menu(context: context, model: model),
          ),
          appBar: AppBar(
            title: Text(
              model.getTitle(),
            ),

            centerTitle: true,
            actions: <Widget>[
              IconButton(
                  icon: Icon(
                    Icons.lightbulb_outline,
                    size: 18,
                  ),
                  onPressed: () {
                    model.toggleDarkMode();
                  }),
            ],
          ),
          body: Padding(
            padding: EdgeInsets.only(left: 20.w, right: 20.w),
            child: Expanded(child: getDashboardWidget(model)),
          ) // dashboard(context),
        );

正如您在上面看到的，getDashboardWidget 返回一个显示的小部件

 Widget getDashboardWidget(DashboardController model){

    switch (model.selectedItem) {
      case DashboardMenu.cart:
        return CartScreen();

     

      case DashboardMenu.notification:
        return NotificationScreen();

      case DashboardMenu.profile:
        return ProfileScreen();
    }

    return CartScreen();
  }

所以根据选择的抽屉选项，我只更新了仪表板页面的正文。

这意味着所有其他屏幕（CartScreen、Notification）共享同一个脚手架。

【讨论】：