Aplicacions amb Flutter, Dart i Flame

Millorem la presentació

En el programa que tenim fins ara, el valor de la magnitud es mostra al costat del seu nom. Es podria millorar la presentació posant-hi una separació. Per a cada línia, podem crear una filera i posar-hi dos blocs de text; un amb el nom de la magnitud i un amb el valor i les unitats. Per tal que quedin alineats a un costat i a l'altre, podem posar un espaiador al mig.

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

Ara les dues columnes de text queden molt separades. En aquest cas, cada un dels textos cap en una línia; això ens permet una alternativa. Podem crear dues columnes, una amb les magnituds i l'altra amb els valors i les unitats.

...
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(
          children: [
            Spacer(),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: esquerra,
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: dreta,
            ),
            Spacer(),
          ]
        ),
      );
    }
  }
  return Text("Dades incompletes");
}

Ara les dues columnes ens queden molt enganxades. Una opció seria posar un espaiador al mig:

...
        child: Row(
          children: [
            Spacer(),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: esquerra,
            ),
            Spacer(),
            Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: dreta,
            ),
            Spacer(),
          ]
        ),
...

Però així queden molt separats. Probablement la millor opció és posar alguns espais i prescindir dels espaiadors.

...
      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);
      }
...

La pantalla principal ens quedarà així:

pant_principal.dart

import 'package:flutter/material.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;
  CridaDades cridaDades = CridaDades();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Valors actuals"),),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextButton(
              onPressed: () {
                setState(() {
                  _rebut = cridaDades.llegirDades();
                });
              },
              child: Text("Valors actuals"),
            ),
          ),
          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){
              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(
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: esquerra,
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: dreta,
            ),
          ]
        ),
      );
    }
  }
  return Text("Dades incompletes");
}

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