Aplicacions amb Flutter, Dart i Flame

Fem que l'usuari pugui canviar entre text i gràfic

Ara afegirem un interruptor a la barra superior que ens permetrà mostrar, segons la posició el text o el gràfic de columnes.

Creem la variable _grafic que serà la que ho controlarà. A la part superior hi crearem una filera que contindrà el botó que ja teníem i el nou interruptor, que anirà acompanyat d'un text que indiqui la seva finalitat. En aquest cas, separarem el botó i l'interruptor amb un espaiador; per tal que quedin un a cada costat de la pantalla. A l'hora de mostrar els resultats, cridarem una o altra funció segons la posició de l'interruptor.

pant_principal.dart

import 'package:flutter/material.dart';
import 'package:sheets/core/colors.dart';
import 'package:sheets/data/crida_dades.dart';
import 'package:sheets/data/dades_rebudes.dart';

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

  @override
  State<PantPrincipal> createState() => _PantPrincipalState();
}

class _PantPrincipalState extends State<PantPrincipal> {
  Future<DadesRebudes?>? _rebut;
  bool _grafic = false;
  CridaDades cridaDades = CridaDades();

  @override
  void initState() {
    super.initState();
    _rebut = cridaDades.llegirDades();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Valors actuals"),),
      body: Column(
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Padding(
                padding: const EdgeInsets.all(8),
                child: TextButton(
                  onPressed: () {
                    setState(() {
                      _rebut = cridaDades.llegirDades();
                    });
                  },
                  child: Text("Recarrega"),
                ),
              ),
              Spacer(),
              Text("Gràfic"),
              Padding(
                padding: const EdgeInsets.all(12.0),
                child: Switch(
                  value: _grafic, 
                  onChanged:(value) {
                    setState(() =>  _grafic = value);
                  },
                ),
              ) 
            ],
          ),
          FutureBuilder(future: _rebut, builder: (context, snapshot){
            if(snapshot.connectionState == ConnectionState.waiting){
              return CircularProgressIndicator();
            } else if(snapshot.hasError){
              return Text("Error: ${snapshot.error}");
            } else if(snapshot.hasData){
              if(_grafic){
                return mostraColumnes(snapshot.data);
              } else {
                return escriuResultats(snapshot.data);
              }
            } else {
              return Text("No s'han trobat resultats");
            }
          })
        ],
      ),
    );
  }
}

Widget escriuResultats(DadesRebudes? dades){
  if(dades != null){
    if(dades.nom.length >=5){
      List<Widget> esquerra = [];
      List<Widget> dreta = [];
      Widget element;
      for(int i = 0; i < dades.nom.length; i++){
        element = Text("${dades.nom[i]}:      ");
        esquerra.add(element);
        element = Text("${dades.darrer[i].replaceAll('.', ',')} ${dades.unitats[i]}");
        dreta.add(element);
      }
      return Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: esquerra,
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: dreta,
            ),
          ]
        ),
      );
    }
  }
  return Text("Dades incompletes");
}

Widget mostraColumnes(DadesRebudes? dades){
  if(dades != null){
    if(dades.nom.length >=5){
      ColorsApp colorsApp = ColorsApp();
      List<Widget> columnes = [];
      Widget element;
      double alt;
      for(int i = 0; i < dades.nom.length; i++){
        alt = double.parse(dades.darrer[i]) * 150 / double.parse(dades.maxim[i]);
        element = Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Text(
              "${dades.darrer[i].replaceAll('.', ',')} ${dades.unitats[i]}", 
              style: TextStyle(
                fontSize: 14, 
                color: colorsApp.colorsColumnes[i], 
              )
            ),
            Container(
              height: alt,
              width: 40, 
              color: colorsApp.colorsColumnes[i],
            ),
            Text(
              dades.titol[i], 
              style: TextStyle(
                fontSize: 20, 
                color: colorsApp.colorsColumnes[i], 
                fontWeight: FontWeight.bold
              )
            )
          ],
        );
        columnes.add(element);
      }
      return SizedBox(
        width: double.infinity,
        height: 200,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.end,
          children: columnes,
        ),
      );
    }
  }
  return Text("Dades incompletes");
}

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