Flutter嵌套Scaffold实现侧边导航是否合规及更优方案咨询

现有实现问题 #

你当前使用的嵌套Scaffold方案不属于最佳实践，不符合官方开发规范，会带来以下潜在问题：

• 冗余的内层Scaffold会产生额外渲染开销，降低性能
• 嵌套的Scaffold上下文会导致SnackBar、showBottomSheet等依赖Scaffold上下文的API调用异常
• 后续扩展页面导航、状态管理逻辑时，混乱的上下文层级容易引发不可预知的bug

优化实现方案 #

你需要实现的「侧边栏占用布局空间、推开内容区」的桌面端导航效果，完全不需要嵌套Scaffold，直接在外层Scaffold的body中使用Row布局即可实现，优化代码如下：

import 'package:flutter/material.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var showSidebar = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sidebar Demo',
      home: Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: const Icon(Icons.menu),
            onPressed: () {
              setState(() {
                showSidebar = !showSidebar;
              });
            },
          ),
          title: const Text("App"),
        ),
        body: Row(
          children: [
            // 侧边栏区域
            if (showSidebar)
              SizedBox(
                width: MediaQuery.of(context).size.width * 0.2,
                child: Drawer(
                  elevation: 8,
                  child: ListView(
                    padding: EdgeInsets.zero,
                    children: const [
                      DrawerHeader(child: Text("Iman")),
                      ListTile(
                        leading: Icon(Icons.ac_unit),
                        title: Text("Home"),
                      ),
                      Divider(),
                      ListTile(
                        leading: Icon(Icons.vertical_distribute_rounded),
                        title: Text("Home3"),
                      ),
                    ],
                  ),
                ),
              ),
            // 内容区域，自动占满剩余宽度
            const Expanded(
              child: ColoredBox(
                color: Colors.yellow,
                child: Center(child: Text("Content")),
              ),
            )
          ],
        ),
      ),
    );
  }
}

优化方案优势 #

• 移除了嵌套Scaffold，从根源避免上下文冲突和冗余性能消耗
• 使用Expanded组件自动计算内容区宽度，不需要手动通过MediaQuery计算占比，适配不同屏幕尺寸的表现更稳定
• 直接使用Drawer自带的elevation属性实现阴影效果，省去自定义BoxDecoration的冗余代码
• 后续需要扩展内部多页面导航时，直接将内容区域替换为Navigator或IndexedStack即可，逻辑层级更清晰

如果需要做多端适配，可以增加屏幕宽度断点判断：屏幕宽度大于桌面端阈值时显示固定侧边栏，小于阈值时切换为默认的浮层Drawer，同时隐藏顶部AppBar的菜单按钮即可。

内容的提问来源于stack exchange，提问作者Iman H