Aplicacions amb Flutter, Dart i Flame

Tutorial Flutter Flame Projectes   Recursos CITCEA
Exemples Dart Dades pràctiques     Inici

Indicació de quin jugador tira

Ara anirem millorant l'aplicació per passos. Començarem per posar a qui li toca tirar. De moment, afegirem un text entre el taulell i la barra de l'aplicació.

pant_principal.dart
import 'package:flutter/material.dart';
import 'package:tres_linia/components/casella.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,
        ),
        Text(
          "Tira: $jugadorActual",
          style: Estils.estilTextInfo
        ),
        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;
                }
              }
            });
          },
        ),
      ],
    );
  }
}

Per definir l'estil del text, recuperarem el fitxer que havíem creat a la carpeta core en un pas anterior, però més endavant vam deixar d'utilitzat, i l'adaptarem.

estils.dart
import 'package:flutter/material.dart';
import 'package:tres_linia/core/colors.dart';
class Estils {
  static const TextStyle estilTextInfo = TextStyle(
    color: ColorsApp.text,
    fontSize: 30,
    fontWeight: FontWeight.bold,
  );
}

 

 

 

 

 

 

 

 

 

 

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