Flutter SliverPersistentHeaderDelegate未完全折叠

我很难制作一个自定义的折叠工具栏，下面是一个普通情况下的视频

然后这里是一个屏幕记录的不良行为，大多数情况下都会发生

除了滚动不是很快之外，在第二个视频中，你会看到顶部的条子没有完全折叠

你有什么建议来提高应用程序的性能和解决这个bug的方法吗

这是我在SliverPersistentHeaderDelegate中的代码

class DashboardHeaderPersistentDelegate extends SliverPersistentHeaderDelegate {

...

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {

    double shrinkPercentage = min(1, shrinkOffset / (maxExtent - minExtent));
    double titleTopMargin = titleCollapsedTopPadding +
        (titleExpandedTopPadding - titleCollapsedTopPadding) *
            (1 - shrinkPercentage);
    double titleFontSize = titleCollapsedFontSize +
        (titleExpandedFontSize - titleCollapsedFontSize) *
            (1 - shrinkPercentage);
    double infoWidgetHeight = minExtent +
        (maxExtent - minExtent) -
        shrinkOffset -
        titleTopMargin -
        titleFontSize -
        44;
    double collapasedInfoOpacity = max(0, shrinkPercentage-.7)/.3;

    return Material(
      elevation: 0,
      shadowColor: Colors.white,
      child: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              height: titleFontSize,
              alignment: Alignment.center,
              child: Text(
                '\$ 5329.05',
                style: TextStyle(
                    fontFamily: 'Barlow',
                    fontSize: titleFontSize,
                    fontWeight: FontWeight.w500),
              ),
              margin: EdgeInsets.only(top: titleTopMargin, bottom: 8),
            ),
            Container(
              height: shrinkPercentage == 1 ? 20 : infoWidgetHeight,
              width: MediaQuery.of(context).size.width,
              alignment: Alignment.center,
              child: Stack(
                alignment: Alignment.bottomCenter,
                children: [
                  Opacity(
                    opacity: 1 - shrinkPercentage,
                    child: _buildInformationWidget(context),
                  ),
                  Opacity(
                    opacity: collapasedInfoOpacity,
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 8),
                      child: _buildCollapsedInformationWidget(),
                    ),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget _buildInformationWidget(BuildContext context) => ClipRect(
        child: OverflowBox(
          maxWidth: double.infinity,
          maxHeight: double.infinity,
          child: FittedBox(
            fit: BoxFit.fitWidth,
            alignment: Alignment.center,
            child: Container(
              width: MediaQuery.of(context).size.width,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'AVAILABLE BALANCE',
                    style: TextStyle(
                        fontSize: 12,
                        fontWeight: FontWeight.w900,
                        color: Colors.black26),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 16),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        Container(
                          width: 100,
                          child: Text(
                            '\$ 11200',
                            textAlign: TextAlign.right,
                            style: TextStyle(
                                fontFamily: 'Barlow',
                                fontSize: 18,
                                fontWeight: FontWeight.w700,
                                color: Colors.green[400]),
                          ),
                        ),
                        Text(
                          ' I ',
                          style: TextStyle(fontSize: 20, color: Colors.black12),
                        ),
                        Container(
                          width: 100,
                          child: Text(
                            '\$ 400',
                            style: TextStyle(
                                fontFamily: 'Barlow',
                                fontSize: 18,
                                fontWeight: FontWeight.w700,
                                color: Colors.red[400]),
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(left: 12, top: 12),
                    alignment: Alignment.centerLeft,
                    child: Text(
                      "CATEGORIES",
                      style: TextStyle(
                          fontSize: 12,
                          fontWeight: FontWeight.w900,
                          color: Colors.black26),
                    ),
                  ),
                  Container(
                    height: 88,
                    child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        itemCount: categories.length,
                        itemBuilder: (context, index) {
                          return Padding(
                            padding: EdgeInsets.only(
                                left: (index == 0) ? 24.0 : 8.0,
                                right: (index == categories.length - 1)
                                    ? 24.0
                                    : 8.0),
                            child: _buildCategoryItem(
                                categoriesIcons[index], categories[index], .9),
                          );
                        }),
                  )
                ],
              ),
            ),
          ),
        ),
      );

