Overlap SliverList children in Flutter

Question

Based on this design:

I am trying to use SliverList with SliverAppBar but I can't seem to overlap the items so when the top left and top right radius are applied the color of the previous item is present. It's similar to this other post: How to overlap SliverList on a SliverAppBar

But I'm trying to apply the Stack to all SliverList children. The best I accomplished so far is a workaround where I wrap the item in another Container and apply the previous background color:

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      title: Text('Test'),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            child: Container(
              child: Column(
                children: <Widget>[
                  Container(
                    child: Text(
                      'Index is $index'.toUpperCase(),
                    ),
                    alignment: Alignment.centerLeft,
                    padding: EdgeInsets.only(bottom: 10.0),
                  ),
                  Container(height: 200.0)
                ],
              ),
              constraints: BoxConstraints.tightForFinite(width: 200),
              decoration: BoxDecoration(
                color:
                    index % 2 == 0 ? Color(0XFF45766E) : Color(0XFFECB141),
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(40.0),
                  topRight: Radius.circular(40.0),
                ),
              ),
              padding: EdgeInsets.only(
                left: 20.0,
                top: 10.0,
              ),
            ),
            decoration: BoxDecoration(
              color: index % 2 == 0 ? Color(0XFFECB141) : Color(0XFF45766E),
            ),
          );
        },
      ),
    ),
  ],
);

Thank you!

Can you please add a video clip of what you want to do? – Josteve Apr 02 '20 at 23:48 — Josteve, Apr 02 '20 at 23:48

score 2 · Answer 1 · answered Apr 05 '20 at 04:09

CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: Text('Test'),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  child: Container(
                    child: Column(
                      children: <Widget>[
                        Container(
                          child: Text(
                            'Index is $index'.toUpperCase(),
                          ),
                          alignment: Alignment.centerLeft,
                          padding: EdgeInsets.only(bottom: 10.0),
                        ),
                        Container(height: 200.0)
                      ],
                    ),
                    constraints: BoxConstraints.tightForFinite(width: 200),
                    decoration: BoxDecoration(
                      color: index % 2 == 0
                          ? Color(0XFF45766E)
                          : Color(0XFFECB141),
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(40.0),
                        topRight: Radius.circular(40.0),
                      ),
                    ),
                    padding: EdgeInsets.only(
                      left: 20.0,
                      top: 10.0,
                    ),
                  ),
                  decoration: BoxDecoration(
                    //the only change required here
                    color: index % 2 == 0
                        ? index == 0 ? Colors.white : Color(0XFFECB141)
                        : Color(0XFF45766E),
                  ),
                );
              },
            ),
          ),
        ],
      );

You just need to change explicitly for the first position.

This only works as a workaround, what I am trying to accomplish may be better explained with a comparison: the same way you can use the child builder to create an infinite list of items without explicitly saying how much (unless you use `childCount`), I want to infinitely create a list of custom widgets that are slightly overposed on top of each other, without specifying the height of the parent `Container` and without using the workaround. what I am actually trying to accomplish is to stack the list's children inside the delegate. If positioned is used then it needs an explicit height. — tevvek, Apr 06 '20 at 12:46

score 0 · Answer 2 · answered Apr 06 '20 at 09:36

CustomScrollView->
  SliverList->
    SliverChildBuilderDelegate->
      Container->
        Stack->children[
          Container, 
          positioned(bottom:0, 
            child: Container(decoration: BoxDecoration(
                      color: (next index color),
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(40.0),
                        topRight: Radius.circular(40.0),
                      ),
                    ),)
          )
        ]

Does this work? Because it's similar to something I did but the use of specific positioning e.g. `bottom: 0` breaks the code 'cause it needs to know the height it can grow up to as it tends to do so infinitely. — tevvek, Apr 06 '20 at 12:52

Overlap SliverList children in Flutter

2 Answers2