Как сделать вертикальную стопку карт в флаттер?

Question

Я пытаюсь создать этот дизайн с накоплением списка, но не могу сделать отрицательное заполнение во флаттере, поэтому мне нужен другой способ достижения этого эффекта перекрытия.

Answer 1

Это просто для того, чтобы дать вам представление.

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),
            ),
          ),
        );
      },
    ),
  );
}

Answer 2

Вы можете использовать Stack и Positioned (зная высоту карт). Как это:

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,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Я рекомендую создать отдельный виджет, чтобы избежать дублирования кода и, возможно, заполнить его из списка. Я просто даю идею.

Конечный результат