Aplicacions amb Flutter, Dart i Flame

Canvi de propietats segons una variable

Sovint ens interessarà que alguna propietat d'un element canviï segons l'estat d'una variable. Per fer-ho, cal emprar l'operador ternari; ja que no és possible fer-ho amb un if normal.

Imaginem la següent classe. Volem que el color de fons del text depengui del valor d'una variable, que anomenarem actiu.

import 'package:flutter/material.dart';

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

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

class _SeleccioState extends State<Seleccio> {
  @override
  Widget build(BuildContext context) {
    return 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: Colors.green,
          ),
        ),
      ],
    );
  }
}

Podem fer:

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 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,
          ),
        ),
      ],
    );
  }
}

Els canvis s'han marcat en color.

Si volem que sigui el propi botó qui canviï el seu estat, podem incloure'l dins d'un detector d'accions:

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,
            ),
          ),
        ],
      ),
    );
  }
}

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