Aplicacions amb Flutter, Dart i Flame

Definim les fitxes i l'estat de les caselles (versió amb ginys)

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.

Les fitxes les crearem en un altre fitxer, que també posarem a la carpeta components. Podem fer servir un giny per representar les fitxes, en concret una contenidor. Aquest contenidor tindrà colors diferents segons el jugador; però, a més, li canviarem la forma per facilitar-ne la distinció per a les persones que tenen dificultats per percebre tots els colors. En principi els contenidors són caixes rectangulars, però poden tenir les vores arrodonides. En el cas del jugador 1 posarem un radi de curvatura nul, de manera que tindrem els costats formant angles rectes (rectangle). En el cas del jugador 2 farem que el radi de curvatura sigui prou gran com perquè la fitxa es mostri com un cercle.

El contenidor requereix tenir alguna cosa dintre. Hi podríem posar un text; però, per assegurar que tots tenen la forma i la mida desitjades, hi posarem una caixa quadrada. La caixa també requereix un contingut, que pot ser un text buit.

fitxa.dart

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

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

  @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) ? 20 : 0)
      ),
      child: SizedBox(
        height: 40,
        width: 40,
        child: Text(""),
      ),
    );
  }
}

La casella contindrà la fitxa dins d'un farciment.

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;
  const Casella({super.key, required this.posX, required this.posY, required this.estAct});

  @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: Fitxa(estatAct: widget.estAct)
        )
      ),
    );
  }
}

En l'apartat anterior havíem creat un estil per al text de les caselles, que ara deixa de ser necessari; més endavant el recuperarem per a altres usos.

En la casella el color depèn de l'estat de la casella. Ens falta afegir la llista de colors que farem servir. Per al jugador 1 hem posat el cian, per al jugador 2 el groc i per a la casella buida (valor 0) hem indicat un color transparent; així es veurà la casella però no el contenidor.

colors.dart

import 'dart:ui';

class ColorsApp {
  static const Color fons = Color(0xFF000000);
  static const Color primari = Color(0xFF444444);
  static const Color text = Color(0xFFFFFFFF);
  static const Color component = Color(0xFF531C00);
  static const List<Color> colsFitxes = [
    Color(0x00FFFFFF),  // transparent
    Color(0xFF00FFFF),  // cian
    Color(0xFFFFFF00),  // groc
  ];
}

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