Flutter通用AppBar调用报错：自定义StatefulWidget问题解决

问题分析 #

1. 语法错误：AppBarScreen中actions里的Container未闭合，Column的children结构不完整，直接导致编译失败。
2. ScaffoldKey不匹配：AppBarScreen内部独立创建的GlobalKey<ScaffoldState>，和Home页面中控制Drawer的scaffoldkey不是同一个实例，点击菜单按钮时会因找不到对应Scaffold而崩溃。
3. 冗余的StatefulWidget：当前AppBarScreen没有需要维护的动态状态，使用StatefulWidget属于不必要的设计。

解决步骤 #

1. 修复语法错误 #

补全AppBarScreen中Column内的Container闭合标签，确保Widget结构完整：

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Container(
      height: 50,
      width: 80,
      // 可添加自定义内容，比如Logo图片或文本
      // child: Image.asset('lib/assets/your_logo.png'),
    ),
  ],
),

2. 传递页面的ScaffoldKey到通用AppBar #

将Home页面的scaffoldkey传递给AppBarScreen，确保菜单按钮能正确触发页面Drawer：

• 修改AppBarScreen为StatelessWidget并接收外部scaffoldKey：

import 'package:flutter/material.dart';

class AppBarScreen extends StatelessWidget {
  final GlobalKey<ScaffoldState> scaffoldKey;

  const AppBarScreen({super.key, required this.scaffoldKey});

  @override
  Widget build(BuildContext context) {
    return AppBar(
      iconTheme: const IconThemeData(color: Colors.black),
      toolbarHeight: 70,
      elevation: 0.0,
      backgroundColor: const Color(0xFFE5E5E5),
      actions: [
        const SizedBox(width: 10),
        Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              height: 50,
              width: 80,
              // 自定义内容区域
            ),
          ],
        ),
        const SizedBox(width: 90),
        Image.asset(
          "lib/assets/activity.png",
          height: 30,
          width: 30,
        ),
        const SizedBox(width: 15),
        Image.asset(
          "lib/assets/notification-bing.png",
          height: 30,
          width: 30,
        ),
        const SizedBox(width: 10),
        const CircleAvatar(
          child: Icon(
            Icons.person,
            color: Colors.grey,
          ),
          backgroundColor: Color(0xFFE0E0E0),
        ),
        const SizedBox(width: 10),
      ],
      leadingWidth: 100,
      leading: GestureDetector(
        // 使用?.避免空指针异常
        onTap: () => scaffoldKey.currentState?.openDrawer(),
        child: const Row(
          children: [
            SizedBox(width: 20),
            Icon(Icons.menu, color: Colors.black),
          ],
        ),
      ),
    );
  }
}

• 在Home页面调用时传入scaffoldkey：

appBar: AppBarScreen(scaffoldKey: scaffoldkey),

3. 可选优化：支持自定义标题 #

如果需要不同页面显示不同标题，可以给AppBarScreen添加可选参数：

class AppBarScreen extends StatelessWidget {
  final GlobalKey<ScaffoldState> scaffoldKey;
  final String? title;

  const AppBarScreen({super.key, required this.scaffoldKey, this.title});

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: title != null ? Text(title!, style: const TextStyle(color: Colors.black)) : null,
      // ... 其余代码不变
    );
  }
}

调用时指定标题：

appBar: AppBarScreen(scaffoldKey: scaffoldkey, title: "Dashboard"),

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