Tutorial Flutter Partea 1: Construiți o aplicație Flutter de la zero

Aflați cum puteți începe să creați o aplicație Flutter, prima parte a seriei de tutorial flutter.

Partea 1: Cum să construiți o aplicație flutter de la zero

În această serie de tutorial, vă vom ghida pas cu pas despre cum puteți crea o aplicație mobilă de comerț electronic folosind flutter. Aplicația mobilă ar fi o aplicație open source pentru platforma Aviacommerce. Tutorialul se va concentra pe această aplicație pentru a introduce conceptele importante ale cadrului flutter.

Acest tutorial este prima parte a seriei de tutorial de flutter: -

  1. Cum să construiți o aplicație flutter de la zero
  2. Cum să aranjați o aplicație în flutter (în curând)
  3. Cum se organizează datele în flutter (în curând)
  4. Listarea datelor în flutter (în curând)

Mai multe actualizări ale conținutului pe măsură ce înaintăm.

Blogul va explica cum se creează machete și se introduce starea pas cu pas. Pentru a vă scufunda direct în cod, întregul proiect este disponibil în Github sub umbrela AviaCommerce. Simțiți-vă liber să o furcați și să vă jucați.

Noi, la AviaCommerce, căutăm în mod activ noi cadre care redefinesc dezvoltarea de software. Echipa noastră urmărește îndeaproape activitatea în Flutter de la prima lansare beta.

În sfârșit, Google a anunțat Flutter 1.0, prima versiune stabilă a setului de instrumente UI pentru crearea de experiențe frumoase, native pentru iOS și Android, dintr-o singură bază de cod.

Flutter are o documentație excepțională pentru configurarea mediului de dezvoltare. Urmați acest ghid oficial de instalare pentru a începe.

După finalizarea configurației, putem începe cu un nou proiect de testare. Prefer Android Studio, deoarece oferă o experiență IDE completă, integrată pentru Flutter. Android Studio va necesita un plugin de editor pentru Dart.

Lansați Android Studio. Puteți vedea o opțiune pentru inițializarea unui nou proiect bazat pe Flutter.

Alegeți Aplicația Flutter din lista de configurații.

Gândiți-vă la un nume fantezist pentru prima dvs. aplicație Flutter. Sau pur și simplu mergeți cu cronometru dacă sunteți rău în a numi chestii ca mine .

Un ultim pas în proces, dialogul vă va solicita numele pachetului de aplicații.

După acest pas, Flutter SDK va crea o structură de director inițială pentru aplicație. Toate acțiunile se duc în folderul lib și main.dart este punctul de plecare în execuția aplicației.

În Flutter, totul este un widget. Imaginile, pictogramele și textul dintr-o aplicație Flutter sunt widget-uri. Chiar și elemente de dispunere, cum ar fi rândurile, coloanele și rețelele care aranjează, constrâng și aliniează alte widget-uri, sunt însăși widget-uri.

Ideea bună este că Flutter SDK creează un widget interactiv la rădăcina aplicației aici. Pentru a face lucrurile un pic mai ușor, permiteți-l să eliminați acest lucru și să începeți cu un design minimal (Hello World!).

Fișierul dvs. main.dart ar trebui să arate astfel:

Căutarea emulatorului Android o deschide cu un widget Text salutând „Hello World!”

Observați widgetul în centrul atenției aici. Vom încerca să modificăm corpul MaterialApp pentru a scoate la suprafață interfața așa cum ne dorim. Versiunea originală este cea prezentată mai jos.

Elementele de aspect (widgeturi) din Flutter pot fi clasificate în două tipuri, în funcție de faptul că găzduiesc un singur widget sau sunt capabile să dețină o serie de widget-uri. Containerele, căptușeala aparțin primului, în timp ce rândul, coloana etc. se află sub cel de-al doilea.

Introduceți un aspect de rând cu trei copii de widgeturi de tip text.

Înainte să continuăm și să stilăm componentele, este recomandabil să creăm un nou widget care să se ocupe de stil, astfel încât să respectăm principiul DRY.

Înlocuiți cei trei copii cu un widget personalizat definit mai târziu în același fișier. Fișierul main.dart devine acum

Cronometrul arată acum cam neclar. Nu sunt foarte bun în interfețele de utilizator, dar să încercăm tot posibilul. Împachetați widgetul Text în interiorul unui container și decorați containerul cu o culoare de fundal împreună cu umplutura pentru a spația elementele.

De asemenea, introduceți un buton pentru a efectua acțiunile pe cronometru sub cele trei widgeturi cu text în stil. Codul modificat arată astfel.

Aici este cea mai parte integrantă a aplicației - starea. Statul va păstra valoarea curentă a cronometrului și dacă temporizatorul este activ (rulează) sau nu. Am venit cu clasa TimerState care este responsabilă pentru menținerea stării și se ocupă de construirea arborelui widget.

Apăsarea butonului comută este variabila activă.

Dart vine cu un modul elegant pentru operații async. Putem folosi clasa lui Timer pentru a ne ajuta să creștem secunde. TimerAppState modificat este descris mai jos. Observați că am refactorizat clasa Timer la TimerApp pentru a preveni ambiguitatea cu clasa Timer în modulul async.

Aplicația este complet funcțională acum. Codul principal.dart complet poate fi găsit aici. Sper să lămurească elementele de bază ale cadrului Flutter.

FLUTTERFORUM: LOC DE UNDE FLOTTER DEV HANGOUT

FlutterForum este un loc în care dezvoltatorii de flutter atârnă și se implică în conversații și întrebări.

vizitați https://flutterforum.co

Dacă v-a plăcut acest tutorial, vă rugăm să faceți clic pe butonul and și să partajați pentru a ajuta alții să-l găsească! Simțiți-vă liber să lăsați un comentariu mai jos.