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

Comprensió de l'Arquitectura de Flutter

Següent ►
►

En aquest tema, explorarem l'arquitectura de Flutter per entendre com funciona aquest framework i com es construeixen les aplicacions. Aquesta comprensió és fonamental per desenvolupar aplicacions eficients i escalables.

Objectius d'Aprenentatge

  • Comprendre els components clau de l'arquitectura de Flutter.
  • Aprendre com Flutter renderitza la interfície d'usuari.
  • Entendre el cicle de vida d'una aplicació Flutter.

Components Clau de l'Arquitectura de Flutter

Flutter es basa en una arquitectura de tres capes principals:

  1. Framework: Aquesta és la capa més alta i està escrita en Dart. Inclou:

    • Widgets: Els blocs de construcció bàsics de la interfície d'usuari.
    • Render: Gestiona el layout i el dibuix dels widgets.
    • Gestió d'Estat: Controla l'estat de l'aplicació i els canvis en la interfície d'usuari.

  2. Engine: Aquesta capa està escrita en C++ i proporciona serveis de baix nivell com:

    • Skia: Una biblioteca gràfica 2D que renderitza la interfície d'usuari.
    • Motor de Text: Per al renderitzat de text.
    • Gestió d'Entrades: Per gestionar els esdeveniments d'entrada com tocs i gestos.

  3. Embedder: Aquesta capa permet que Flutter s'executi en diferents plataformes (iOS, Android, web, escriptori). Inclou:

    • Plataforma Nativa: Integració amb les API natives de la plataforma.
    • Canals de Plataforma: Permet la comunicació entre el codi Dart i el codi natiu.

Renderització de la Interfície d'Usuari

Flutter utilitza un motor de renderització basat en Skia per dibuixar la interfície d'usuari. A diferència d'altres frameworks que utilitzen components natius, Flutter dibuixa tot des de zero, la qual cosa permet una gran flexibilitat i control sobre l'aparença i el comportament de l'aplicació.

Cicle de Renderització

  1. Construcció del Widget Tree: Quan es crea o actualitza un widget, es construeix un arbre de widgets.
  2. Layout: Flutter calcula la mida i la posició de cada widget.
  3. Pintura: Els widgets es dibuixen a la pantalla utilitzant Skia.
  4. Composició: Les diferents capes de la interfície d'usuari es combinen per formar la pantalla final.

Cicle de Vida d'una Aplicació Flutter

Entendre el cicle de vida d'una aplicació Flutter és crucial per gestionar correctament els recursos i l'estat de l'aplicació.

Fases del Cicle de Vida

  1. Inici: L'aplicació es carrega i es mostra la pantalla inicial.
  2. Execució: L'aplicació està activa i interactuant amb l'usuari.
  3. Pausa: L'aplicació està en segon pla però no ha estat tancada.
  4. Reprendre: L'aplicació torna a estar activa després d'estar en segon pla.
  5. Tancament: L'aplicació es tanca i es netegen els recursos.

Exemple de Codi: Gestió del Cicle de Vida

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    if (state == AppLifecycleState.paused) {
      print('App is in background');
    } else if (state == AppLifecycleState.resumed) {
      print('App is in foreground');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Lifecycle Example'),
      ),
      body: Center(
        child: Text('Observe the console for lifecycle changes.'),
      ),
    );
  }
}

Exercici Pràctic

Objectiu

Crear una aplicació Flutter que mostri un missatge diferent segons l'estat del cicle de vida de l'aplicació.

Passos

  1. Crea un nou projecte Flutter.
  2. Implementa la classe WidgetsBindingObserver per observar els canvis en el cicle de vida.
  3. Mostra un SnackBar amb un missatge diferent per a cada estat del cicle de vida (inici, pausa, reprendre, tancament).

Solució

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    String message;
    if (state == AppLifecycleState.paused) {
      message = 'App is in background';
    } else if (state == AppLifecycleState.resumed) {
      message = 'App is in foreground';
    } else if (state == AppLifecycleState.inactive) {
      message = 'App is inactive';
    } else if (state == AppLifecycleState.detached) {
      message = 'App is detached';
    }
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(message)));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Lifecycle Example'),
      ),
      body: Center(
        child: Text('Observe the console for lifecycle changes.'),
      ),
    );
  }
}

Resum

En aquesta secció, hem après sobre l'arquitectura de Flutter, incloent-hi els components clau com el framework, l'engine i l'embedder. També hem explorat com Flutter renderitza la interfície d'usuari i el cicle de vida d'una aplicació Flutter. Aquesta comprensió és essencial per desenvolupar aplicacions robustes i eficients.

En el següent tema, ens endinsarem en la creació de la teva primera aplicació Flutter, aplicant els conceptes apresos fins ara.

◄ 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