Come creare la tua prima app Flutter per iOS su MacOS

Flutter 1.0 è stato rilasciato da Google il 4 dicembre 2018 ed è un potente strumento che ti consente di creare bellissime app sia su iOS che su Android. Insieme ad altre piattaforme come Firebase, lo sviluppo di app mobili è ora più semplice che mai.

Progetta bellissime app con Flutter

In questo tutorial ti mostrerò come creare la tua prima app Hello World con Flutter su un computer Mac, che testeremo sul simulatore iOS Xcode.

1. Installazione di Flutter

Per installare Flutter sul nostro computer, per prima cosa dovremo scaricare Flutter SDK. Dovremmo anche creare e riposizionarci in una directory di lavoro personalizzata e spostare il file scaricato flutter_macos_v1.0.0-stable.zip nella directory.

Dopodiché possiamo decomprimere lo strumento Flutter e configurare l'ambiente con il seguente codice digitato nella nostra console.

decomprimere flutter_macos_v1.0.0-stable.zip
export PATH = "$ PATH:` pwd` / flutter / bin "

Se tutto va bene, dovremmo essere in grado di controllare le dipendenze inserendo il seguente codice nella nostra console.

dottore svolazzante

Prima di passare al passaggio successivo, dobbiamo anche configurare il nostro profilo bash. Il profilo bash si trova nella home directory denominata .bash_profile, apri il file con un editor di testo e aggiungi la seguente riga.

export PATH = "$ PATH: [PATH_TO_FLUTTER_GIT_DIRECTORY] / flutter / bin"

Dove [PATH_TO_FLUTTER_GIT_DIRECTORY] dovrebbe essere sostituito dal nome della directory di lavoro che abbiamo appena creato per Flutter. Dopo aver configurato il profilo, possiamo eseguire il seguente comando nella nostra home directory per aggiornare il percorso.

fonte ~ / .bash_profile

Nel caso in cui non venga trovato .profile, è sufficiente creare un file vuoto con il nome di .profile e salvarlo nella directory principale, quindi riprovare.

Per verificare che il percorso sia aggiornato correttamente, possiamo digitare il seguente comando nella console.

echo $ PATH

E dovremmo vedere qualcosa che contiene quanto segue nell'argomento return. Dove [PATH_TO_FLUTTER_GIT_DIRECTORY] è la nostra directory di lavoro.

[PATH_TO_FLUTTER_GIT_DIRECTORY] / flutter / bin

2. Impostazione del simulatore iOS

Per configurare prima il simulatore iOS, dobbiamo installare Xcode sul nostro computer, che può essere scaricato sia online che nell'app store. Successivamente, possiamo configurare gli strumenti della riga di comando Xcode per utilizzare la nostra versione appena installata con il seguente comando digitato nella nostra console.

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

Possiamo quindi aprire il simulatore iOS con il seguente comando.

open -a Simulator

Il caricamento potrebbe richiedere del tempo, ma una volta fatto, è possibile passare alla distribuzione della nostra prima applicazione Flutter.

Ci sono altre due cose da notare:

1.Assicurati che il tuo simulatore stia utilizzando un dispositivo a 64 bit (iPhone 5s o successivo) controllando le impostazioni nel menu Hardware> Dispositivo del simulatore.

2. A seconda delle dimensioni dello schermo della macchina di sviluppo, i dispositivi iOS simulati ad alta densità dello schermo potrebbero traboccare lo schermo. Imposta la scala del dispositivo nel menu Finestra> Scala nel simulatore.

3. Creazione di un'app Hello World in Flutter

La creazione di un'app in flutter è abbastanza semplice, basta digitare il seguente comando. Sei libero di cambiare hello_world in qualsiasi altro nome che ti piace. Flutter stamperà "Tutto fatto!" Nella console una volta completato il processo.

flutter crea hello_world

Ora possiamo andare alla directory dell'app con:

cd hello_world

Quindi eseguire l'app con:

corsa svolazzante

Flutter genererà un'applicazione predefinita come quella mostrata nella demo, che ci consente di fare clic su un pulsante mentre tracciamo il numero dei nostri clic. Il componente principale dell'applicazione è definito dal file main.dart all'interno della cartella lib. Prova a sostituire i contenuti all'interno del file main.dart con il seguente codice.

import 'pacchetto: flutter / material.dart';

void main () => runApp (MyApp ());

la classe MyApp estende StatelessWidget {
  @oltrepassare
  Widget build (contesto BuildContext) {
    return MaterialApp (
      titolo: "Welcome to Flutter",
      casa: impalcatura (
        appBar: AppBar (
          titolo: testo ('Welcome to Flutter'),
        ),
        body: Center (
          child: Text ('Hello World'),
        ),
      ),
    );
  }
}

Una volta fatto, possiamo aggiornare il simulatore digitando "r" all'interno della console. E dovremmo vedere il simulatore aggiornato in modo da visualizzare il testo "Hello World" come mostrato di seguito.

Congratulazioni! Ora hai appena creato la tua prima app Flutter, per maggiori informazioni relative a Flutter puoi trovarle sul sito ufficiale. Flutter utilizza principalmente il dardo e puoi trovare altro sul suo sito ufficiale.

Divertiti a creare app mobili!

In futuro potrei scrivere altri tutorial su Flutter. Credo che questo strumento abbia un futuro promettente nel campo dello sviluppo di app mobili. Di seguito sono riportate le guide che ho scritto relative allo sviluppo di Flutter e iOS, che continuerò ad aggiornare l'elenco.

  • Come integrare la tua app Flutter per iOS con Firebase su MacOS
  • Come testare l'app Flutter per iOS sul tuo dispositivo iOS