Flutter SliverList 在 SliverAppBar 上重叠

Question

I'm trying to overlap a SliverList a few pixels over the SliverAppBar . I'd like the image in the FlexibleSpaceBar to go under the radius of my SliverList . I can only get the radius. Without the ability to overlap the SliverList onto the SliverAppBar .

return CustomScrollView(
      physics: BouncingScrollPhysics(),
      slivers: [
        SliverAppBar(
          backgroundColor: Colors.transparent,
          elevation: 0.0,
          expandedHeight: getProportionateScreenHeight(350),
          automaticallyImplyLeading: false,
          pinned: true,
          stretch: true,
          leading: Container(
            padding: EdgeInsets.fromLTRB(8.0, 8.0, 0.0, 0.0),
            child: SizedBox(
              height: getProportionateScreenWidth(40),
              width: getProportionateScreenWidth(40),
              child: FlatButton(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(60),
                ),
                color: Colors.white,
                padding: EdgeInsets.zero,
                child: Icon(Icons.arrow_back_ios),
                onPressed: () => Navigator.pop(context),
              ),
            ),
          ),
          actions: <Widget>[
            Container(
              padding: EdgeInsets.fromLTRB(0.0, 8.0, 8.0, 0.0),
              child: SizedBox(
                height: getProportionateScreenWidth(40),
                width: getProportionateScreenWidth(40),
                child: FlatButton(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(60),
                  ),
                  color: Colors.white,
                  padding: EdgeInsets.zero,
                  child: Icon(Icons.more_vert),
                  onPressed: () {}
                ),
              ),
            ),
          ],
          flexibleSpace: FlexibleSpaceBar(
            //title: Text(_event.Title),
            centerTitle: true,
            stretchModes: [
              StretchMode.zoomBackground
            ],
            background: Stack(
              fit: StackFit.expand,
              children: <Widget>[
                Image.asset('assets/images/events/sunset.jpg', fit: BoxFit.cover),
                DecoratedBox(
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment(0.0, 0.5),
                      end: Alignment(0.0, 0.0),
                      colors: <Color>[
                        Color(0x60000000),
                        Color(0x00000000),
                      ],
                    ),
                  ),
                ),
              ]
            )
          )
        ),
        SliverList(
          delegate: SliverChildListDelegate([
            Column(
              children: [
                Container(
                  padding: EdgeInsets.only(top: getProportionateScreenHeight(20), bottom: getProportionateScreenHeight(100)),
                  child: EventDescription(event: _event),
                  decoration: BoxDecoration(
                    color: Color(0xFFF5F6F9),
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(40),
                      topRight: Radius.circular(40),
                    ),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.withOpacity(0.5),
                        spreadRadius: 5,
                        blurRadius: 7,
                        offset: Offset(0, 0), // changes position of shadow
                      ),
                    ],
                  )
                ),
              ],
            )
          ]),
        )
      ]
    );

Answer 1

Would you like to use a workaround solution? My solution is put the top part of the SliverList inside SliverAppBar .

The only problem is that the fade out animation of flexiable space (while scrolling down) do effect to the top bar. (Because it is in the flexibleSpace )

Due to SliverAppBar elevation is higher than SliverList . Any Scale or Translate to the widget always get the opposite result from your expected (SliverAppBar overlap on SliverList).

I use stack to put the top part inside FlexibleSpaceBar, set collapseMode to CollapseMode.pin and set alignment to Alignment.bottomCenter :

SliverAppBar(
  ...
  flexibleSpace: FlexibleSpaceBar(
    collapseMode: CollapseMode.pin,
    ...
    background: Stack(
      ...
      children: [
        ...
        Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            child: Container(
              height: _height, // 40
            ),
            decoration: BoxDecoration(
              color: Color(0xFFF5F6F9),
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(40),
                topRight: Radius.circular(40),
              ),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.5),
                  spreadRadius: 5,
                  blurRadius: 7,
                  offset: Offset(0, 0), // changes position of shadow
                ),
              ],
            ),
          ),
        ),
      ]
     ...

If you need to use collapseMode: CollapseMode.parallax like the default setting do, the _height need to be dynamical during scrolling.

void initState(){
  _scrollController = ScrollController()..addListener(() {
    setState(() {
      _height = math.max(_scrollController.offset*_topBarFactor +_topBarHeight,_topBarHeight);
    });
}
});