Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.
De moment, només tenim el fitxer main.dart amb el contingut per defecte.
main.dart
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: Center(
child: Text('Hello World!'),
),
),
);
}
}
L'aplicació es pot anar creant en qualsevol ordre; l'única cosa a tenir present és que, si volem anar-la provant sobre la marxa, cal anar completant etapes. Això és important perquè si hi ha trossos incomplets ens donarà errors i l'emulador no funcionarà.
En aquest cas, crearem l'aplicació començant per les coses més generals. Seguidament anirem situant els elements començant per la part superior de la pantalla i anirem baixant.
Encara que això es pot fer al final, podem començar per posar la descripció del nostre projecte. En el menú lateral, hem d'obrir el fitxer pubspec.yaml. Cap a la part superior trobarem el títol description seguit d'un text entre cometes. Aquí és on posarem la descripció de la nostra aplicació. Per exemple:
name: selector_color description: "Selector de color" publish_to: 'none' version: 0.1.0 ...
La resta de paràmetres els deixarem igual. Evidentment, un cop l'aplicació estigui acabada, anirem canviant el número de versió cada cop que fem canvis.
La nostra aplicació tindrà dues pantalles. Hem de definir la pantalla principal. Per començar, dins de la carpeta lib crearem una carpeta anomenada screens, on guardarem les pantalles. Dins d'aquesta carpeta, crearem el fitxer pant_principal.dart, que serà la pantalla de la nostra aplicació. En aquest fitxer hi posarem un giny amb estat, que podem anomenar PantPral, perquè hi haurà elements que podran canviar durant el funcionament de l'aplicació. De moment, tindrem això:
pant_principal.dart
import 'package:flutter/material.dart';
class PantPral extends StatefulWidget {
const PantPral({super.key});
@override
State<PantPral> createState() => _PantPralState();
}
class _PantPralState extends State<PantPral> {
@override
Widget build(BuildContext context) {
return const Placeholder();
}
}
Atès que l'aplicació tindrà dues pantalles, el raonable és posar l'esquelet a la pantalla principal, en lloc de deixar-lo a MainApp.
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: PantPral()
);
}
}
pant_principal.dart
import 'package:flutter/material.dart';
class PantPral extends StatefulWidget {
const PantPral({super.key});
@override
State<PantPral> createState() => _PantPralState();
}
class _PantPralState extends State<PantPral> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('Hello World!'),
),
);
}
}
Ara anem a canviar el color del fons. Per estructurar bé l'aplicació, definirem tots els colors en un fitxer separat; així, si en algun moment els volem canviar, només els cal modificar en un únic lloc. Abans de res, dins de la carpeta lib crearem una carpeta anomenada core, on guardarem dades de caire general. Dins d'aquesta carpeta, crearem el fitxer colors.dart, on definirem els colors que intervindran en la nostra aplicació. De moment, el fitxer quedarà així:
colors.dart
import 'dart:ui';
class ColorsApp {
static const Color fons = Color(0xFF444444);
}
En aquest cas hem posat un gris fosc, però podríem triar el color que més ens convingués.
I ara anem a posar el fons a l'aplicació. Només cal afegir un camp backgroundColor dins de l'esquelet i importar el fitxer que acabem de crear.
import 'package:flutter/material.dart'; import 'package:selector_color/core/colors.dart';
...
return Scaffold(
backgroundColor: ColorsApp.fons,
body: Center(
child: Text('Hello World!'),
),
);
...
També li podem posar la barra de l'aplicació amb un títol.
...
return Scaffold(
appBar: AppBar(title: Text("Tria un color"),),
backgroundColor: ColorsApp.fons,
body: Center(
child: Text('Hello World!'),
),
);
}
...
Aquesta barra, però, té els colors per defecte; probablement unes lletres d'un color gris molt fosc sobre un fons pràcticament blanc. Seria convenient posar-hi uns colors que s'adeqüin més al fons que ja tenim. Afegim, doncs dos colors més al nostre fitxer de colors; posarem un color gris més clar per al fons de la barra i blanc per a les lletres. Aquest gris l'emprarem després com a color primari a l'aplicació, per això ja li donem aquest nom.
... static const Color primari = Color(0xFF7F7F7F); static const Color text = Color(0xFFFFFFFF); ...
I afegirem els colors a la barra:
...
appBar: AppBar(
title: Text("Resistència per a un led"),
backgroundColor: ColorsApp.primari,
foregroundColor: ColorsApp.text,
),
...
La nostra pantalla tindrà diverses parts, distribuïdes verticalment, on hi haurà els cursors i el lloc on es mostrarà el color corresponent. Atès, doncs, que l'estructura tindrà un desenvolupament vertical, el primer element de la pantalla serà una columna. Com ara ja sabem que hi haurà elements que canviaran, hem de tenir la precaució d'eliminar la paraula const.
...
class _PantPralState extends State<PantPral> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Tria un color"),
backgroundColor: ColorsApp.primari,
foregroundColor: ColorsApp.text,
),
backgroundColor: ColorsApp.fons,
body: Column(
children: [
],
),
);
}
}
Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.