Codifica un'app per Android con Flutter e Dart

Cosa starai creando

Se stai cercando approcci alternativi allo sviluppo di applicazioni Android, dovresti considerare di dare a Flutter di Google, un framework basato sul linguaggio di programmazione Dart, una prova. 

Le app create con Flutter sono in gran parte indistinguibili da quelle create utilizzando l'SDK di Android, sia in termini di aspetto che di prestazioni. Inoltre, con piccole modifiche, possono essere eseguite anche su dispositivi iOS.

In questo tutorial, ti presenterò le nozioni di base di Flutter mostrandoti come creare una semplice app calcolatrice tip per Android.

Prerequisiti

Per poter seguire questo tutorial, avrai bisogno di:

• l'ultima versione di IntelliJ IDEA
  
• Android Studio 2.2 o versioni successive
  
• un dispositivo o emulatore con Android 4.4 o versioni successive
  
• un computer con Mac o Linux
  

1. Perché usare Flutter?

Funzionando a 60 fps, le interfacce utente create con Flutter funzionano meglio di quelle create con altri framework di sviluppo multipiattaforma come React Native e Ionic. Se questo non ti eccita, ecco alcuni altri motivi per cui potresti voler usare Flutter:

1. Flutter utilizza Dart, un linguaggio veloce orientato agli oggetti con diverse utili funzioni come mixins, generici, isolati e tipi statici facoltativi.
   
2. Flutter ha i propri componenti dell'interfaccia utente, insieme a un motore per renderli su entrambe le piattaforme Android e iOS. La maggior parte di questi componenti dell'interfaccia utente, pronta all'uso, è conforme alle linee guida di Material Design.
   
3. Le app Flutter possono essere sviluppate utilizzando IntelliJ IDEA, un IDE molto simile a Android Studio.
   

2. Installazione di Flutter

Puoi ottenere l'ultima versione di Flutter clonando il suo repository GitHub.

git clone https://github.com/flutter/flutter.git

Flutter ha diverse dipendenze, come i font Dart SDK e Material Design. Fortunatamente, la prima volta che si esegue lo strumento diagnostico di Flutter, tutti vengono installati automaticamente.

cd flutter / bin ./flutter doctor

Per poter creare app Android, devi anche puntare Flutter alla directory in cui hai installato Android Studio.

./ flutter config --android-studio-dir ~ / android-studio

3. Configurazione di IntelliJ IDEA

Sebbene tu possa utilizzare direttamente la CLI di Flutter per creare ed eseguire nuove app, è probabile che tu abbia una migliore esperienza di sviluppo se usi un IDE. L'IDE consigliato per Flutter è IntelliJ IDEA. 

Tuttavia, prima di iniziare a sviluppare app Flutter, è necessario installare plug-in per Dart e Flutter. Per farlo, inizia selezionando Configura> Plugin nella schermata di benvenuto di IntelliJ.

Nella finestra di dialogo che si apre, premi il tasto Sfoglia i repository ... pulsante e cerca il Dardo collegare. Una volta trovato, premi il tasto Installare pulsante per installarlo.

Allo stesso modo, cercare e installare il svolazzare collegare.

Una volta installati entrambi i plug-in, riavviare IntelliJ IDEA.

Ora devi puntare il plugin Flutter nella directory in cui hai installato Flutter. Per fare ciò, selezionare Configura> Impostazioni nella schermata di benvenuto e, nella finestra di dialogo che si apre, vai a Lingue e quadri> Flutter. Nel Percorso SDK flutter campo, digitare il percorso assoluto della directory.

stampa ok per completare la configurazione.

4. Creazione di un nuovo progetto

Per creare un nuovo progetto Flutter, premere il tasto Crea un nuovo progetto pulsante nella schermata di benvenuto. Nel Nuovo progetto dialogo, scegliere svolazzare e premere Il prossimo.

Ora puoi dare un nome significativo al tuo progetto e premere finire.

