flutter - 颤动卡片的末端以粘在顶部

Question

我有一张卡片，里面有一些小部件，最后有一个按钮可以让我回到顶部。当我进一步向下滚动时，我希望此按钮固定在屏幕顶部。

多亏了这个答案，我才能实现它，但是看起来很糟糕，而且可能效率低下（实际上，当我添加所有小部件时，应用程序的反应似乎很慢）。

我希望卡片实际上表现得像一张卡片：删除内部阴影，在卡片周围添加一些填充，并删除我当前使用的 SliverAppBar 的背景。考虑到我对 Flutters 中的 slivers 很陌生，实现目标的最佳方法是什么？

final keyUp = GlobalKey();
final keyDown = GlobalKey();

final moveDown = TextButton(
  key: keyUp,
  onPressed: () => Scrollable.ensureVisible(
    keyDown.currentContext,
    duration: Duration(milliseconds: 250)),
  child: Text("Move down"),
);

final cardTopHalf = Card(
  color: Colors.white,
  elevation: 10,
  margin: EdgeInsets.only(
    bottom: 0.0,
  ),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(_borderRadius),
      topRight: Radius.circular(_borderRadius),
      bottomLeft: Radius.zero,
      bottomRight: Radius.zero,
    ),
  ),
  child: SafeArea(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Text("Widget 1", style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
        Text("Widget 1.1", style: TextStyle(fontSize: 16)),
        Text("Widget 1.2", style: TextStyle(fontSize: 16)),
        Text("Widget 1.3", style: TextStyle(fontSize: 16)),
        Divider(height: 30),
        Text("Widget 2", style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
        Text("Widget 2.1", style: TextStyle(fontSize: 16)),
        Text("Widget 2.2", style: TextStyle(fontSize: 16)),
      ],
    ),
  ),
);

final cardBottomHalf = Card(
  color: Colors.white,
  elevation: 10,
  margin: EdgeInsets.only(
    top: 0.0, bottom: 0.0,
  ),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
      topLeft: Radius.zero,
      topRight: Radius.zero,
      bottomLeft: Radius.circular(_borderRadius),
      bottomRight: Radius.circular(_borderRadius),
    ),
  ),
  child: TextButton(
    child: Text("To the top"),
    onPressed: () => Scrollable.ensureVisible(
        keyUp.currentContext,
        duration: Duration(milliseconds: 250)),
  ),
);

return CustomScrollView(
  slivers: <Widget>[
    SliverToBoxAdapter(
      child: moveDown,
    ),
    SliverToBoxAdapter(
      child: cardTopHalf,
    ),
    SliverAppBar(
      pinned: true,
      flexibleSpace: cardBottomHalf,
      toolbarHeight: 60.0,
      backgroundColor: Colors.red,
    ),
    SliverAnimatedList(
      key: keyDown,
      itemBuilder: (_, index, ___){
        return ListTile(
          title: Text(index.toString()),
        );
      },
      initialItemCount: 100,
    )
  ],
);