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

HOME

En aquest tema, explorarem els widgets de disseny en Flutter, que són fonamentals per crear interfícies d'usuari atractives i funcionals. Els widgets de disseny ens permeten organitzar i disposar altres widgets en la pantalla de manera flexible i eficient.

Objectius d'Aprenentatge

Al final d'aquest tema, hauràs après:

Què són els widgets de disseny en Flutter.
Com utilitzar els widgets de disseny més comuns.
Com combinar diversos widgets de disseny per crear interfícies complexes.

Què són els Widgets de Disseny?

Els widgets de disseny (layout widgets) són components que ajuden a organitzar altres widgets en la pantalla. Aquests widgets no tenen una aparença visual pròpia, sinó que controlen com es disposen els seus fills.

Widgets de Disseny Comuns

Container

El widget Container és un dels més versàtils en Flutter. Pot contenir un sol fill i permet aplicar marges, farcits, dimensions, decoracions, etc.

Container(
  margin: EdgeInsets.all(10.0),
  padding: EdgeInsets.all(20.0),
  width: 200.0,
  height: 200.0,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10.0),
  ),
  child: Text('Hola, món!'),
)

Row i Column

Els widgets Row i Column s'utilitzen per disposar widgets en una fila o columna respectivament.

Row

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Icon(Icons.star, color: Colors.red),
    Icon(Icons.star, color: Colors.green),
    Icon(Icons.star, color: Colors.blue),
  ],
)

Column

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text('Primer text'),
    Text('Segon text'),
    Text('Tercer text'),
  ],
)

Stack

El widget Stack permet superposar widgets uns sobre els altres.

Stack(
  children: <Widget>[
    Container(
      width: 200.0,
      height: 200.0,
      color: Colors.red,
    ),
    Positioned(
      top: 50.0,
      left: 50.0,
      child: Container(
        width: 100.0,
        height: 100.0,
        color: Colors.blue,
      ),
    ),
  ],
)

ListView

El widget ListView s'utilitza per crear llistes desplaçables.

ListView(
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.map),
      title: Text('Mapa'),
    ),
    ListTile(
      leading: Icon(Icons.photo_album),
      title: Text('Àlbum de fotos'),
    ),
    ListTile(
      leading: Icon(Icons.phone),
      title: Text('Telèfon'),
    ),
  ],
)

Exercicis Pràctics

Exercici 1: Crear una Interfície Simple amb Row i Column

Crea una interfície que mostri tres icones en una fila i tres textos en una columna.

Solució

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        Icon(Icons.star, color: Colors.red),
        Icon(Icons.star, color: Colors.green),
        Icon(Icons.star, color: Colors.blue),
      ],
    ),
    SizedBox(height: 20.0),
    Text('Primer text'),
    Text('Segon text'),
    Text('Tercer text'),
  ],
)

Exercici 2: Crear una Interfície amb Stack

Crea una interfície que mostri un quadrat vermell amb un quadrat blau superposat a la part superior esquerra.

Solució

Stack(
  children: <Widget>[
    Container(
      width: 200.0,
      height: 200.0,
      color: Colors.red,
    ),
    Positioned(
      top: 50.0,
      left: 50.0,
      child: Container(
        width: 100.0,
        height: 100.0,
        color: Colors.blue,
      ),
    ),
  ],
)

Resum

En aquest tema, hem après sobre els widgets de disseny en Flutter, incloent Container, Row, Column, Stack i ListView. Aquests widgets són essencials per crear interfícies d'usuari ben organitzades i atractives. Hem vist exemples pràctics de com utilitzar aquests widgets i hem realitzat exercicis per reforçar els conceptes apresos.

En el següent tema, explorarem els widgets d'entrada i formulari, que ens permetran interactuar amb els usuaris i recollir dades.

Widgets de Disseny

Objectius d'Aprenentatge

Què són els Widgets de Disseny?

Widgets de Disseny Comuns

Container

Row i Column

Row

Column

Stack

ListView

Exercicis Pràctics

Exercici 1: Crear una Interfície Simple amb Row i Column

Solució

Exercici 2: Crear una Interfície amb Stack

Solució

Resum

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