  Widget _buildCollapsedInformationWidget() => Row(
        children: [
          Text("Recent"),
          Spacer(),
          Container(
            child: Text(
              '\$ 11200',
              textAlign: TextAlign.right,
              style: TextStyle(
                  fontFamily: 'Barlow',
                  fontSize: 14,
                  fontWeight: FontWeight.w700,
                  color: Colors.green[400]),
            ),
          ),
          Text(
            ' I ',
            style: TextStyle(fontSize: 20, color: Colors.black12),
          ),
          Container(
            child: Text(
              '\$ 400',
              style: TextStyle(
                  fontFamily: 'Barlow',
                  fontSize: 14,
                  fontWeight: FontWeight.w700,
                  color: Colors.red[400]),
            ),
          )
        ],
      );

  Widget _buildCategoryItem(
          IconData data, String categoryTitle, double percentage) =>
      Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Stack(
            alignment: Alignment.center,
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                    border: Border.all(width: 1, color: Colors.black12),
                    borderRadius: BorderRadius.circular(28),
                    color: Colors.blue[400]),
                child: Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Icon(
                    data,
                    size: 28,
                    color: Colors.white,
                  ),
                ),
              ),
              Container(
                width: 40,
                height: 40,
                child: CircularProgressIndicator(
                  value: percentage,
                  strokeWidth: 2,
                  valueColor: AlwaysStoppedAnimation(Colors.white),
                ),
              )
            ],
          ),
          Container(
            width: 72,
            alignment: Alignment.center,
            child: Text(categoryTitle,
                overflow: TextOverflow.ellipsis,
                textAlign: TextAlign.center,
                maxLines: 1,
                style: TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.w400,
                    color: Colors.black45)),
          )
        ],
      );

...

}

