Aplicacions amb Flutter, Dart i Flame

Definim les fitxes i l'estat de les caselles (versió amb símbols)

Necessitarem algun tipus de variable que ens permeti guardar la informació de cada casella, és a dir si està lliure o ocupada i per quin jugador. Atès que el taulell és una quadrícula, farem servir una estructura matricial (llista de llistes); que definirem a la pantalla principal. En el moment de començar, en el programa definitiu, aquesta matriu haurà de tenir només zeros; però ara la iniciarem amb valors variats, per poder veure com es mostren les fitxes. Un 0 representarà la casella buida, un 1 una fitxa del primer jugador i un 2 una del segon jugador.

La funció Casella haurà de saber com està aquella casella; per tant, li haurem de passar l'estat com a paràmetre.

pant_principal.dart

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

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

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

class _PantPralState extends State<PantPral> {
  List<List<int>> estatCaselles = [[0, 1, 2], [2, 0, 1], [1, 2, 0]];
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          height: 20,
        ),
        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]),
        ],
      );
  }
}

Ens cal que la funció Casella mostri les fitxes a cada una de les caselles. Podríem fer servir lletres (A, B) o xifres (1, 2) per representar les fitxes dels jugadors, però quedarà molt millor si ho fem de manera gràfica. Podem agafar un parell de símbols Unicode per representar les fitxes. En aquest cas, he, triat aquest 🔵 i aquest 🔶, dos símbols prou diferents en forma i color per facilitar-ne la distinció a les persones que tenen dificultats per percebre tots els colors. Els símbols van dins d'un bloc de text que hem situat dins d'un centrat, per tal que la fitxa es situï al mig, i aquest dins d'una caixa quadrada amb mida definida, que obliga a que totes les caselles siguin de les mateixes dimensions.

casella.dart

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

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

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

class _CasellaState extends State<Casella> {
  List <String> fitxes = [" ", "🔵", "🔶"];
  @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: SizedBox(
            height: 40,
            width: 40,
            child: Center(
              child: Text(
                fitxes[widget.estAct],
                style: Estils.estilTextCaselles,
              ),
            ),
          ),
        )
      ),
    );
  }
}

En l'apartat anterior havíem creat un estil per al text de les caselles, que ara es pot simplificar; ja que la negreta i el color no tenen efecte sobre els símbols Unicode que estem emprant.

estils.dart

import 'package:flutter/material.dart';

class Estils {
  static const TextStyle estilTextCaselles = TextStyle(
    //color: ColorsApp.text,
    fontSize: 30,
    //fontWeight: FontWeight.bold,
  );
}

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