Desenvolupament d'apps a Flutter: El teu Primer Viatge al Món de les Apps

Hola, desenvolupador! Alguna vegada t'has preguntat com crear la teva aplicació mòbil des de zero? Estàs al lloc correcte!

En aquest post, ens submergirem en l'emocionant món del desenvolupament d'aplicacions Flutter. Preparat per aprendre a crear la teva pròpia app Flutter? Anem allà!

Què és Flutter i per què l'hauries d'utilitzar?

Abans de submergir-nos en el desenvolupament d'aplicacions Flutter, és important entendre què és Flutter i per què és tan increïble. Flutter és un marc de desenvolupament de codi obert creat per Google que et permet construir aplicacions natives per a iOS i Android des d'una sola base de codi. Sí, has llegit bé! Amb Flutter, pots escriure una vegada i executar a qualsevol lloc.

Preparant-te per al Viatge: Configuració de Flutter

Abans de començar el nostre viatge de desenvolupament d'aplicacions Flutter, necessitem configurar el nostre entorn de desenvolupament. Per fer-ho, assegureu-vos de tenir instal·lat Flutter al vostre sistema. Podeu trobar guies detallades a continuació.

Instal·lació de Flutter a macOS i Windows

Abans de començar a desenvolupar aplicacions Flutter, necessites tenir Flutter instal·lat al teu sistema. A continuació, et guiaré a través del procés d'instal·lació a sistemes macOS i Windows.

macOS

Requisits previs:

• macOS amb la versió més recent.
• Xcode (disponible a la Mac App Store).
• Habilitar les eines de línia d'ordres de Xcode. Pots fer-ho executant la següent comanda al teu terminal:

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

Passos per instal·lar Flutter a macOS:

1. Descàrrega Flutter: Obre el teu terminal i executa la següent ordre per descarregar Flutter al teu directori d'inici: git clone https: //github.com/flutter/flutter.git -b stable
2. Afegeix Flutter al Path: Afegeix el directori flutter/bin al PATH del teu sistema perquè puguis executar ordres de Flutter des de qualsevol ubicació al teu terminal: export PATH="$PATH:`pwd`/ flutter/bin". Per fer-ho de manera permanent, podeu afegir la línia anterior al final del vostre fitxer de perfil, com ara .bash_profile o .zshrc.
3. Verifica la instal·lació: Per verificar que Flutter s'hagi instal·lat correctament, executa la següent ordre: flutter doctor .Això verificarà la teva configuració i et mostrarà si hi ha alguna cosa que has de corregir abans de començar.

Windows

Requisits previs:

• Windows 7 o superior (64 bits).
• PowerShell habilitat (PowerShell ve habilitat per defecte a Windows 10).

Passos per a Instal·lar Flutter a Windows:

1. Descàrrega Flutter: Descarrega el fitxer ZIP de Flutter des del lloc web oficial de Flutter (https://flutter.dev/docs/get-started/install/windows). Descomprimeix el fitxer ZIP en un lloc fàcilment accessible al sistema, per exemple, C:\flutter.
2. Afegeix Flutter al Path: Afegeix la ruta del directori flutter/bin al Path del sistema per poder executar ordres de Flutter des de qualsevol ubicació a la teva línia d'ordres. Per fer-ho, seguiu aquests passos: Fes clic amb el botó dret a "Aquest PC" a l'escriptori oa l'Explorador de Windows.Selecciona "Propietats" i després feu clic a "Configuració avançada del sistema" al panell esquerre.A la finestra de Propietats del sistema, feu clic a "Variables d'entorn".A la secció "Variables del sistema", troba i selecciona la variable Path, després fes clic a "Editar".Afegeix la ruta del directori flutter/bin al final de la llista de valors separats per punt i coma. Per exemple, C:\flutter\bin.

Una vegada que tinguis Flutter instal·lat, obre el teu terminal i executa la següent ordre per assegurar-te que tot està configurat correctament:

flutter doctor

Aquesta ordre verificarà la vostra configuració i us indicarà si hi ha alguna cosa que hagueu de corregir abans de començar.

Creant el teu Primer Projecte Flutter

Ara que tot està configurat, és hora de crear el vostre primer projecte Flutter. Obre el teu terminal i executa la següent ordre:

flutter create mi_primera_app_flutter

Aquesta ordre crearà un nou projecte Flutter anomenat "la meva_primera_app_flutter". Quan el procés de creació es completi, entra al directori del projecte amb:

cd mi_primera_app_flutter

Explorant l'Estructura del Projecte Flutter

Abans d'escriure codi, és essencial entendre l'estructura d'un projecte típic Flutter. El teu projecte contindrà diversos fitxers i carpetes importants, incloent:

• lib/: Aquesta carpeta és on escriuràs el codi font de la teva aplicació Flutter. El fitxer main.dart és el punt d'entrada de la vostra aplicació.
• pubspec.yaml: En aquest fitxer, podeu afegir dependències externes, com ara paquets i recursos , que la teva aplicació necessitarà.

Escrivint la teva Primera Aplicació Flutter

Ara que coneixeu l'estructura bàsica d'un projecte Flutter, és hora d'escriure una mica de codi. Obre el fitxer lib/main.dart al teu editor de codi preferit i substitueix-lo amb el codi següent:

import 'package:flutter/material.dart';

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

class MiPrimeraApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Mi Primera App Flutter'),
        ),
        body: Center(
          child: Text('¡Hola, mundo!'),
        ),
      ),
    );
  }
}

Aquest codi crea una aplicació Flutter simple amb una barra daplicació i un missatge al centre de la pantalla que diu "Hola, món!".

Pots personalitzar i expandir aquest codi segons les teves necessitats i creativitat.

Provant la teva Aplicació en un Emulador o Dispositiu Físic

Abans dacabar, és crucial provar la teva aplicació en un emulador o dispositiu físic. Per fer-ho, assegureu-vos de tenir un emulador en funcionament o connecta el vostre dispositiu Android o iOS al vostre ordinador.

Després, al teu terminal, navega al directori del teu projecte i executa la següent ordre:

flutter run

Aquesta ordre compilarà la teva aplicació i l'executarà a l'emulador o dispositiu connectat. Voilà! Ara podeu veure la vostra primera aplicació Flutter en acció.

Conclusió

Felicitats! Heu creat la teva primera aplicació Flutter des de zero. Aquest és només el començament del teu viatge a l'emocionant món del desenvolupament d'aplicacions mòbils. Recordeu que la pràctica constant, l'exploració i la curiositat són els vostres millors amics en aquest viatge.

Espero que aquest post t'hagi ajudat a fer els teus primers passos al desenvolupament d'apps Flutter. Recorda que la comunitat de Flutter és vasta i sempre hi és per ajudar-te en cas que t'atoris en algun punt.

Bona sort en el viatge de desenvolupament d'aplicacions Flutter! 🚀