Una volta che il progetto è stato generato, ti suggerisco di premere il tasto Correre per assicurarti che Dart SDK, i plugin e il framework Flutter siano tutti configurati correttamente. Se lo sono, dopo alcuni secondi, dovresti vedere la seguente schermata sul tuo dispositivo o emulatore:

Si noti che, da questo momento in poi, non è necessario premere il tasto Correre pulsante di nuovo anche dopo aver apportato le modifiche al codice. Supporti flutter ricarica calda, una funzione che consente di inviare istantaneamente gli aggiornamenti all'app senza riavviarla.

5. Creazione di widget

In questo tutorial, creeremo un'app calcolatrice tip con i seguenti widget:

• un Campo di testo per accettare un importo di fattura
  
• un Campo di testo accettare una percentuale di mancia
  
• un RaisedButton l'utente può premere per calcolare la mancia
  

Ogni widget Flutter può essere a StatelessWidget o a StatefulWidget. Come suggerisce il nome, a StatefulWidget ha un Stato oggetto ad esso associato, che consente non solo di memorizzare i dati, ma anche di reagire ai cambiamenti nei dati.

UN StatelessWidget, d'altra parte, è un oggetto più semplice, non progettato per memorizzare in modo persistente qualsiasi dato. Per mantenere questo tutorial breve, creeremo il nostro calcolatore tip come StatelessWidget. Pertanto, aperto main.dart, rimuovere tutto il suo contenuto e aggiungervi il seguente codice:

import 'package: flutter / material.dart'; class TipCalculator estende StatelessWidget 

Nel codice sopra, il importare la linea è importante perché material.dart è la libreria che contiene tutti i widget di Material Design che useremo in questa app.

Per memorizzare l'importo della fattura e la percentuale di punta, aggiungi due variabili membro alla classe.

double billAmount = 0.0; double tipPercentage = 0.0;

Per iniziare a creare l'interfaccia utente dell'app, ignorare il costruire() metodo.

@override Widget build (contesto BuildContext) // Più codice va qui

Cerchiamo ora di creare i due Campo di testo widgets. Mentre lo facciamo, possiamo specificare dettagli come le etichette che vogliamo associare ai widget e i tipi di tastiere virtuali che devono essere visualizzate quando sono a fuoco.

Perché non possiamo recuperare direttamente il contenuto di a Campo di testo widget, dobbiamo anche associare un onChanged gestore di eventi con esso. All'interno del gestore, che riceve un InputValue oggetto, possiamo aggiornare il contenuto delle variabili membro della nostra classe.

Di conseguenza, aggiungi il seguente codice all'interno di costruire() metodo:

// Crea il primo campo di testo TextField billAmountField = new TextField (labelText: "Bill amount (\ $)", keyboardType: TextInputType.number, onChanged: (Valore InputValue) try billAmount = double.parse (value.text); catch (exception) billAmount = 0.0;); // Crea un altro campo di input TextField tipPercentageField = new TextField (labelText: "Tip%", keyboardType: TextInputType.number, hintText: "15", onChanged: (Valore InputValue) try tipPercentage = double.parse (value.text) ; catch (exception) tipPercentage = 0.0;);

Anche se non hai mai lavorato con Dart prima, il codice sopra dovrebbe essere abbastanza intuitivo, purché tu abbia familiarità con Java. Ad esempio, puoi vedere che stiamo usando il parse () metodo per convertire ciascuno Campo di testo contenuto del testo del widget su a Doppio oggetto. Perché il parse () il metodo può lanciare a FormatException, è anche circondato da a prova a prendere bloccare.

Creare a RaisedButton il widget è molto simile alla creazione di un Campo di testo widget di. Tuttavia, per assegnare un'etichetta, è necessario crearne uno nuovo Testo widget e aggiungilo come suo bambino.

// Crea pulsante RaisedButton calculateButton = new RaisedButton (child: new Text ("Calculate"), onPressed: () // Più codice va qui);

Dentro il onPressed gestore di eventi del pulsante, calcoleremo il suggerimento e l'importo totale da pagare e mostreremo entrambi all'interno di una finestra di dialogo modale. Per creare la finestra di dialogo, possiamo usare il AlertDialog classe. Una volta creata, la finestra di dialogo può essere visualizzata passandola come argomento al file showDialog () metodo.

