Aplicacions amb Flutter, Dart i Flame

Fem servir una indicació visual del jugador

Amb el que hem fet fins ara, no és segur que les persones que estan participant en el joc tinguin clar qui és el jugador 1 i qui el 2. Seria preferible fer servir una indicació més visual. El que farem és mostrar una fitxa en lloc del número del jugador. Atès que es mostrarà al costat del text, les fitxes del joc es veurien una mica massa grosses; convindria posar-hi una fitxa més petita. El primer que farem és modificar el giny de la fitxa per tal que es pugui indicar de quina mida la volem.

fitxa.dart

import 'package:flutter/material.dart';
import 'package:tres_linia/core/colors.dart';

class Fitxa extends StatefulWidget {
  final int estatAct;
  final int mida;
  const Fitxa({super.key, required this.estatAct, required this.mida});

  @override
  State<Fitxa> createState() => _FitxaState();
}

class _FitxaState extends State<Fitxa> {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: ColorsApp.colsFitxes[widget.estatAct],
        borderRadius: BorderRadius.circular((widget.estatAct == 2) ? widget.mida/2 : 0)
      ),
      child: SizedBox(
        height: widget.mida.toDouble(),
        width: widget.mida.toDouble(),
        child: Text(""),
      ),
    );
  }
}

Ara caldrà modificar la casella per afegir la mida de la fitxa.

casella.dart

import 'package:flutter/material.dart';
import 'package:tres_linia/components/fitxa.dart';
import 'package:tres_linia/core/colors.dart';

class Casella extends StatefulWidget {
  final int posX;
  final int posY;
  final int estAct;
  final Function() posaFitxa;
  const Casella({super.key, required this.posX, required this.posY, 
    required this.estAct, required this.posaFitxa});

  @override
  State<Casella> createState() => _CasellaState();
}

class _CasellaState extends State<Casella> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 30, bottom: 20, left: 8, right: 8),
      child: Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: ColorsApp.component,
          borderRadius: BorderRadius.circular(20)
        ),
        child: Padding(
          padding: const EdgeInsets.all(25.0),
          child: GestureDetector(
            onTap: () {
              setState(() {
                widget.posaFitxa();
              });
            },
            child: Fitxa(estatAct: widget.estAct, mida: 40)
          )
        )
      ),
    );
  }
}

A la pantalla principal, posarem el text indicatiu dins d'una Filera, en la qual afegirem la versió petita de la fitxa.

pant_principal.dart

import 'package:flutter/material.dart';
import 'package:tres_linia/components/casella.dart';
import 'package:tres_linia/components/fitxa.dart';
import 'package:tres_linia/core/estils.dart';

class PantPral extends StatefulWidget {
  const PantPral({super.key});

  @override
  State<PantPral> createState() => _PantPralState();
}

class _PantPralState extends State<PantPral> {
  List<List<int>> estatCaselles = [[0, 0, 0], [0, 0, 0], [0, 0, 0]];
  int jugadorActual = 1;  // Comença el jugador 1
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          height: 20,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              "Tira:",
              style: Estils.estilTextInfo
            ),
            SizedBox(
              width: 20,
            ),
            Fitxa(estatAct: jugadorActual, mida: 25)
          ],
        ),
        for(int i = 0; i < 3; i++) filera(i),
        Expanded(child: Text(" "))
      ],
    );
  }

  Row filera(int pY) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        for(int i = 0; i < 3; i++) Casella(posX: i, posY: pY, estAct: estatCaselles[pY][i],
          posaFitxa: () {
            setState(() {
              if(estatCaselles[pY][i] == 0) {
                estatCaselles[pY][i] = jugadorActual;
                if(jugadorActual == 1) {
                    jugadorActual = 2;
                } else {
                  jugadorActual = 1;
                }
              }
            });
          },
        ),
      ],
    );
  }
}

Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.