Aplicacions amb Flutter, Dart i Flame

Programa principal i localització

El programa principal d'una aplicació sol tenir un aspecte similar a aquest:

import 'package:flutter/material.dart';

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

class MainApp extends StatelessWidget{
  const MainApp({super.key});
  @override
  Widget build(BuildContext context){
    return const MaterialApp(
      home: Scaffold(
	    ...
        body: ...
		...
      ),
    );
  }
}

Important: En aplicacions que tenen elements que varien, cal una estructura mínima. A més del programa principal (main) convé tenir un giny per a la pantalla i un altre per al contingut. Normalment les variables les definirem a la pantalla (així com els mètides que les modifiquen) i la visualització i la interacció amb l'usuari estaran al contingut.

En aplicacions senzilles, el cos (body) contindrà directament l'estructura principal de l'aplicació.

class MainApp extends StatelessWidget {
  const MainApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        ...
        body: Columna(),
        ...
      ),
    );
  }
}

En canvi, en aplicacions amb diverses pantalles el cos (body) contindrà la pantalla principal de l'aplicació.

import 'package:primera_app/screens/pant_principal.dart';
...

class MainApp extends StatelessWidget {
  const MainApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        ...
        body: PantPrincipal(),
        ...
      ),
    );
  }
}

En aplicacions amb més d'una pantalla, és preferible posar directament la pantalla principal a l'inici (home) per tal que l'esquelet (scaffold) estigui a la pantalla principal; com passa a les altres pantalles.

import 'package:primera_app/screens/pant_principal.dart';
...

class MainApp extends StatelessWidget {
  const MainApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PantPrincipal(),
    );
  }
}

Localització

En algunes aplicacions ens convindrà definir la localització, un exemple molt clar són aquelles aplicacions que ofereixen llengües diferents; però també és necessari, per exemple, en aplicacions que treballen amb dates o calendaris, per tal que es mostrin en el format correcte.

Per poder emprar les localitzacions, cal anar al fitxer pubspec.yaml per dir-li que les volem fer servir. Cal posar-ho a dependencies. Al fitxer corresponent, caldrà carregar-ho.

...
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
...

La localització es defineix en el giny MaterialApp que tenen totes les aplicacions. Cal especificar els delegats (localizationsDelegates), les localitzacions admeses (supportedLocales) i la localització actual (locale), que pot variar durant l'execució.

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      locale: Locale('ca', 'ES'),
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        Locale('ca'),
        Locale('es'),
        Locale('en'),
      ],
      home: PantPrincipal()
    );
  }
}

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