类DashboardHeaderPersistentDelegate扩展SliverPersistentHeaderDelegate{
...
@凌驾
小部件构建(
BuildContext上下文、双收缩偏移、布尔重叠内容）{
双收缩百分比=最小值（1，收缩偏移量/（最大范围-最小范围））；
双titleTopMargin=titleCollapsedTopPadding+
（标题ExpandedTopAdding-标题CollapsedTopAdding）*
（1-收缩率）；
双titleFontSize=titleCollapsedFontSize+
（标题ExpandedFontSize-标题CollapsedFontSize）*
（1-收缩率）；
双信息WidgetHeight=minExtent+
（maxExtent-minExtent）-
收缩偏移-
标题页边距-
标题字体大小-
44;
双胶圈产能=最大值（0，收缩百分比-.7）/.3；
退货(
海拔：0，
阴影颜色：颜色。白色，
儿童：安全区(
子：列(
crossAxisAlignment:crossAxisAlignment.center，
儿童：[
容器(
高度：标题字体大小，
对齐：对齐.center，
子：文本(
'\$ 5329.05',
样式：TextStyle(
fontFamily：“巴洛”，
fontSize:titleFontSize，
fontWeight:fontWeight.w500），
),
页边距：仅限边集（顶部：标题页边距，底部：8），
),
容器(
高度：收缩百分比==1？20:infoWidgetHeight，
宽度：MediaQuery.of（context）.size.width，
对齐：对齐.center，
子：堆栈(
对齐：对齐.bottomCenter，
儿童：[
不透明(
不透明度：1-收缩百分比，
子项：_buildInformationWidget（上下文），
),
不透明(
不透明度：CollapasedFoopacity，
孩子：填充(
填充：常量边集。对称（水平：8），
子项：_buildCollapsedInformationWidget（），
),
)
],
),
)
],
),
),
);
}
Widget\u buildInformationWidget（BuildContext上下文）=>ClipRect(
子：溢出框(
maxWidth:double.infinity，
maxHeight:double.infinity，
孩子：FittedBox(
适合：BoxFit.fitWidth，
对齐：对齐.center，
子：容器(
宽度：MediaQuery.of（context）.size.width，
子：列(
crossAxisAlignment:crossAxisAlignment.center，
儿童：[
正文(
“可用余额”，
样式：TextStyle(
尺寸：12，
fontWeight:fontWeight.w900，
颜色：颜色。黑色26），
),
填充物(
填充：仅限常量边集（顶部：16），
孩子：排(
mainAxisAlignment:mainAxisAlignment.center，
crossAxisAlignment:crossAxisAlignment.center，
儿童：[
容器(
宽度：100，
子：文本(
'\$ 11200',
textAlign:textAlign.right，
样式：TextStyle(
fontFamily：“巴洛”，
尺码：18，
fontWeight:fontWeight.w700，
颜色：颜色。绿色[400]），
),
),
正文(
“我”，
样式：TextStyle（字体大小：20，颜色：Colors.black12），
),
容器(
宽度：100，
子：文本(
'\$ 400',
样式：TextStyle(
fontFamily：“巴洛”，
尺码：18，
fontWeight:fontWeight.w700，
颜色：颜色。红色[400]），
),
)
],
),
),
容器(
页边距：仅限边集（左：12，上：12），
对齐：alignment.centerLeft，
子：文本(
“类别”，
样式：TextStyle(
尺寸：12，
fontWeight:fontWeight.w900，
颜色：颜色。黑色26），
),
),
容器(
身高：88，
子项：ListView.builder(
滚动方向：轴水平，
itemCount:categories.length，
itemBuilder：（上下文，索引）{
返回填充(
填充：仅限边缘设置(
左：（ind）
    import 'dart:math';

    import 'package:flutter/material.dart';
    import 'package:flutter/rendering.dart';

    void main() {
      runApp(MyApp());
    }

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: Scaffold(
            body: SafeArea(
              child: MyHomePage(),
            ),
          ),
        );
      }
    }

    class MyHomePage extends StatefulWidget {
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }

    class _MyHomePageState extends State<MyHomePage> {
      @override
      Widget build(BuildContext context) {
        return CustomScrollView(
          slivers: [
            SliverPersistentHeader(
              pinned: true,
              floating: false,
              delegate: DashboardHeaderPersistentDelegate(),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                  (_, i) => Card(
                        margin: EdgeInsets.all(10),
                        child: Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: [
                                Expanded(
                                  flex: 1,
                                  child: Text(i.toString()),
                                ),
                                Expanded(
                                  flex: 3,
                                  child: Text('Text'),
                                ),
                              ],
                            )),
                      ),
                  childCount: 100),
            ),
          ],
        );
      }
    }

    const categories = [
      'Grocieries',
      'Transport',
      'House Rent',
      'Shopping',
      'Career'
    ];
    const categoriesIcons = [
      Icons.ac_unit,
      Icons.access_alarms,
      Icons.dashboard,
      Icons.accessible_forward,
      Icons.backspace,
    ];

    class DashboardHeaderPersistentDelegate extends SliverPersistentHeaderDelegate {
      @override
      Widget build(
          BuildContext context, double shrinkOffset, bool overlapsContent) {
        double shrinkPercentage = min(1, shrinkOffset / (maxExtent - minExtent));

        return Container(
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.blueAccent,
            ),
          ),
          child: Material(
            elevation: 0,
            shadowColor: Colors.white,
            child: SafeArea(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  ConstrainedBox(
                    constraints: BoxConstraints.tightFor(
                      height: max(60, 100 * (1 - shrinkPercentage)),
                    ),
                    child: FittedBox(
                      child: Container(
                        padding: EdgeInsets.all(20),
                        width: 200,
                        child: Text(
                          '\$ 5329.05',
                          style: TextStyle(
                            fontFamily: 'Barlow',
                            fontSize: 30,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ),
                    ),
                  ),
                  Expanded(
                    child: Stack(
                      alignment: Alignment.bottomCenter,
                      children: [
                        if (shrinkPercentage != 1)
                          Opacity(
                            opacity: 1 - shrinkPercentage,
                            child: _buildInformationWidget(context),
                          ),
                        if (shrinkPercentage != 0)
                          Opacity(
                            opacity: shrinkPercentage,
                            child: Padding(
                              padding: const EdgeInsets.symmetric(horizontal: 8),
                              child: _buildCollapsedInformationWidget(),
                            ),
                          )
                      ],
                    ),
                  )
                ],
              ),
            ),
          ),
        );
      }

      Widget _buildInformationWidget(BuildContext context) => ClipRect(
            child: OverflowBox(
              maxWidth: double.infinity,
              maxHeight: double.infinity,
              child: FittedBox(
                fit: BoxFit.fitWidth,
                alignment: Alignment.center,
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        'AVAILABLE BALANCE',
                        style: TextStyle(
                            fontSize: 12,
                            fontWeight: FontWeight.w900,
                            color: Colors.black26),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(top: 16),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: <Widget>[
                            Container(
                              width: 100,
                              child: Text(
                                '\$ 11200',
                                textAlign: TextAlign.right,
                                style: TextStyle(
                                    fontFamily: 'Barlow',
                                    fontSize: 18,
                                    fontWeight: FontWeight.w700,
                                    color: Colors.green[400]),
                              ),
                            ),
                            Text(
                              ' I ',
                              style: TextStyle(fontSize: 20, color: Colors.black12),
                            ),
                            Container(
                              width: 100,
                              child: Text(
                                '\$ 400',
                                style: TextStyle(
                                    fontFamily: 'Barlow',
                                    fontSize: 18,
                                    fontWeight: FontWeight.w700,
                                    color: Colors.red[400]),
                              ),
                            )
                          ],
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(left: 12, top: 12),
                        alignment: Alignment.centerLeft,
                        child: Text(
                          "CATEGORIES",
                          style: TextStyle(
                              fontSize: 12,
                              fontWeight: FontWeight.w900,
                              color: Colors.black26),
                        ),
                      ),
                      Container(
                        height: 88,
                        child: ListView.builder(
                            scrollDirection: Axis.horizontal,
                            itemCount: categories.length,
                            itemBuilder: (context, index) {
                              return Padding(
                                padding: EdgeInsets.only(
                                    left: (index == 0) ? 24.0 : 8.0,
                                    right: (index == categories.length - 1)
                                        ? 24.0
                                        : 8.0),
                                child: _buildCategoryItem(
                                    categoriesIcons[index], categories[index], .9),
                              );
                            }),
                      )
                    ],
                  ),
                ),
              ),
            ),
          );

      Widget _buildCollapsedInformationWidget() => Row(
            children: [
              Text("Recent"),
              Spacer(),
              Container(
                child: Text(
                  '\$ 11200',
                  textAlign: TextAlign.right,
                  style: TextStyle(
                      fontFamily: 'Barlow',
                      fontSize: 14,
                      fontWeight: FontWeight.w700,
                      color: Colors.green[400]),
                ),
              ),
              Text(
                ' I ',
                style: TextStyle(fontSize: 20, color: Colors.black12),
              ),
              Container(
                child: Text(
                  '\$ 400',
                  style: TextStyle(
                      fontFamily: 'Barlow',
                      fontSize: 14,
                      fontWeight: FontWeight.w700,
                      color: Colors.red[400]),
                ),
              )
            ],
          );

      Widget _buildCategoryItem(
              IconData data, String categoryTitle, double percentage) =>
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Stack(
                alignment: Alignment.center,
                children: <Widget>[
                  Container(
                    decoration: BoxDecoration(
                        border: Border.all(width: 1, color: Colors.black12),
                        borderRadius: BorderRadius.circular(28),
                        color: Colors.blue[400]),
                    child: Padding(
                      padding: const EdgeInsets.all(10.0),
                      child: Icon(
                        data,
                        size: 28,
                        color: Colors.white,
                      ),
                    ),
                  ),
                  Container(
                    width: 40,
                    height: 40,
                    child: CircularProgressIndicator(
                      value: percentage,
                      strokeWidth: 2,
                      valueColor: AlwaysStoppedAnimation(Colors.white),
                    ),
                  )
                ],
              ),
              Container(
                width: 72,
                alignment: Alignment.center,
                child: Text(categoryTitle,
                    overflow: TextOverflow.ellipsis,
                    textAlign: TextAlign.center,
                    maxLines: 1,
                    style: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.w400,
                        color: Colors.black45)),
              )
            ],
          );

      @override
      double get maxExtent => 300;

      @override
      double get minExtent => 80;

      @override
      bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true;
    }