Flutter全局复用自定义AppBar报错：类型无法匹配PreferredSizeWidget

错误原因 #

Scaffold的appBar参数要求传入的组件必须实现PreferredSizeWidget接口，你定义的AppBarNav继承的是StatelessWidget，没有实现该接口，导致类型不匹配报错。

解决方法 #

有两种常用方案，可根据自定义需求选择：

方案一：直接继承AppBar #

AppBar本身已经实现了PreferredSizeWidget，直接继承它就能满足Scaffold的参数要求，修改后的appbar.dart代码如下：

import 'package:flutter/material.dart';

class AppBarNav extends AppBar {
  final String title;
  AppBarNav({super.key, required this.title}) : super(
    title: Text(title),
  );
}

方案二：实现PreferredSizeWidget接口 #

如果需要更灵活的自定义布局（比如组合多个Widget），可以让AppBarNav实现PreferredSizeWidget，重写preferredSize属性指定高度：

import 'package:flutter/material.dart';

class AppBarNav extends StatelessWidget implements PreferredSizeWidget {
  final String title;
  const AppBarNav({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(title),
    );
  }

  // 使用Flutter内置默认工具栏高度，也可自定义数值如60.0
  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}

修改完成后，Welcome页面中使用AppBarNav就不会再报错，可实现全局复用自定义AppBar的需求。

内容的提问来源于stack exchange，提问作者Łukasz Szumowski