Introducció

Flutter és un kit de desenvolupament de programari (SDK) creat per Google per construir aplicacions nadiues per a mòbils, web i escriptori des d'una única base de codi. Utilitza el llenguatge de programació Dart, també desenvolupat per Google, per crear interfícies d'usuari ràpides i atractives.

Característiques Clau de Flutter

Desenvolupament Ràpid:
- Hot Reload: Permet veure els canvis a l'instant sense perdre l'estat de l'aplicació.
- Widgets Rics: Proporciona una àmplia gamma de widgets personalitzables per crear interfícies d'usuari atractives.
Rendiment Natiu:
- Motor Gràfic: Utilitza el motor gràfic Skia per renderitzar la interfície d'usuari directament en el dispositiu, oferint un rendiment proper al nadiu.
- Accés a Funcionalitats Natives: Permet accedir a les funcionalitats natives del dispositiu mitjançant canals de plataforma.
Base de Codi Única:
- Multiplataforma: Permet escriure una única base de codi que es pot desplegar en Android, iOS, web i escriptori.
- Consistència: Assegura una experiència d'usuari consistent a través de diferents plataformes.
Comunitat i Suport:
- Documentació Extensa: Proporciona una documentació detallada i exemples pràctics.
- Comunitat Activa: Té una comunitat activa de desenvolupadors que contribueixen amb paquets i plugins.

Arquitectura de Flutter

Flutter està compost per diverses capes que treballen conjuntament per proporcionar una experiència de desenvolupament fluida:

Framework:
- Widgets: Són els components bàsics de la interfície d'usuari en Flutter. Tot en Flutter és un widget, des de botons fins a dissenys complexos.
- Render: Gestiona la disposició i el dibuix dels widgets.
Motor:
- Skia: És el motor gràfic que renderitza els widgets a la pantalla.
- Dart VM: Executa el codi Dart i proporciona el mecanisme de Hot Reload.
Embedder:
- Plataforma: Permet que Flutter s'executi en diferents plataformes com Android, iOS, web i escriptori.

Exemples Pràctics

Exemple 1: Hola Món en Flutter

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

Explicació del Codi:

main(): És el punt d'entrada de l'aplicació. runApp(MyApp()) inicialitza l'aplicació.
MyApp: És un widget sense estat (StatelessWidget) que construeix l'aplicació.
MaterialApp: Proporciona una estructura bàsica per a l'aplicació.
Scaffold: Proporciona una estructura visual bàsica amb una barra d'aplicació (AppBar) i un cos (body).
Center i Text: Són widgets que centren i mostren el text "Hola Món!" respectivament.

Exercici Pràctic

Exercici 1: Crear una Aplicació Simple

Objectiu: Crear una aplicació Flutter que mostri un missatge personalitzat.

Instruccions:

Configura el teu entorn de desenvolupament seguint les instruccions del següent tema.
Crea un nou projecte Flutter.
Modifica el codi per mostrar un missatge personalitzat en lloc de "Hola Món!".

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('Missatge Personalitzat'),
        ),
        body: Center(
          child: Text('Benvingut a Flutter!'),
        ),
      ),
    );
  }
}

Conclusió

Flutter és una eina poderosa per al desenvolupament d'aplicacions multiplataforma amb una única base de codi. La seva arquitectura modular i el seu rendiment nadiu el fan una opció atractiva per a desenvolupadors que busquen crear aplicacions ràpides i atractives. En el proper tema, aprendrem com configurar l'entorn de desenvolupament per començar a treballar amb Flutter.

Què és Flutter?

Introducció

Característiques Clau de Flutter

Arquitectura de Flutter

Exemples Pràctics

Exemple 1: Hola Món en Flutter

Exercici Pràctic

Exercici 1: Crear una Aplicació Simple

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