El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Els widgets són els blocs de construcció fonamentals de qualsevol aplicació Flutter. Tot en Flutter és un widget, des dels elements més simples com un text o una imatge, fins a estructures més complexes com un formulari o una pàgina completa. En aquesta secció, explorarem què són els widgets, com funcionen i com es poden utilitzar per construir interfícies d'usuari riques i interactives.

Què és un Widget?

Un widget és una descripció immutable d'una part de la interfície d'usuari. Els widgets poden ser visuals (com un botó o un text) o no visuals (com un gestor de disposició o un controlador d'animació).

Tipus de Widgets

Widgets Stateless: Són widgets que no canvien el seu estat durant el cicle de vida de l'aplicació. Un cop creats, no es poden modificar.
Widgets Stateful: Són widgets que poden canviar el seu estat durant el cicle de vida de l'aplicació. Aquests widgets poden ser actualitzats i redibuixats en resposta a les interaccions de l'usuari o altres factors.

Creació d'un Widget Bàsic

A continuació, veurem com crear un widget bàsic en Flutter. Començarem amb un widget Stateless.

Exemple de Widget Stateless

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('Introducció als Widgets'),
        ),
        body: Center(
          child: Text('Hola, món!'),
        ),
      ),
    );
  }
}

Explicació del Codi

import 'package:flutter/material.dart';: Importa el paquet material de Flutter, que conté una col·lecció de widgets predefinits.
void main() { runApp(MyApp()); }: La funció main és el punt d'entrada de l'aplicació. runApp llança l'aplicació i pren un widget com a argument.
class MyApp extends StatelessWidget: Defineix una classe MyApp que hereta de StatelessWidget.
@override Widget build(BuildContext context): La funció build descriu com ha de ser la interfície d'usuari.
MaterialApp: Un widget que enmarca l'aplicació amb material design.
Scaffold: Proporciona una estructura bàsica per a la interfície d'usuari, incloent una barra d'aplicació i un cos central.
AppBar: Un widget que crea una barra d'aplicació.
Center: Un widget que centra el seu fill.
Text: Un widget que mostra text.

Exemple de Widget Stateful

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('Introducció als Widgets'),
        ),
        body: Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Has premut el botó aquest nombre de vegades:'),
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.headline4,
        ),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Incrementa'),
        ),
      ],
    );
  }
}

Explicació del Codi

class MyStatefulWidget extends StatefulWidget: Defineix una classe MyStatefulWidget que hereta de StatefulWidget.
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();: Crea l'estat associat amb aquest widget.
class _MyStatefulWidgetState extends State: Defineix una classe _MyStatefulWidgetState que hereta de State.
int _counter = 0;: Declara una variable _counter per mantenir el compte.
void _incrementCounter() { setState(() { _counter++; }); }: Defineix una funció _incrementCounter que incrementa el valor de _counter i crida setState per actualitzar la interfície d'usuari.
Column: Un widget que disposa els seus fills en una columna vertical.
ElevatedButton: Un botó elevat que, quan es prem, crida la funció _incrementCounter.

Exercicis Pràctics

Exercici 1: Crea un widget Stateless que mostri un text personalitzat.
Exercici 2: Crea un widget Stateful que tingui un botó per incrementar un comptador i un altre botó per restablir el comptador a zero.

Solucions

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('Exercici 1'),
        ),
        body: Center(
          child: Text('Aquest és un text personalitzat!'),
        ),
      ),
    );
  }
}

Exercici 2

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('Exercici 2'),
        ),
        body: Center(
          child: CounterWidget(),
        ),
      ),
    );
  }
}

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  void _resetCounter() {
    setState(() {
      _counter = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Has premut el botó aquest nombre de vegades:'),
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.headline4,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _incrementCounter,
              child: Text('Incrementa'),
            ),
            SizedBox(width: 20),
            ElevatedButton(
              onPressed: _resetCounter,
              child: Text('Restableix'),
            ),
          ],
        ),
      ],
    );
  }
}

Conclusió

En aquesta secció, hem après què són els widgets en Flutter, la diferència entre widgets Stateless i Stateful, i com crear-los. Els widgets són la base de qualsevol aplicació Flutter, i comprendre com funcionen és essencial per desenvolupar aplicacions eficients i interactives. En la següent secció, explorarem més a fons la diferència entre widgets Stateless i Stateful i veurem exemples més complexos.

Introducció als Widgets

Què és un Widget?

Tipus de Widgets

Creació d'un Widget Bàsic

Exemple de Widget Stateless

Explicació del Codi

Exemple de Widget Stateful

Explicació del Codi

Exercicis Pràctics

Solucions

Exercici 1

Exercici 2

Conclusió

Curs de Desenvolupament Flutter

Mòdul 1: Introducció a Flutter

Mòdul 2: Conceptes Bàsics de Programació en Dart

Mòdul 3: Widgets de Flutter

Mòdul 4: Gestió de l'Estat

Mòdul 5: Navegació i Enrutament

Mòdul 6: Xarxes i APIs

Mòdul 7: Persistència i Emmagatzematge

Mòdul 8: Conceptes Avançats de Flutter

Mòdul 9: Proves i Depuració

Mòdul 10: Desplegament i Manteniment

Mòdul 11: Flutter per a Web i Escriptori