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ó.

  1. Instal·lació de Flutter SDK

Pas 1: Descarregar Flutter SDK

  1. Visita la pàgina oficial de Flutter: Flutter SDK
  2. Selecciona el teu sistema operatiu (Windows, macOS, Linux).
  3. Descarrega el fitxer zip corresponent al teu sistema operatiu.

Pas 2: Descomprimir el fitxer

  1. Descomprimeix el fitxer zip en una ubicació adequada al teu sistema. Per exemple, a C:\src\ a Windows o ~/development/ a macOS/Linux.
  2. Afegeix Flutter al PATH:
    • Windows:
      1. Obre el Panell de Control i selecciona Sistema i Seguretat > Sistema > Configuració avançada del sistema.
      2. Fes clic a Variables d'entorn i, a la secció de Variables del sistema, selecciona la variable Path i fes clic a Edita.
      3. Afegeix la ruta on has descomprimit Flutter, per exemple, C:\src\flutter\bin.
    • macOS/Linux:
      1. Obre el terminal.
      2. Afegeix la següent línia al fitxer ~/.bashrc o ~/.zshrc:
        export PATH="$PATH:`pwd`/flutter/bin"
        
      3. Guarda el fitxer i executa source ~/.bashrc o source ~/.zshrc.

Pas 3: Verificar la instal·lació

  1. Obre una nova finestra de terminal o línia de comandes.
  2. Executa la següent comanda:
    flutter doctor
    
  3. Aquesta comanda verificarà la instal·lació i mostrarà una llista de components que necessiten ser instal·lats o configurats.

  1. Instal·lació d'un Editor de Codi

Opció 1: Visual Studio Code (VS Code)

  1. Descarrega i instal·la VS Code des de Visual Studio Code.
  2. 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

  1. Descarrega i instal·la Android Studio des de Android Studio.
  2. 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.

  1. Configuració de Dispositius Emulats

Emulador d'Android

  1. 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.
  2. 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.

Simulador d'iOS (només per a macOS)

  1. Instal·la Xcode des de l'App Store.
  2. 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.
  3. Inicia el simulador d'iOS:
    • Obre Xcode.
    • Ves a Xcode > Open Developer Tool > Simulator.

  1. Verificació Final

  1. Executa la comanda:
    flutter doctor
    
  2. 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

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

© Copyright 2024. Tots els drets reservats