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: resistled_app description: "Resistència per a un led" 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.
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(0xFF004400);
}
En aquest cas hem posat un verd 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';
...
home: Scaffold(
backgroundColor: ColorsApp.fons,
body: Center(
child: Text('Hello World!'),
),
),
...
També li podem posar la barra de l'aplicació amb un títol. El primer que hem de fer és eliminar la paraula const de la línia del return. Llavors ja podem afegir la barra:
...
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("Resistència per a un led"),),
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 verd més clar per al fons de la barra i blanc per a les lletres. Aquest verd l'emprarem després com a color primari a l'aplicació, per això ja li donem aquest nom.
... static const Color primari = Color(0xFF008800); 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 aplicació només tindrà una pantalla; però és recomanable definir una pantalla com a marc general.
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();
}
}
Abans de començar a modificar la pantalla, per incloure els elements necessaris, farem que el programa principal la cridi. Així ja podrem considerar acabat el fitxer main.dart i centrar-nos en la pantalla. La versió final del fitxer, doncs, serà aquesta:
main.dart
import 'package:flutter/material.dart'; import 'package:resistled_app/core/colors.dart'; import 'package:resistled_app/sreens/pant_principal.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Resistència per a un led"),
backgroundColor: ColorsApp.primari,
foregroundColor: ColorsApp.text,
),
backgroundColor: ColorsApp.fons,
body: PantPral(),
),
);
}
}
La nostra pantalla tindrà diverses parts, distribuïdes verticalment. A la part superior triarem la tensió a la qual treballarà el circuit, després ajustarem els paràmetres del led i al final tindrem la presentació de resultats. 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 Column(
children: [
],
);
}
}
Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.