Aplicacions amb Flutter, Dart i Flame

Detector d'accions

Els detectors d'accions són uns ginys que són capaços de detectar la interacció de l'usuari amb el seu contingut. És capaç de detectar molts tipus d'accions diferents. Perquè funcioni com un botó, farem servir l'opció onTap.

Sí, per exemple, tenim un text que pot canviar de propietats segons una variable, el podem posar dins d'un detector d'accions per fer que en picar-lo es provoqui el canvi. Perquè funcioni en prémer el text, escollirem el gest onTap i donarem contingut a la seva funció.

Les funcions que provoquen canvis en el programa s'han de posar dins un bloc setState, que força al sistema a estar-ne pendent. En cas contrari, es detectaria el toc però no actuaria perquè no s'actualitzaria el giny.

Fixem-nos que en l'exemple següent hem posat tota la columna dins del detector d'accions. A la columna hi ha dos textos i, per tant, el fons del segon text canviarà de color tant si es pica un dels textos (magrat digui que no se'l premi) o l'altre. Això permet, per exemple que puguem fer un element amb un text i una icona i que es produeixi l'acció en picar en l'un, en l'altra o en una zona de l'element que no tingui res.

import 'package:flutter/material.dart';

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

  @override
  State<Seleccio> createState() => _SeleccioState();
}

class _SeleccioState extends State<Seleccio> {
  bool actiu = false;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          actiu = !actiu;
        });
      },
      child: Column(
        children: [
          SizedBox(height: 30),
          Text(
            "No premis!",
            style: TextStyle(
              fontSize: 20,
              color: Colors.white,
              backgroundColor: Colors.red,
            ),
          ),
          Text(
            "Prem...",
            style: TextStyle(
              fontSize: 20,
              color: Colors.white,
              backgroundColor: actiu == true ? Colors.blue : Colors.green,
            ),
          ),
        ],
      ),
    );
  }
}

Podeu trobar totes les accions disponibles al web de Flutter.

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