Di conseguenza, aggiungi il seguente codice all'interno di onPressed gestore di eventi:

// Calcola tip e total double calculateTip = billAmount * tipPercentage / 100.0; double total = billAmount + calculateTip; // Genera dialogo AlertDialog dialog = new AlertDialog (content: new Text ("Tip: \ $$ calculateTip \ n" "Total: \ $$ total")); // Mostra dialog showDialog (context: context, child: dialog);

Nel codice precedente, si noti che abbiamo usato la funzione di interpolazione delle stringhe di Dart per incorporare le variabili all'interno di soddisfare del dialogo Inoltre, puoi vedere che i valori letterali delle stringhe in Dart possono essere concatenati semplicemente posizionandoli uno accanto all'altro - sebbene tu possa usare + anche operatore, se ti va.

6. Creazione di un albero dei widget

Un'app Flutter di solito non è altro che un albero di widget. In altre parole, crei un'app Flutter semplicemente creando più widget e stabilendo relazioni genitore-figlio tra loro.

Attualmente non ci sono relazioni tra i widget che abbiamo creato nel passaggio precedente. Come avrai intuito, saranno tutti fratelli, quindi creiamo per loro un widget genitore.

Un widget che può avere più figli viene solitamente definito widget di layout. Flutter offre diversi widget di layout tra cui scegliere. Per la nostra app, il Colonna il widget è il più appropriato perché posiziona tutti i suoi figli uno sotto l'altro.

Inoltre, per conformarsi alle specifiche di Material Design, dobbiamo aggiungere una spaziatura di 16 dp al Colonna widget di. Possiamo farlo rendendolo un bambino di una Contenitore widget di.

Container container = new Container (padding: const EdgeInsets.all (16.0), child: new Column (child: [billAmountField, tipPercentageField, calculateButton]));

Un'interfaccia utente di Material Design non è completa senza una barra dell'applicazione. Pertanto, creane uno ora usando il AppBar widget di.

AppBar appBar = new AppBar (titolo: new Text ("Tip Calculator"));

I layout contenenti barre e contenitori di applicazioni sono così comuni che Flutter offre a impalcatura widget per aiutarti a stabilire rapidamente una relazione tra loro.

Scaffold scaffold = new Scaffold (appBar: appBar, body: container);

Con il impalcatura widget alla radice, il nostro albero dei widget è ora pronto. Puoi andare avanti e usare il impalcatura widget come valore di ritorno del costruire() metodo.

ritorno dell'impalcatura;

Se hai difficoltà a visualizzare l'albero, il seguente diagramma dovrebbe aiutare:

7. Creazione di un punto di ingresso

Il nostro file Dart ha bisogno di a principale() funzione come il suo punto di ingresso. Al suo interno, dobbiamo chiamare il EseguiApplicazione () funzione per gonfiare e rendere effettivamente l'albero dei widget che abbiamo creato nel passaggio precedente.

Inoltre, il nostro TipCalculator il widget deve essere inserito all'interno di a MaterialApp widget in modo che sia possibile applicare a un tema di Material Design e una combinazione di colori. Pertanto, aggiungere il seguente codice a main.dart:

void main () runApp (new MaterialApp (titolo: 'Tip Calculator', home: new TipCalculator ())); 

Ora puoi premere il tasto Hot Ricarica App pulsante per iniziare a utilizzare l'app sul dispositivo.

Conclusione

In questo tutorial, hai imparato a usare Flutter e Dart, insieme a IntelliJ IDEA, per creare una semplice app per Android.

Secondo me, Flutter ha quasi tutto ciò che uno sviluppatore potrebbe cercare in un framework di sviluppo di app per dispositivi mobili multipiattaforma. Prima di decidere di iniziare a costruire la tua prossima grande app, tuttavia, tieni presente che è ancora una struttura molto nuova e in rapida evoluzione.

Per saperne di più su Flutter, puoi fare riferimento alla sua documentazione ufficiale.