En una aplicació hi intervindran nombrosos elements, com textos, botons, imatges, etc. Per controlar el posicionat dels elements a la pantalla, farem servir fileres, columnes o altres opcions que ens permetin distribuir-los convenientment.
La forma més endreçada és organitzar-los en fitxers i classificar-los en carpetes. Per exemple, podem crear una carpeta per als elements, que podem anomenar components, i posar-hi un fitxer per a cada botó, imatge, etc. Una altra carpeta, que podem anomenar layouts, podria contenir les fileres, columnes, etc. amb un fitxer per a cada un.
Un arbre de carpetes raonable podria tenir una estructura semblant a aquesta:
assets
images - Imatges
grafic.png
foto.jpg
lib
main.dart - Programa principal
components - Elements de les vistes
bloc1.dart
element2.dart
core - Dades de tipus general
colors.dart - Definició dels colors que fem servir
estils.dart - Estils per al text
decora.dart - Decoracions per als elements d'empaquetament
data - Recopilació de dades (internet, bases de dades, etc.)
repository.dart - Connexió amb la font de dades
model - Models de dades
dades_detall.dart
screens - Pantalles de l'aplicació
pant_principal.dart - Pantalla principal de l'aplicació
pant_resultats.dart - Pantalla de resultats
Per crear una carpeta dins de la carpeta lib, podem posar-nos sobre la carpeta lib i picar el botó New Folder.
A aquesta nova carpeta li hem de posar un nom, el més adequat seria layouts.
Si, per exemple, volem fer una distribució en columna (posar els elements un sota l'altre), podem després crear un fitxer (que podem anomenar column.dart) en aquesta carpeta (emprant el botó del costat del que hem emprat per crear la carpeta). Una columna és un giny (widget) sense estat. En el fitxer podem començar a escriure stl i ja ens sortiran diverses opcions, en aquest cas triarem StatelessWidget i el sistema ja ens generarà automàticament les instruccions bàsiques d'un element d'aquest tipus.
column.dart
import 'package:flutter/material.dart';
class MyWidget extends StatelessWidget {
const MyWidget({super.key});
@override
Widget build(BuildContext context) {
return const Placeholder();
}
}
El raonable és canviar el nom de la classe per un que ens sigui més descriptiu. Per exemple, podem posar Columna en lloc de MyWidget. Fixem-nos que s'ha de canviar en dos llocs.
Si el que volem fer és una columna, canviarem el que hi ha el darrera de la instrucció return posant-hi un Column.
column.dart
import 'package:flutter/material.dart';
class Columna extends StatelessWidget {
const Columna({super.key});
@override
Widget build(BuildContext context) {
return Column();
}
}
Ara, però, la columna és buida. El raonable és que tingui descendents. Podem, per exemple, posar-hi tres elements de text; que es veuran l'un sota de l'altre.
column.dart
import 'package:flutter/material.dart';
class Columna extends StatelessWidget {
const Columna({super.key});
@override
Widget build(BuildContext context) {
return Column(
children: [
Text("Primera línia de text"),
Text("Segona línia de text"),
Text("Tercera línia de text"),
],
);
}
}
Per utilitzar-lo, podem posar el nostre objecte Columna dins el body del MainApp, tenint en compte que caldrà importar el fitxer column.dart.
main.dart
import 'package:flutter/material.dart'; import 'package:flutter_basic/layouts/column.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: Columna()
),
);
}
}
El resultat, però, no serà gaire professional; atès que no hem definit els marges, colors i altres detalls que particularitzarien la nostra aplicació.
En aplicacions completes és probable que tinguem més d'una columna, els haurem de donar noms diferents i podríem posar-los un número però és més raonable posar-hi un text descriptiu que ens ajudi a identificar-les; per exemple, Columna_imatges.
Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.