Как отображать карты на доске (для карточной игры)?

Я внедряю телефонное приложение для игры в UNO с использованием флаттера (и дротика), и я застрял в том, как мне отображать карты на доске. Это дерьмо, я бы хотел, чтобы мой код выглядел так: введите описание изображения здесь и вот как выглядит мой код: введите описание изображения здесь

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

Заранее спасибо.

flutter dart

20.03.2022 13:47

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Для этого вы можете использовать виджет Stack(). Начните с предоставления clipBehaviour:Clip.none, который поможет переполнить карты, когда вы складываете их несколько.

Затем используйте виджет Positioned(), чтобы сдвинуть их влево, используя свойство под названием left: 50 (или любое другое число). Это сдвинет карты влево.

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