Share
Flutter sta rapidamente diventando uno dei framework più popolari per lo sviluppo di app mobili multipiattaforma. La maggior parte degli sviluppatori Android e iOS oggi sta iniziando a concordare sul fatto che sia un'alternativa più rapida e più a prova di futuro ad altri framework multipiattaforma come React Native e NativeScript.
Google stessa non lascia nulla di intentato per attirare più sviluppatori. Ad esempio, l'I / O di Google quest'anno ha presentato diverse sessioni di approfondimento incentrate sullo sviluppo di app conformi a Material Design. Durante una delle sessioni, Google ha anche annunciato che Flutter sarà una piattaforma di prima classe per Material Design.
In questa serie di tutorial, ho intenzione di aiutarti a padroneggiare le basi dello sviluppo di app Android con Flutter. In questo tutorial, che inizia la serie, mi concentrerò sui widget di Flutter, i mattoni di tutte le app di Flutter.
Per sfruttare al meglio questa serie, avrai bisogno di:
Dopo aver installato alcuni plug-in leggeri, puoi utilizzare Android Studio, gli sviluppatori di applicazioni Android nativi IDE più abituati a sviluppare app Flutter.
Inizia lanciando Android Studio e scegliendo il Configura> Plugin opzione nella schermata di benvenuto.
Nella finestra di dialogo che si apre, premi il tasto Sfoglia i repository pulsante e cerca il plugin Flutter.
Una volta trovato il plugin, premilo Installare pulsante. A questo punto ti verrà chiesto se vuoi installare anche il plug-in Dart. stampa sì procedere.
Dopo aver installato entrambi i plugin, premere il tasto Riavvia Android Studio pulsante per completare la configurazione.
Dopo il riavvio, sarai in grado di vedere a Inizia un nuovo progetto Flutter pulsante sulla schermata di benvenuto di Android Studio. Premerlo per iniziare a creare il tuo primo progetto Flutter.
Nella schermata successiva, scegli il Applicazione Flutter opzione e premere Il prossimo.
Ora vedrai un modulo che richiede vari dettagli sulla tua applicazione Flutter, come il suo nome e la sua posizione. Assicurati di digitare valori validi in tutti i campi.
Il plugin Flutter non viene fornito in bundle con il Flutter SDK. Pertanto, è necessario installare l'SDK separatamente. Puoi farlo premendo il tasto Installa SDK pulsante ora.
A seconda della velocità della connessione Internet, l'installazione potrebbe richiedere un po 'di tempo per essere completata. Dopo che avrà avuto successo, sarai in grado di premere il tasto Il prossimo pulsante per completare la configurazione del progetto.
In questo tutorial, starai scrivendo il codice all'interno del lib / main.dart file. Per impostazione predefinita, conterrà un codice di esempio, di cui non avrai bisogno. Quindi elimina tutti i suoi contenuti prima di procedere.
Il framework Flutter utilizza il linguaggio di programmazione Dart, un linguaggio facile da imparare la cui sintassi è molto simile a quella di Java e C. Di conseguenza, come la maggior parte dei programmi Java e C standalone, anche un'app Flutter ha bisogno di principale() funzione, una funzione speciale che funge da punto di accesso all'app.
Di conseguenza, aggiungere il seguente codice al main.dart file:
void main () // TO DO
A questo punto, puoi premere Shift-F10 per costruire ed eseguire l'app. Se non hai riscontrato errori nei passaggi precedenti, dovresti vedere l'app visualizzare una tela bianca vuota sul tuo dispositivo.
Tutte le app Flutter sono composte da uno o più widget, istanze di classi che consentono di disegnare testo e immagini sullo schermo. Di solito, non dovrai programmare da zero nessun widget di basso livello perché il framework include una vasta gamma di bellissimi widget pre-fatti che aderiscono ai linguaggi di progettazione delle piattaforme Android e iOS.
Per poter utilizzare i widget di base nella tua app, importa il file widgets libreria aggiungendo il seguente codice all'inizio del main.dart file:
import 'package: flutter / widgets.dart';
I widget più semplici che puoi creare sono widget stateless. Come avrai intuito, non hanno uno stato associato a loro e sono quindi statici. Sono ideali per la visualizzazione di etichette, titoli e altri elementi dell'interfaccia utente il cui contenuto è improbabile che cambi durante l'esecuzione dell'app. Per creare un widget senza stato, è necessario estendere il StatelessWidget classe e scavalca il suo costruire() metodo. Il seguente codice di esempio mostra come:
classe MyFirstWidget estende StatelessWidget @override Widget build (contesto BuildContext) // Altro codice qui
Come puoi vedere nel codice sopra, il costruire() il metodo deve restituire a widget oggetto. Sei libero di scegliere e restituire una qualsiasi delle decine di widget prefabbricati offerti da Flutter. Ad esempio, se si desidera visualizzare una riga di testo, è possibile creare e restituire a Testo widget come mostrato di seguito:
Accentsconagua
return Text ("Questo è bello!", textDirection: TextDirection.ltr);Nota che devi sempre ricordarti di specificare la direzione del testo mentre usi a Testo widget di.
Se esegui l'app subito, tuttavia, non sarai in grado di vedere il testo. Questo perché non hai ancora istanziato il tuo widget stateless. Quindi vai al principale() metodo, istanzia il widget al suo interno e passa a EseguiApplicazione () metodo. Ecco come:
runApp (new MyFirstWidget ());
Nel momento in cui aggiungi il codice sopra e salvi il tuo progetto, Android Studio dovrebbe ricaricare automaticamente l'app sul tuo dispositivo, permettendoti di vedere il testo.
Se vuoi visualizzare un'immagine invece del testo, puoi semplicemente sostituire il Testo widget con un Immagine widget all'interno della classe costruire() metodo. Il codice seguente mostra come creare un Immagine widget che scarica e visualizza un'immagine remota:
return Image.network ("https://images.pexels.com/photos/1168940/pexels-photo-1168940.jpeg");Al salvataggio del tuo progetto, dovresti vedere qualcosa di simile sul tuo dispositivo:
Tutte le app Flutter possono essere pensate come alberi di widget. L'app che hai creato nel passaggio precedente è un albero dei widget con un solo widget. utilizzando Testo o Immagine i widget come gli elementi principali dell'albero dei widget, tuttavia, non è una buona idea perché non sarà possibile aggiungere loro alcun widget figlio.
Flutter offre diversi widget che possono fungere da contenitori per altri widget. Quelli più comunemente usati sono il Riga e Colonna widgets. Come suggeriscono i loro nomi, il Riga widget consente di posizionare più widget uno accanto all'altro e il Colonna widget ti aiuta a posizionare i widget uno sotto l'altro. Sono indispensabili quando si creano alberi widget più profondi.
Il seguente codice mostra come usare il Colonna widget per creare un albero di widget con due figli: a Testo widget e un Immagine widget di.
Testo myText = Testo ("Questa è una bella foto!", TextDirection: TextDirection.ltr); Image myImage = Image.network ("https://images.pexels.com/photos/1168940/pexels-photo-1168940.jpeg"); colonna di ritorno (bambini: [myText, myImage]); L'app dovrebbe ora apparire come questa:
Inoltre, ci sono widget che ti aiutano a posizionare meglio un singolo widget. Ad esempio, il Centro il widget ti aiuta a centrare un widget. Allo stesso modo, a Contenitore widget ti permette di aggiungere padding e margini ai tuoi widget.
Il seguente codice mostra come centrare il Colonna widget che hai appena creato incorporandolo in una Centro widget di:
centro di ritorno (bambino: colonna (bambini:[myText, myImage], mainAxisSize: MainAxisSize.min));
Nel codice precedente, si noti che il Colonna widget utilizza una proprietà aggiuntiva chiamata mainAxisSize, il cui valore è impostato su min. È necessario perché, prima di centrare una colonna, devi rendere la sua altezza uguale alla somma delle altezze di tutti i suoi figli. Senza la proprietà, il Colonna il widget sarà grande quanto lo schermo del dispositivo e il Centro il widget non avrà alcun effetto su di esso.
Tutto questo mentre, hai usato i widget di base che fanno parte del widgets biblioteca. Flutter ha una libreria alternativa chiamata Materiale, che offre i widget di Material Design. Per utilizzarlo nella tua app, sostituisci la dichiarazione che importa il file widgets libreria con il seguente:
import 'package: flutter / material.dart';
Quindi, per applicare lo stile di Material Design ai tuoi widget, devi avere un MaterialApp widget nella parte superiore dell'albero dei widget. È inoltre necessario incorporare tutti i widget creati in precedenza in a impalcatura widget, che può servire come schermata iniziale del MaterialApp widget di.
Inoltre, poiché la maggior parte delle app di Material Design ha una barra delle applicazioni, è possibile impostare opzionalmente il impalcatura widget di di appbar proprietà a un nuovo AppBar widget di.
Il seguente codice mostra come fare tutto ciò in modo conciso:
return MaterialApp (home: Scaffold (appBar: AppBar (titolo: Text ("My App")), body: Center (child: Column (children: [myText, myImage], mainAxisSize: MainAxisSize.min),))); L'app dovrebbe apparire molto meglio ora.
I widget stateless sono immutabili. Con il codice che hai scritto nei passaggi precedenti, non c'è un modo semplice per modificare il contenuto del file Testo widget o il Immagine widget di. Perché? Perché la struttura di Flutter preferisce la programmazione reattiva rispetto alla programmazione imperativa. Di conseguenza, la maggior parte dei suoi widget non ha metodi setter in grado di aggiornare i loro contenuti in fase di runtime. Ad esempio, il Testo il widget ha no setText () metodo che ti permetterà di cambiare il testo che sta visualizzando.
I widget di stato, d'altra parte, sono mutabili, anche se non direttamente. Si fidano di Stato oggetti per decidere cosa visualizzare in una determinata istanza. Come tale, ogni volta che a Stato modifiche all'oggetto, il framework aggiornerà automaticamente i contenuti di qualsiasi widget di stato ad esso collegato.
Per creare un widget con stato, è necessario estendere il StatefulWidget classe e scavalca il suo createState () metodo.
classe MySecondWidget estende StatefulWidget @override StatecreateState () // TO DO
Successivamente, è necessario creare una nuova custom Stato classe contenente variabili che formano lo stato del widget stateful. Inoltre, all'interno della classe, è necessario sovrascrivere il costruire() metodo per restituire l'albero dei widget.
Il codice seguente mostra come creare un Stato classe contenente una singola variabile denominata url:
classe MyState estende lo statoString url = "https://source.unsplash.com/random/800x600"; // Un'immagine casuale da Unsplash @override Widget build (contesto BuildContext) // Altro codice qui
Per fare un esempio concreto, creiamo ora un albero di widget Material Design contenente un Immagine widget, che visualizza un'immagine casuale e a RaisedButton widget, che l'utente può premere per caricare una nuova immagine casuale. Il seguente codice mostra come:
return MaterialApp (home: Scaffold (body: Center (child: Column (mainAxisSize: MainAxisSize.min, children:[RaisedButton (child: Text ("Press Me"), onPressed: changeURL,), Image.network (url)]))));
Si noti che il Immagine costruttore di widget ora prende il url variabile come suo input, invece di una stringa letterale. Ciò consente al framework di utilizzare l'ultimo valore della variabile ogni volta che Immagine il widget è disegnato.
Si noti inoltre che il RaisedButton il widget ha un onPressed attributo che punta a un listener di eventi denominato changeURL (). Il metodo non esiste ancora, quindi crealo.
void changeURL () // Altro codice qui
All'interno del metodo, è necessario, ovviamente, modificare il valore di url variabile. Tuttavia, non dovresti cambiarlo direttamente. Se lo fai, la struttura di Flutter non verrà notificata della modifica. Per aggiornare correttamente lo stato di un widget di stato, è necessario apportare sempre tutte le modifiche all'interno di setState () metodo.
Per ora, per visualizzare immagini casuali, ti suggerisco di utilizzare il servizio di Unsplash Source. Tutto quello che devi fare per scaricare un'immagine casuale da esso è fare una richiesta HTTP al suo URL e passare una stringa di query univoca ad esso.
Il codice seguente mostra come farlo utilizzando un timestamp per costruire la stringa di query univoca:
setState (() url = "https://source.unsplash.com/random/800x600/?" + "q = $ new DateTime.now (). millisecondsSinceEpoch";);
A questo punto, la tua abitudine Stato la lezione è pronta. Tutto ciò che devi fare è istanziarlo e restituirlo dal createState () metodo del tuo widget stateful.
return MyState ();
Se passi un'istanza del tuo widget stateful su EseguiApplicazione () metodo, ricarica l'app e premi il pulsante alcune volte, dovresti vederlo visualizzare ogni volta una nuova foto.
Ora sai come lavorare con widget stateless e stateful nelle tue app Flutter. Hai anche imparato come applicare un tema di Material Design, modificare i loro contenuti in modo dinamico e renderli interattivi.
Vale la pena notare che Flutter non usa i widget nativi di qualsiasi piattaforma mobile. Disegna tutti i widget stessi, usando un motore grafico 2D ad alte prestazioni chiamato Skia, che usa ampiamente la GPU. Di conseguenza, le app Flutter spesso funzionano a quasi 60 fps e si sentono molto fluide e reattive.
Per ulteriori informazioni sui widget in Flutter, fare riferimento alla documentazione ufficiale.
