How can I position a widget outside its container in a horizontal list with overflow in Flutter?

Question

This is the desired result.

What I have tried:

Container(
        height: 60,
        child: ListView.separated(
          scrollDirection: Axis.horizontal,
          itemCount: 7,
          separatorBuilder: (context, index) => SizedBox(
            width: 5,
          ),
          itemBuilder: (context, index) {
            if (index == 0) {
              return Stack(
                clipBehavior: Clip.none,
                children: [
                  Container(
                    width: 60,
                    color: Colors.blueAccent,
                  ),
                  Positioned(
                    left: 25,
                    bottom: -25,
                    child: Container(
                      child: Text(
                        'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
                      ),
                      color: Colors.amberAccent,
                      height: 30,
                    ),
                  ),
                ],
              );
            } else {
              return Container(
                width: 60,
                color: Colors.blueAccent,
              );
            }
          },
        ),
      ),

This is what it looks like with no horizontal scroll (less than 7 itemcount). This is what it looks like with horizontal scroll.

How to position the text outside of the stack while in front of the other widgets?

Solution

I hope this works for you.

Make sure overflow property of Stack = Overflow.visible else the overflowed part of the container gets clipped.

height of child component=60
height of tooltip=20
positioned at bottom 0 placing it at bottom of the parent. Be careful with the sizes.

       return SizedBox(
      height: 70,
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Stack(
          overflow: Overflow.visible,
          children: [
            Row(
              children: [
                //build your children here..
                Container(
                  margin: EdgeInsets.only(left: 12),
                  width: 60,
                  height: 60,
                  color: Colors.blueAccent,
                ),
                Container(
                  margin: EdgeInsets.only(left: 12),
                  width: 60,
                  height: 60,
                  color: Colors.blueAccent,
                ),
                Container(
                  margin: EdgeInsets.only(left: 12),
                  width: 60,
                  height: 60,
                  color: Colors.blueAccent,
                ),
                Container(
                  margin: EdgeInsets.only(left: 12),
                  width: 60,
                  height: 60,
                  color: Colors.blueAccent,
                ),
                Container(
                  margin: EdgeInsets.only(left: 12),
                  width: 60,
                  height: 60,
                  color: Colors.blueAccent,
                ),
              ],
            ),
            //build the tooltip here.
            Positioned(
              left: 25,
              bottom: 0,
              child: Container(
                child: Text(
                  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
                ),
                color: Colors.amberAccent,
                height: 20,
              ),
            ),
          ],
        ),
      ),
    );