En aquesta secció, aprendrem a configurar l'entorn de desenvolupament necessari per començar a treballar amb Flutter. Aquest procés inclou la instal·lació de Flutter SDK, la configuració d'un editor de codi i la verificació de la instal·lació.
- Instal·lació de Flutter SDK
Pas 1: Descarregar Flutter SDK
- Visita la pàgina oficial de Flutter: Flutter SDK
- Selecciona el teu sistema operatiu (Windows, macOS, Linux).
- Descarrega el fitxer zip corresponent al teu sistema operatiu.
Pas 2: Descomprimir el fitxer
- Descomprimeix el fitxer zip en una ubicació adequada al teu sistema. Per exemple, a
C:\src\
a Windows o~/development/
a macOS/Linux. - Afegeix Flutter al PATH:
- Windows:
- Obre el Panell de Control i selecciona Sistema i Seguretat > Sistema > Configuració avançada del sistema.
- Fes clic a Variables d'entorn i, a la secció de Variables del sistema, selecciona la variable
Path
i fes clic a Edita. - Afegeix la ruta on has descomprimit Flutter, per exemple,
C:\src\flutter\bin
.
- macOS/Linux:
- Obre el terminal.
- Afegeix la següent línia al fitxer
~/.bashrc
o~/.zshrc
:export PATH="$PATH:`pwd`/flutter/bin"
- Guarda el fitxer i executa
source ~/.bashrc
osource ~/.zshrc
.
- Windows:
Pas 3: Verificar la instal·lació
- Obre una nova finestra de terminal o línia de comandes.
- Executa la següent comanda:
flutter doctor
- Aquesta comanda verificarà la instal·lació i mostrarà una llista de components que necessiten ser instal·lats o configurats.
- Instal·lació d'un Editor de Codi
Opció 1: Visual Studio Code (VS Code)
- Descarrega i instal·la VS Code des de Visual Studio Code.
- Instal·la les extensions de Flutter i Dart:
- Obre VS Code.
- Ves a Extensions (icona de quadrat a la barra lateral esquerra).
- Cerca
Flutter
i instal·la l'extensió oficial de Flutter. - L'extensió de Dart s'instal·larà automàticament amb l'extensió de Flutter.
Opció 2: Android Studio
- Descarrega i instal·la Android Studio des de Android Studio.
- Instal·la el plugin de Flutter:
- Obre Android Studio.
- Ves a
File > Settings > Plugins
. - Cerca
Flutter
i instal·la el plugin. - Android Studio també instal·larà el plugin de Dart automàticament.
- Configuració de Dispositius Emulats
Emulador d'Android
- Instal·la l'Android SDK:
- Obre Android Studio.
- Ves a
File > Settings > Appearance & Behavior > System Settings > Android SDK
. - Assegura't que el
Android SDK
està instal·lat.
- Configura un dispositiu virtual:
- Ves a
Tools > AVD Manager
. - Crea un nou dispositiu virtual seleccionant un dispositiu i una imatge del sistema.
- Inicia l'emulador.
- Ves a
Simulador d'iOS (només per a macOS)
- Instal·la Xcode des de l'App Store.
- Configura les eines de línia de comandes de Xcode:
- Obre Xcode.
- Ves a
Preferences > Locations
. - Selecciona la versió de Xcode a
Command Line Tools
.
- Inicia el simulador d'iOS:
- Obre Xcode.
- Ves a
Xcode > Open Developer Tool > Simulator
.
- Verificació Final
- Executa la comanda:
flutter doctor
- Assegura't que tots els components estan correctament instal·lats. La sortida hauria de mostrar una llista de components amb marques de verificació verdes.
Conclusió
Ara que has configurat l'entorn de desenvolupament, estàs llest per començar a crear aplicacions amb Flutter. En el següent tema, explorarem l'arquitectura de Flutter per comprendre millor com funciona aquest framework.
Curs de Desenvolupament Flutter
Mòdul 1: Introducció a Flutter
- Què és Flutter?
- Configuració de l'Entorn de Desenvolupament
- Comprensió de l'Arquitectura de Flutter
- Creació de la Teva Primera Aplicació Flutter
Mòdul 2: Conceptes Bàsics de Programació en Dart
- Introducció a Dart
- Variables i Tipus de Dades
- Sentències de Flux de Control
- Funcions i Mètodes
- Programació Orientada a Objectes en Dart
Mòdul 3: Widgets de Flutter
- Introducció als Widgets
- Widgets Stateless vs Stateful
- Widgets Bàsics
- Widgets de Disseny
- Widgets d'Entrada i Formulari
Mòdul 4: Gestió de l'Estat
Mòdul 5: Navegació i Enrutament
- Introducció a la Navegació
- Navegació Bàsica
- Rutes Nomenades
- Passar Dades Entre Pantalles
- Deep Linking
Mòdul 6: Xarxes i APIs
- Obtenir Dades d'Internet
- Analitzar Dades JSON
- Gestió d'Errors de Xarxa
- Ús d'APIs REST
- Integració de GraphQL
Mòdul 7: Persistència i Emmagatzematge
- Introducció a la Persistència
- Preferències Compartides
- Emmagatzematge de Fitxers
- Base de Dades SQLite
- Ús de Hive per a l'Emmagatzematge Local
Mòdul 8: Conceptes Avançats de Flutter
- Animacions en Flutter
- Pintura Personalitzada i Canvas
- Canals de Plataforma
- Isolates i Concurrència
- Optimització del Rendiment
Mòdul 9: Proves i Depuració
- Introducció a les Proves
- Proves Unitàries
- Proves de Widgets
- Proves d'Integració
- Tècniques de Depuració
Mòdul 10: Desplegament i Manteniment
- Preparació per al Llançament
- Construcció per a iOS
- Construcció per a Android
- Integració i Desplegament Continu (CI/CD)
- Manteniment i Actualització de la Teva Aplicació