how to make vertical stack of cards in flutter?

Question

I'm trying to make this design of stacked list, but can't make negative padding in flutter so i need another way to achieve this overlapping effect.

Answer 1

You can use a Stack and Positioned (knowing the height of the cards). Like this:

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Stack(
        children: <Widget>[
          Positioned(
            bottom: 150.0,
            left: 0.0,
            right: 0.0,
            child: Card(
              margin: EdgeInsets.zero,
              elevation: 3.0,
              color: Colors.red,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(30.0)),
              ),
              child: Container(
                width: double.infinity,
                height: 200.0,
              ),
            ),
          ),
          Positioned(
            bottom: 50.0,
            left: 0.0,
            right: 0.0,
            child: Card(
              margin: EdgeInsets.zero,
              elevation: 3.0,
              color: Colors.blue,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(30.0)),
              ),
              child: Container(
                width: double.infinity,
                height: 200.0,
              ),
            ),
          ),
          Positioned(
            bottom: -50.0,
            left: 0.0,
            right: 0.0,
            child: Card(
              margin: EdgeInsets.zero,
              elevation: 3.0,
              color: Colors.orange,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(30.0)),
              ),
              child: Container(
                width: double.infinity,
                height: 200.0,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

I recommend making a separated widget to avoid code duplication, and maybe populating from a List. I'm just giving the idea behind.

Final result

Answer 2

This is just to give you an idea.

List<Color> _colors = [Colors.orange, Colors.blue, Colors.green];

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: ListView.builder(
      itemCount: 10,
      itemBuilder: (context, index) {
        return Container(
          height: 100,
          alignment: Alignment.center,
          child: Text("Item ${index}"),
          decoration: BoxDecoration(
            color: _colors[index % 3],
            boxShadow: [BoxShadow(color: Colors.black, blurRadius: 10, spreadRadius: 5)],
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(40),
              topRight: Radius.circular(40),
            ),
          ),
        );
      },
    ),
  );
}