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

Introducció a Flutter

Següent ►
►

Flutter és un framework de codi obert desenvolupat per Google per crear aplicacions nadiues per a mòbils, web i escriptori des d'una única base de codi. Utilitza el llenguatge de programació Dart, que ja hem estat aprenent en aquest curs. En aquesta secció, explorarem els conceptes bàsics de Flutter i com començar a desenvolupar aplicacions amb aquest potent framework.

Continguts

  1. Què és Flutter?
  2. Avantatges de Flutter
  3. Arquitectura de Flutter
  4. Instal·lació de Flutter
  5. Creació d'un projecte Flutter
  6. Estructura d'un projecte Flutter
  7. El teu primer widget en Flutter

  1. Què és Flutter?

Flutter és un SDK (Software Development Kit) que permet crear aplicacions nadiues per a múltiples plataformes amb una única base de codi. Això significa que pots escriure el teu codi una vegada i desplegar-lo tant en Android com en iOS, així com en aplicacions web i d'escriptori.

  1. Avantatges de Flutter

Alguns dels avantatges de Flutter inclouen:

  • Desenvolupament Ràpid: Gràcies a la funcionalitat de "Hot Reload", pots veure els canvis en temps real sense haver de recompilar tota l'aplicació.
  • Rendiment Nadiu: Flutter compila a codi nadiu, oferint un rendiment similar al de les aplicacions desenvolupades amb els SDKs nadius.
  • UI Consistent: Utilitza un motor de renderització propi, el que permet tenir una interfície d'usuari consistent en totes les plataformes.
  • Gran Comunitat i Suport: Com que és un projecte de Google, Flutter té un gran suport i una comunitat activa.

  1. Arquitectura de Flutter

Flutter es compon de tres parts principals:

  • Framework: És la capa superior i inclou una col·lecció de biblioteques que proporcionen funcionalitats com widgets, animacions i gestos.
  • Engine: És la capa intermèdia i està escrita en C++. S'encarrega de la renderització, la gestió de plugins i la comunicació amb el sistema operatiu.
  • Embedder: És la capa inferior i s'encarrega de la integració amb les plataformes específiques (Android, iOS, web, escriptori).

  1. Instal·lació de Flutter

Requisits Previs

  • Sistema Operatiu: Windows, macOS o Linux.
  • Espai en Disc: Almenys 2.8 GB (sense incloure espai per a IDEs i altres eines).
  • IDE Recomanades: Android Studio, Visual Studio Code o IntelliJ IDEA.

Passos d'Instal·lació

  1. Descarrega Flutter: Ves a la pàgina oficial de Flutter i descarrega el SDK per al teu sistema operatiu.
  2. Descomprimeix l'Arquiu: Descomprimeix l'arxiu descarregat en una ubicació adequada al teu sistema.
  3. Afegeix Flutter al PATH:
    • Windows: Afegeix la ruta flutter\bin a les variables d'entorn.
    • macOS/Linux: Afegeix export PATH="$PATH:pwd/flutter/bin" al teu fitxer .bashrc o .zshrc.
  4. Verifica la Instal·lació: Obre una terminal i executa flutter doctor. Això verificarà la instal·lació i mostrarà qualsevol requisit addicional que necessitis instal·lar.

  1. Creació d'un Projecte Flutter

Un cop instal·lat Flutter, pots crear un nou projecte seguint aquests passos:

  1. Obre una terminal.
  2. Executa el següent comandament: 
    flutter create my_first_flutter_app
  3. Entra al directori del projecte: 
    cd my_first_flutter_app
  4. Obre el projecte amb el teu IDE preferit.

  1. Estructura d'un Projecte Flutter

Un projecte Flutter típic té la següent estructura:

my_first_flutter_app/
├── android/
├── build/
├── ios/
├── lib/
│   └── main.dart
├── test/
├── .gitignore
├── .metadata
├── pubspec.yaml
└── README.md
  • android/ i ios/: Contenen el codi específic per a Android i iOS respectivament.
  • lib/: Conté el codi Dart de l'aplicació. El fitxer principal és main.dart.
  • test/: Conté les proves unitàries de l'aplicació.
  • pubspec.yaml: Fitxer de configuració del projecte, on es defineixen les dependències i altres configuracions.

  1. El Teu Primer Widget en Flutter

Exemple de Codi

A continuació, crearem un simple "Hello, World!" 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('Hello, World!'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

Explicació del Codi

  • import 'package:flutter/material.dart';: Importa el paquet de material design de Flutter.
  • void main() { runApp(MyApp()); }: La funció principal que executa l'aplicació.
  • MyApp: Una classe que extén StatelessWidget i representa l'aplicació.
  • MaterialApp: Un widget que encapsula l'aplicació i proporciona funcionalitats com la navegació i el tema.
  • Scaffold: Proporciona una estructura bàsica per a l'aplicació, incloent una barra d'aplicació (AppBar) i un cos (body).
  • AppBar: Una barra d'aplicació amb un títol.
  • Center: Un widget que centra el seu fill.
  • Text: Un widget que mostra text.

Resum

En aquesta secció, hem introduït Flutter, un framework de codi obert per crear aplicacions nadiues per a múltiples plataformes. Hem vist els avantatges de Flutter, la seva arquitectura, com instal·lar-lo i com crear un projecte bàsic. També hem explorat l'estructura d'un projecte Flutter i hem creat el nostre primer widget "Hello, World!".

En la següent secció, construirem una aplicació simple amb Flutter per aprofundir en els conceptes apresos.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats