Collapsible Toolbar with Tabbar and Raised Button

问题

I would like to create a collapsible toolbar with TabBar. I'm trying to overlap the button between the collapsible toolbar and the tabbar. The button has to vanish along with the image while scrolling upwards.

class Refurb extends StatefulWidget {
  @override
  _MainCollapsingToolbarState createState() => _MainCollapsingToolbarState();
}

class _MainCollapsingToolbarState extends State<Refurb> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: DefaultTabController(
        length: 2,
        child: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                expandedHeight: 275.0,
                floating: false,
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                    centerTitle: true,
                    background: Stack(
                      alignment: Alignment.center,
                      children: [
                        Column(
                          children: [
                            Image.network(
                              "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
                              fit: BoxFit.fill,
                            ),
                            SizedBox(
                              height: 25,
                            )
                          ],
                        ),
                        RaisedButton(
                          onPressed: () {},
                          child: Text("sample button"),
                        ),
                      ],
                    ),
                    title: Column(
                      children: [
                        Text("Collapsing Toolbar",
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 16.0,
                            ))
                      ],
                    )),
              ),
              SliverPersistentHeader(
                delegate: _SliverAppBarDelegate(
                  TabBar(
                    labelColor: Colors.black87,
                    unselectedLabelColor: Colors.grey,
                    tabs: [
                      Tab(text: "Tab 1"),
                      Tab(text: "Tab 2"),
                    ],
                  ),
                ),
                pinned: true,
              ),
            ];
          },
          body: Center(
            child: Text("Sample text"),
          ),
        ),
      ),
    );
  }
}

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate(this._tabBar);

  final TabBar _tabBar;

  @override
  double get minExtent => _tabBar.preferredSize.height;
  @override
  double get maxExtent => _tabBar.preferredSize.height;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return new Container(
      child: _tabBar,
    );
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return false;
  }
}

The problem is that,

The RaisedButton is not in the overlapping at the bottom center of the collapsible toolbar's image.
The inset overflows while scrolling downwards.

what am I missing?

来源：https://stackoverflow.com/questions/61272312/collapsible-toolbar-with-tabbar-and-raised-button

标签

Flutter

animation

dart

tabbar