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

En molts casos, però, es vol oferir a l'usuari l'opció de triar entre el mode clar i el mode fosc. Per poder-ho fer, necessitarem modificar el mode durant el funcionament i això ens obliga a fer un canvi. Normalment el giny MaterialApp està dins del programa principal (main), però la classe MainApp és un giny sense estat i això ens impediria fer el canvi de mode. Cal, doncs, passar el MaterialApp a la pantalla principal.

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 PantPrincipal();
  }
}

En la pantalla principal hi posarem el giny MaterialApp amb l'opció de commutar el mode, normalment a partir d'un interruptor.

pant_principal.dart

import 'package:flutter/material.dart';
...

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

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

class _PantPrincipalState extends State<PantPrincipal> {
  bool _fosc = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: _fosc ? ThemeData.dark() : ThemeData.light(),
      home: Scaffold(
        appBar: AppBar(title: Text("Valors actuals"),),
        body: Column(
          children: [
            ...
                Text("Fosc"),
                Padding(
                  padding: const EdgeInsets.all(12.0),
                  child: Switch(
                    value: _fosc, 
                    onChanged:(value) {
                      setState(() =>  _fosc = value);
                    },
                  ),
                )
            ...
          ],
        ),
      )
    );
  }
}

En aquest apartat de l'exemple dades d'un full de càlcul es fa servir aquesta opció.

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