Trying to build horizontal scrollable ListView

Question

I want to build a horizontal scrollable ListView with 2 containers on top of each other. The idea is to build something like this:

My idea for this is to be a SizedBox with ListView builder child. However, I cannot find how to stack those 2 containers on the top of each other. Should I be using Stack widget or something else? A guidance here would be very appreciated.

This is where I'm so far:

SizedBox(
  height: deviceWidth * 0.55,
  child: ListView.builder(
    shrinkWrap: true,
    scrollDirection: Axis.horizontal,
    itemCount: 15,
    itemBuilder: (BuildContext context, int index) => Card(
        child: Stack(
      alignment: AlignmentDirectional.center,
      children: [
        Container(color: whitePrimary),
        Container(
          color: Colors.purple,
        )
      ],
    )),
  ),
),

Where my goal was to display 2 containers on top of each other, just to test out the Stack Widget, but without success..

In the code above, the deviceHeight property is:

Size size = MediaQuery.of(context).size;

double deviceHeight = size.height;

Answer 1

try this

SizedBox(
          height: 100,
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: 4,
            itemBuilder: (context, index) {
              return Stack(children: [
                Container(
                  height: 150,
                  width: 120,
                  margin: EdgeInsets.symmetric(horizontal: 3),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10)),
                ),
                Container(
                  height: 100,
                  width: 120,
                  margin: EdgeInsets.symmetric(horizontal: 3),
                  decoration: BoxDecoration(
                      color: Colors.purpleAccent,
                      borderRadius: BorderRadius.circular(10),
                      boxShadow: [
                        BoxShadow(
                            color: Colors.black,
                            offset: Offset(0, 5),
                            blurRadius: 10)
                      ]),
                )
              ]);
            },
          ),
        )