Aplicacions amb Flutter, Dart i Flame

Decoració

Hi ha elements que admeten algun tipus de decoració. Aquí no parlarem dels elements de text ni dels camps de text, que tenen decoracions més específiques, sinó d'alguns elements d'empaquetament, com els contenidors.

En el contenidor següent hem definit un color i unes vores amb les cantonades corbes.

...
    return Container(
      decoration: BoxDecoration(
        color: Colors.blue,
        border: Border.all(width: 1.5, color: Colors.deepOrange),
        borderRadius: BorderRadius.circular(12),
      ),
      child: Column(
        children: [Text("Canviar", style: Estils.estilTextPrincipal)],
      ),
    );
...

En lloc d'un sol color, la decoració pot consistir en un degradat. Per exemple:

...
        return Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [Color(0xFFFFFFFF), Color(0xFF000000)],
            ),
          ),
          child: ...
...

Definició de decoracions de forma general

Normalment una aplicació té un petit conjunt de decoracions que probablement s'utilitzen diverses vegades.

Una bona manera d'organitzar l'aplicació és creant una classe amb totes les decoracions que farem servir a l'aplicació o, com a mínim, amb aquells que es fan servir en diversos llocs. Així podem canviar els paràmetres en un únic lloc i la modificació s'aplica immediatament a tota l'aplicació.

Per exemple, podríem crear un fitxer decora.dart dins de la carpeta core que situem a la carpeta lib.

decora.dart

import 'package:flutter/material.dart';
import 'package:resistled_app/core/colors.dart';

class DecoraApp {
  static BoxDecoration decorBotons = BoxDecoration(
    color: ColorsApp.primari,
    borderRadius: BorderRadius.circular(12),
  );
}

Cal definir-les com a estatiques, perquè s'hi pugui accedir des de qualsevol lloc.

Després podem utilitzar aquestes decoracions en qualsevol lloc de l'aplicació. Per exemple, en un contenidor.

...
    Container(
      decoration: DecoraApp.decorBotons,
      child: ...
    ),
...

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