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

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