Flutter自定义AppBar实现后无法正常显示问题求助

问题根因 #

你自定义的Myappbar组件实现了PreferredSizeWidget接口，但没有正确实现preferredSize getter，直接抛出了未实现错误，导致Scaffold无法获取AppBar布局所需的尺寸，因此无法正常渲染显示。

修复方案 #

将Myappbar中preferredSize的返回值替换为正确的尺寸即可，Flutter默认AppBar的标准高度是kToolbarHeight，你可以直接使用这个常量，也可以自定义高度数值，修复后的代码如下：

import 'package:flutter/material.dart';

class Myappbar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(
        'text',
        style: TextStyle(color: Colors.black),
      ),
      backgroundColor: Colors.red,
    );
  }

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

额外注意事项 #

• 如果需要调整自定义AppBar的高度，直接修改Size.fromHeight的参数即可，例如要实现高度为70的AppBar，可写为Size.fromHeight(70)
• 运行前确认HomeScreen中引用的CustumBottomNavigationBar已正确实现，避免触发其他异常

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