En aquest tema, explorarem els widgets d'entrada i formulari en Flutter. Aquests widgets són essencials per crear aplicacions interactives que permetin als usuaris introduir dades. Aprendrem a utilitzar widgets com TextField, Checkbox, Radio, Switch, i a gestionar formularis amb el widget Form.
Continguts
TextField
El widget TextField és utilitzat per permetre als usuaris introduir text. És un dels widgets més comuns en les aplicacions.
Exemple de TextField
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Exemple de TextField'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Introduïu el vostre nom',
),
),
),
),
);
}
}Explicació
TextField: Crea un camp de text.decoration: Afegeix decoració al camp de text, com ara un bord i una etiqueta.
Checkbox
El widget Checkbox permet als usuaris seleccionar o deseleccionar una opció.
Exemple de Checkbox
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool _isChecked = false;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Exemple de Checkbox'),
),
body: Center(
child: Checkbox(
value: _isChecked,
onChanged: (bool? value) {
setState(() {
_isChecked = value!;
});
},
),
),
),
);
}
}Explicació
Checkbox: Crea una casella de verificació.value: Indica si la casella està seleccionada.onChanged: Funció que es crida quan l'estat de la casella canvia.
Radio
El widget Radio permet als usuaris seleccionar una opció d'un grup de opcions.
Exemple de Radio
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int _selectedRadio = 1;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Exemple de Radio'),
),
body: Column(
children: <Widget>[
Radio(
value: 1,
groupValue: _selectedRadio,
onChanged: (int? value) {
setState(() {
_selectedRadio = value!;
});
},
),
Radio(
value: 2,
groupValue: _selectedRadio,
onChanged: (int? value) {
setState(() {
_selectedRadio = value!;
});
},
),
],
),
),
);
}
}Explicació
Radio: Crea un botó de ràdio.value: Valor del botó de ràdio.groupValue: Valor seleccionat del grup de botons de ràdio.onChanged: Funció que es crida quan l'estat del botó de ràdio canvia.
Switch
El widget Switch permet als usuaris canviar entre dos estats (activat/desactivat).
Exemple de Switch
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool _isSwitched = false;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Exemple de Switch'),
),
body: Center(
child: Switch(
value: _isSwitched,
onChanged: (bool value) {
setState(() {
_isSwitched = value;
});
},
),
),
),
);
}
}Explicació
Switch: Crea un interruptor.value: Indica si l'interruptor està activat.onChanged: Funció que es crida quan l'estat de l'interruptor canvia.
Form
El widget Form és utilitzat per agrupar i gestionar diversos widgets d'entrada.
Exemple de Form
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Exemple de Form'),
),
body: MyCustomForm(),
),
);
}
}
class MyCustomForm extends StatefulWidget {
@override
_MyCustomFormState createState() => _MyCustomFormState();
}
class _MyCustomFormState extends State<MyCustomForm> {
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextFormField(
decoration: InputDecoration(
labelText: 'Introduïu el vostre nom',
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Si us plau, introduïu algun text';
}
return null;
},
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Processant dades')),
);
}
},
child: Text('Enviar'),
),
),
],
),
);
}
}Explicació
Form: Crea un formulari._formKey: Clau global per identificar el formulari.TextFormField: Crea un camp de text dins del formulari.validator: Funció que valida l'entrada de l'usuari.ElevatedButton: Botó per enviar el formulari.
Exercicis Pràctics
Exercici 1: Crear un Formulari de Registre
Crea un formulari de registre que inclogui els següents camps:
- Nom
- Correu electrònic
- Contrasenya
- Confirmació de contrasenya
Solució de l'Exercici 1
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Formulari de Registre'),
),
body: RegistrationForm(),
),
);
}
}
class RegistrationForm extends StatefulWidget {
@override
_RegistrationFormState createState() => _RegistrationFormState();
}
class _RegistrationFormState extends State<RegistrationForm> {
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextFormField(
decoration: InputDecoration(
labelText: 'Nom',
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Si us plau, introduïu el vostre nom';
}
return null;
},
),
TextFormField(
decoration: InputDecoration(
labelText: 'Correu electrònic',
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Si us plau, introduïu el vostre correu electrònic';
}
return null;
},
),
TextFormField(
decoration: InputDecoration(
labelText: 'Contrasenya',
),
obscureText: true,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Si us plau, introduïu la vostra contrasenya';
}
return null;
},
),
TextFormField(
decoration: InputDecoration(
labelText: 'Confirmació de contrasenya',
),
obscureText: true,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Si us plau, confirmeu la vostra contrasenya';
}
return null;
},
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Processant dades')),
);
}
},
child: Text('Registrar-se'),
),
),
],
),
),
);
}
}Explicació
- Hem creat un formulari de registre amb camps per al nom, correu electrònic, contrasenya i confirmació de contrasenya.
- Cada camp té una validació per assegurar-se que no estigui buit.
- Un botó
Registrar-seque valida el formulari i mostra un missatge de processament de dades.
Conclusió
En aquesta secció, hem après a utilitzar diversos widgets d'entrada i formulari en Flutter, com TextField, Checkbox, Radio, Switch i Form. Aquests widgets són fonamentals per crear aplicacions interactives que permetin als usuaris introduir i gestionar dades. Hem vist exemples pràctics i hem realitzat un exercici per reforçar els conceptes apresos. En el següent mòdul, explorarem la gestió de l'estat en Flutter.
Curs de Desenvolupament Flutter
Mòdul 1: Introducció a Flutter
- Què és Flutter?
- Configuració de l'Entorn de Desenvolupament
- Comprensió de l'Arquitectura de Flutter
- Creació de la Teva Primera Aplicació Flutter
Mòdul 2: Conceptes Bàsics de Programació en Dart
- Introducció a Dart
- Variables i Tipus de Dades
- Sentències de Flux de Control
- Funcions i Mètodes
- Programació Orientada a Objectes en Dart
Mòdul 3: Widgets de Flutter
- Introducció als Widgets
- Widgets Stateless vs Stateful
- Widgets Bàsics
- Widgets de Disseny
- Widgets d'Entrada i Formulari
Mòdul 4: Gestió de l'Estat
Mòdul 5: Navegació i Enrutament
- Introducció a la Navegació
- Navegació Bàsica
- Rutes Nomenades
- Passar Dades Entre Pantalles
- Deep Linking
Mòdul 6: Xarxes i APIs
- Obtenir Dades d'Internet
- Analitzar Dades JSON
- Gestió d'Errors de Xarxa
- Ús d'APIs REST
- Integració de GraphQL
Mòdul 7: Persistència i Emmagatzematge
- Introducció a la Persistència
- Preferències Compartides
- Emmagatzematge de Fitxers
- Base de Dades SQLite
- Ús de Hive per a l'Emmagatzematge Local
Mòdul 8: Conceptes Avançats de Flutter
- Animacions en Flutter
- Pintura Personalitzada i Canvas
- Canals de Plataforma
- Isolates i Concurrència
- Optimització del Rendiment
Mòdul 9: Proves i Depuració
- Introducció a les Proves
- Proves Unitàries
- Proves de Widgets
- Proves d'Integració
- Tècniques de Depuració
Mòdul 10: Desplegament i Manteniment
- Preparació per al Llançament
- Construcció per a iOS
- Construcció per a Android
- Integració i Desplegament Continu (CI/CD)
- Manteniment i Actualització de la Teva Aplicació