How to display cards on a board (for a card game)? - flutter

Question

I'm implementing a phone app for playing UNO using flutter (and dart), and I'm stuck with how I should display the cards on the board.
This is what I would like my code to look like
and this is what my code result looks like.
import 'package:flutter/material.dart';
import 'card.dart';
class Partida extends StatefulWidget {
const Partida({ Key? key }) : super(key: key);
#override
State<Partida> createState() => _PartidaState();
}
class _PartidaState extends State<Partida> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color.fromARGB(255, 19, 107, 22),
body: Center(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
MyCard(),
MyCard(),
],
),
// MyCard(),
// Row(
// mainAxisAlignment: MainAxisAlignment.center,
// children: [
// // MyCard(),
// MyCard(),
// ]
// ),
],
),
),
),
);
}
}
Thanks in advance.

Answer 1

You can use the Stack() widget to achieve this. Start by giving clipBehaviour:Clip.none which will help overflow the cards when u stack multiple of them.
Then use the Positioned() widget to make them shift to left using property called left: 50 (or whatever your preferred number). This will shift the cards to left.
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Stack(
clipBehavior: Clip.none,
alignment: AlignmentDirectional.bottomCenter,
children: const [
ColoredBox(
color: Colors.red,
child: SizedBox(
height: 100,
width: 80,
),
),
Positioned(
left: 50,
bottom: 0,
child: ColoredBox(
color: Colors.green,
child: SizedBox(
height: 100,
width: 80,
),
),
),
Positioned(
left: 100,
bottom: 0,
child: ColoredBox(
color: Colors.blue,
child: SizedBox(
height: 100,
width: 80,
),
),
),
Positioned(
left: 150,
bottom: 0,
child: ColoredBox(
color: Colors.yellow,
child: SizedBox(
height: 100,
width: 80,
),
),
),
],
);
}
}
Output