El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Widgets Bàsics

Següent ►
►

En aquest tema, explorarem els widgets bàsics de Flutter, que són els blocs de construcció fonamentals per a qualsevol aplicació Flutter. Els widgets són elements visuals que es poden combinar per crear interfícies d'usuari complexes. Aprendrem sobre alguns dels widgets més utilitzats i com utilitzar-los en les nostres aplicacions.

  1. Text

El widget Text s'utilitza per mostrar text a la pantalla. És un dels widgets més senzills i més utilitzats en Flutter.

Exemple:

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 Text Widget'),
        ),
        body: Center(
          child: Text(
            'Hola, Flutter!',
            style: TextStyle(fontSize: 24, color: Colors.blue),
          ),
        ),
      ),
    );
  }
}

Explicació:

  • Text('Hola, Flutter!'): Crea un widget de text amb el contingut "Hola, Flutter!".
  • TextStyle: Permet personalitzar l'estil del text, com la mida de la font i el color.

  1. Container

El widget Container és un widget versàtil que pot contenir altres widgets i permet aplicar marges, farcits, decoracions i transformacions.

Exemple:

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 Container Widget'),
        ),
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            color: Colors.amber,
            child: Center(
              child: Text('Dins del Container'),
            ),
          ),
        ),
      ),
    );
  }
}

Explicació:

  • Container(width: 200, height: 200, color: Colors.amber): Crea un container amb una amplada i alçada de 200 píxels i un color de fons ambre.
  • child: Center(child: Text('Dins del Container')): El container conté un widget Center que al seu torn conté un widget Text.

  1. Row i Column

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

Exemple de Row:

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 Row Widget'),
        ),
        body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(Icons.star, color: Colors.red),
            Icon(Icons.star, color: Colors.green),
            Icon(Icons.star, color: Colors.blue),
          ],
        ),
      ),
    );
  }
}

Exemple de Column:

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 Column Widget'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(Icons.star, color: Colors.red),
            Icon(Icons.star, color: Colors.green),
            Icon(Icons.star, color: Colors.blue),
          ],
        ),
      ),
    );
  }
}

Explicació:

  • Row i Column tenen una propietat mainAxisAlignment que controla l'alineació dels seus fills al llarg de l'eix principal.
  • children: Una llista de widgets que es disposaran en una fila o columna.

  1. Image

El widget Image s'utilitza per mostrar imatges a la pantalla. Es poden carregar imatges des d'Internet, des de fitxers locals o des de recursos.

Exemple:

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 Image Widget'),
        ),
        body: Center(
          child: Image.network(
            'https://flutter.dev/images/flutter-logo-sharing.png',
          ),
        ),
      ),
    );
  }
}

Explicació:

  • Image.network('URL'): Carrega una imatge des d'una URL.

  1. Button

Els widgets de botó permeten als usuaris interactuar amb l'aplicació. Hi ha diversos tipus de botons, com RaisedButton, FlatButton, IconButton, etc.

Exemple:

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 Button Widget'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('Botó premut!');
            },
            child: Text('Prem-me'),
          ),
        ),
      ),
    );
  }
}

Explicació:

  • ElevatedButton(onPressed: () { ... }, child: Text('Prem-me')): Crea un botó elevat amb un text i una funció que s'executa quan es prem el botó.

Exercicis Pràctics

Exercici 1:

Crea una aplicació que mostri un text centrat dins d'un container amb un color de fons verd i una mida de 300x300 píxels.

Solució:

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: Container(
            width: 300,
            height: 300,
            color: Colors.green,
            child: Center(
              child: Text(
                'Text Centrat',
                style: TextStyle(fontSize: 24, color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Exercici 2:

Crea una aplicació que mostri tres icones d'estrella en una fila, amb colors diferents (vermell, verd i blau).

Solució:

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: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(Icons.star, color: Colors.red),
            Icon(Icons.star, color: Colors.green),
            Icon(Icons.star, color: Colors.blue),
          ],
        ),
      ),
    );
  }
}

Conclusió

En aquesta secció, hem après sobre alguns dels widgets bàsics de Flutter, com Text, Container, Row, Column, Image i Button. Aquests widgets són fonamentals per construir interfícies d'usuari en Flutter. Hem vist exemples pràctics de com utilitzar-los i hem realitzat exercicis per reforçar els conceptes apresos. En la següent secció, explorarem widgets de disseny més avançats per crear interfícies d'usuari més complexes.

◄ Anterior
◄
Següent ►
►

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

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats