如何解决 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)
        ),
      ),
     ],