如何让SliverAppBar的expandedHeight自适应flexibleSpace内容高度？

SliverAppBar必须指定明确的expandedHeight值，要实现自动适配headWidget()的高度，核心思路是先让headWidget完成渲染，再测量它的实际高度，最后把这个高度动态赋值给expandedHeight。以下是具体实现方案：

1. 定义全局Key与高度变量 #

在你的State类中添加两个成员变量，用来跟踪headWidget的渲染状态和存储测量后的高度：

final GlobalKey _headWidgetKey = GlobalKey();
double _expandedHeight = 0;

2. 渲染完成后测量高度 #

在initState中添加帧回调，确保headWidget布局完成后再获取它的高度：

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) {
    final RenderBox renderBox = _headWidgetKey.currentContext!.findRenderObject() as RenderBox;
    setState(() {
      _expandedHeight = renderBox.size.height;
    });
  });
}

3. 修改原代码绑定动态高度 #

给headWidget绑定全局Key，并将expandedHeight设置为测量后的变量：

@override
Widget build(BuildContext context) {
  return NestedScrollView(
    headerSliverBuilder: (context, value) {
      return [
        SliverAppBar(
          expandedHeight: _expandedHeight,
          backgroundColor: Colors.transparent,
          flexibleSpace: FlexibleSpaceBar(
            background: headWidget(key: _headWidgetKey), // 绑定全局Key
          ),
        )
      ];
    },
    body: myWidget(),
  );
}

补充说明 #

• 使用addPostFrameCallback是为了等待当前帧渲染完成，此时headWidget已经完成布局，能准确获取到真实高度。
• 如果headWidget的高度会动态变化（比如内部有异步加载的内容），可以在内容更新后再次执行测量逻辑并调用setState更新高度。
• 整个方案不需要依赖第三方插件，纯Flutter原生API即可实现。

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