how to fix a stack of cards layout issue in flutter

Question

I'm trying to make all the cards look like they are stack together but I'm not sure why my code it's not working. Right now all the cards are behind each other but I want to look like the design below. I try to adjust behind card by increase the height but some reasons it's still not working. Any suggestion will be really appreciated.

    Widget _buildStackedCards(App app) {
    return Stack(
      key: Key(app.name + "Stack"),
      children: <Widget>[
      Container(
        height: 153,
        child: SingleChildScrollView(
          child: CardWidget(title: "Title 1", tileItems: brandListMock)
        ),
      ),
      Container(
        height: 150,
        child: SingleChildScrollView(
          child: CardWidget(title: "Title 2", tileItems: fleetDeliveriesListMock)
        ),
      ),
      Container(
        height: 180,
        child: SingleChildScrollView(
          child: CardWidget(title: "Title 3", tileItems: regionListMock)
        ),
      ),
      ],
    );
  }

I want my cards to stack together like this

Answer 1

You must use Positioned widget to position the widgets:)

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    var app = MaterialApp(
      debugShowCheckedModeBanner: true,
      home: Scaffold(
        backgroundColor: Colors.white60,
        body: SafeArea(
          child: Stack(
            children: <Widget>[
              getCard(4),
              getCard(3),
              getCard(2),
              getCard(1),
            ],
          ),
        ),
      ),
    );

    return app;
  }

  Widget getCard(int index) {
    return Positioned(
        top: 20.0 * index,
        left: 15,
        right: 15,
        child: Container(
          height: 153,
          child: SingleChildScrollView(
              child: Container(
            height: 100,
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius:
                    BorderRadius.circular(8),
                boxShadow: [
                  BoxShadow(
                    color: Color.fromRGBO(
                        0, 64, 101, 0.15),
                    spreadRadius: 1,
                    blurRadius: 8,
                    offset: Offset(0,
                        2), // changes position of shadow
                  ),
                ]),
            child: Center(child: Text("Cards")),
          )),
        ));
  }
}

Answer 2

You should have the widget with the largest height first in the list of the Stack 's children.

This is because

the stack paints its children in order with the first child being at the bottom. Source

So your code should be changed to:

 children: <Widget>[
      Container(
        height: 180,
        child: SingleChildScrollView(
          child: CardWidget(title: "Title 3", tileItems: regionListMock)
        ),
      ),

      Container(
        height: 153,
        child: SingleChildScrollView(
          child: CardWidget(title: "Title 1", tileItems: brandListMock)
        ),
      ),
      Container(
        height: 150,
        child: SingleChildScrollView(
          child: CardWidget(title: "Title 2", tileItems: fleetDeliveriesListMock)
        ),
      ),
     ],