Aplicacions amb Flutter, Dart i Flame

Mode fosc

Flutter permet establir un mode fosc per a l'aplicació, de manera que el fons de la pantalla és d'un color proper al negre. El mode fosc s'estableix en el giny MaterialApp, que tenen totes les aplicacions.

main.dart

import 'package:flutter/material.dart';
import 'package:sheets/screens/pant_principal.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: PantPrincipal()
    );
  }
}

Si ho provem, ens adonarem que ara les barres o les columnes no es veuen bé, perquè els colors contrasten poc (especialment el negre). Ara definirem uns nous colors però conservarem els antics perquè ens seran útils més endavant.

colors.dart

import 'dart:ui';

class ColorsApp {
  List<Color> colorsColumnesClar = [
    Color(0xFF0000FF),
    Color(0xFFFF0000), 
    Color(0xFF008800), 
    Color(0xFFAA00AA), 
    Color(0xFF000000), 
  ];
  List<Color> colorsColumnesFosc = [
    Color(0xFF9999FF),
    Color(0xFFFF9999), 
    Color(0xFF99FF99), 
    Color(0xFFFF99FF), 
    Color(0xFFFFFFFF), 
  ];
}

I modifiquem les funcions que dibuixen les barres o les columnes.

...
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.colorsColumnesFosc[i], 
              )
            ),
            Container(
              height: alt,
              width: 40, 
              color: colorsApp.colorsColumnesFosc[i],
            ),
            Text(
              dades.titol[i], 
              style: TextStyle(
                fontSize: 20, 
                color: colorsApp.colorsColumnesFosc[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");
}

Widget mostraBarres(DadesRebudes? dades){
  if(dades != null){
    if(dades.nom.length >=5){
      ColorsApp colorsApp = ColorsApp();
      List<Widget> barres = [];
      Widget element;
      double llarg;
      for(int i = 0; i < dades.nom.length; i++){
        llarg = double.parse(dades.darrer[i]) * 250 / double.parse(dades.maxim[i]);
        element = Row(
          children: [
            SizedBox(
              width: 30,
              child: Text(
                dades.titol[i], 
                style: TextStyle(
                  fontSize: 20, 
                  color: colorsApp.colorsColumnesFosc[i], 
                  fontWeight: FontWeight.bold
                )
              ),
            ),
            Container(
              height: 40,
              width: llarg, 
              color: colorsApp.colorsColumnesFosc[i],
            ),
            Padding(
              padding: const EdgeInsets.only(left: 10),
              child: Text(
                "${dades.darrer[i].replaceAll('.', ',')} ${dades.unitats[i]}", 
                style: TextStyle(
                  fontSize: 14, 
                  color: colorsApp.colorsColumnesFosc[i], 
                )
              ),
            ),
          ],
        );
        barres.add(element);
      }
      return Padding(
        padding: const EdgeInsets.all(12),
        child: SizedBox(
          width: double.infinity,
          height: 300,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: barres,
          ),
        ),
      );
    }
  }
  return Text("Dades incompletes");
}

Nota: Aquest apartat està parcialment basat en l'aplicació Settings App creada per AristiDevs.

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