Flutter中BottomAppBarTheme的height属性不可用及AppBar底部线条配置问题

我正在自定义AppBar，想给它加一条底部浅灰色线条。一开始尝试用BottomAppBarTheme，结果发现只能设置shape、elevation和color属性，但Flutter文档里说这个类有height属性，为啥我没法在AppBar里用它来设置高度？

我的main.dart代码片段：

return GetMaterialApp(
  translations: GetXTranslations(), 
  locale: Locale('en', 'US'), 
  fallbackLocale: Locale('en', 'US'),
  title: 'MyApp',
  theme: ThemeData(
      appBarTheme: AppBarTheme.of(context).copyWith(
    backgroundColor: Colors.white,
  ),
    bottomAppBarTheme: BottomAppBarTheme.of(context).copyWith(
      color: ColorsConstants.grey100,
    ),

更新说明：
我搞错了，实际需求是给AppBar加底部灰色线条，不是修改高度。之前误以为能通过自定义BottomAppBarTheme实现，而且我已经在单个页面里用下面的代码实现了效果，现在想在main.dart里全局配置：

return Scaffold( backgroundColor: Colors.white,
  appBar: AppBar(title: Text('name'),
      bottom: PreferredSize(
        preferredSize: const Size.fromHeight(1.0),
        child: Container(
          color: ColorsConstants.grey100,
          height: 1.0,
        ),
      )
  ),

解决方案 #

方法一：利用AppBarTheme的shape属性（推荐） #

直接在ThemeData的appBarTheme中配置底部边框，这是最简洁的全局生效方式，无需额外封装组件：

return GetMaterialApp(
  translations: GetXTranslations(), 
  locale: const Locale('en', 'US'), 
  fallbackLocale: const Locale('en', 'US'),
  title: 'MyApp',
  theme: ThemeData(
    appBarTheme: AppBarTheme(
      backgroundColor: Colors.white,
      // 添加底部1px灰色线条
      shape: const Border(
        bottom: BorderSide(
          color: ColorsConstants.grey100,
          width: 1.0,
        ),
      ),
    ),
  ),
);

配置完成后，所有页面的原生AppBar都会自动显示底部灰色线条，完全匹配需求。

方法二：封装自定义AppBar组件 #

如果需要更多个性化逻辑，可封装全局复用的CustomAppBar，所有页面统一使用：

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  final Widget title;
  final Widget? leading;
  final List<Widget>? actions;

  const CustomAppBar({
    super.key,
    required this.title,
    this.leading,
    this.actions,
  });

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: title,
      leading: leading,
      actions: actions,
      backgroundColor: Colors.white,
      bottom: PreferredSize(
        preferredSize: const Size.fromHeight(1.0),
        child: Container(
          color: ColorsConstants.grey100,
          height: 1.0,
        ),
      ),
    );
  }

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

使用时替换原生AppBar即可：

appBar: const CustomAppBar(title: Text('name')),

关于BottomAppBarTheme的误区 #

你之前误用了BottomAppBarTheme，这个主题是给Flutter的BottomAppBar组件（通常是Scaffold底部的导航栏）配置样式的，和AppBar的底部线条没有关联，所以设置它的属性不会影响AppBar的显示。

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