Share
Ce veți creaDacă sunteți în căutarea unor abordări alternative pentru dezvoltarea de aplicații Android, ar trebui să încercați să oferiți Flutter-ului Google, un cadru bazat pe limbajul de programare Dart, o încercare.
Aplicațiile construite cu Flutter sunt în mare măsură indistinguizabile față de cele construite folosind SDK-ul Android, atât în ceea ce privește aspectul, cât și performanța. Mai mult, cu trucuri minore, pot fi difuzate pe dispozitive iOS.
În acest tutorial, vă voi prezenta la elementele de bază ale Flutter, arătându-vă cum să construiți o aplicație simplă pentru calculator.
Pentru a putea urma acest tutorial, veți avea nevoie de:
Făcând la 60 fps, interfețele utilizator create cu Flutter funcționează mult mai bine decât cele create cu alte cadre de dezvoltare cross-platform, cum ar fi React Native și Ionic. În cazul în care nu vă excitează, iată câteva motive pentru care ați putea folosi Flutter:
Puteți obține cea mai recentă versiune de Flutter prin clonarea repozitorului GitHub.
git clone https://github.com/flutter/flutter.git
Flutterul are mai multe dependențe, cum ar fi fonturile Dart SDK și Material Design. Din fericire, prima dată când rulați instrumentul de diagnostic al Flutter, toate acestea sunt instalate automat.
cd flutter / bin ./flutter doctor
Pentru a putea să construiți aplicații Android, trebuie să indicați și Flutter în directorul în care ați instalat aplicația Android Studio.
./ flutter config - android-studio-dir ~ / android-studio
Deși puteți utiliza direct CLI-ul Flutter pentru a crea și a rula aplicații noi, este posibil să aveți o experiență de dezvoltare mult mai bună dacă utilizați un IDE. IDE-ul recomandat pentru Flutter este IntelliJ IDEA.
Înainte de a începe să dezvoltați aplicațiile Flutter cu acesta, trebuie să instalați pluginuri pentru Dart și Flutter. Pentru a face acest lucru, începeți prin selectarea Configurează> Plugin-uri în ecranul de întâmpinare IntelliJ.
În dialogul care apare, apăsați pe Navigați în depozite ... și căutați Lance conecteaza. Odată ce ați găsit, apăsați pe Instalare pentru a-l instala.
În mod similar, căutați și instalați fluturare conecteaza.
Odată ce ambele pluginuri sunt instalate, reporniți IntelliJ IDEA.
Acum trebuie să îndreptați pluginul Flutter către directorul în care ați instalat Flutter. Pentru a face acest lucru, selectați Configurați> Setări în ecranul de întâmpinare și, în dialogul care apare, navigați la Limbi și cadre> Flutter. În Flutter SDK path câmp, introduceți calea absolută a directorului.
presa O.K pentru a finaliza configurația.
Pentru a crea un nou proiect Flutter, apăsați pe Creați un nou proiect pe ecranul de întâmpinare. În Proiect nou dialog, alegeți fluturare și apăsați Următor →.
Acum puteți da un nume semnificativ proiectului dvs. și apăsați finalizarea.
Odată ce proiectul a fost generat, vă sugerez să apăsați pe Alerga pentru a vă asigura că SDK-ul Dart, pluginurile și cadrul Flutter sunt configurate corect. Dacă sunt, după câteva secunde, ar trebui să vedeți următorul ecran pe dispozitiv sau emulator:
Rețineți că, din acest punct, nu trebuie să apăsați pe Alerga butonul din nou, chiar și după efectuarea modificărilor de cod. Flutter suporturi încărcare reîncărcabilă, o caracteristică care vă permite să împingeți instantaneu actualizări la aplicație fără a o reporni.
În acest tutorial, vom crea o aplicație pentru calculatoare tip cu următoarele widget-uri:
Accentsconagua
TextField să accepte o sumă a facturiiTextField să accepți un procentajRaisedButton utilizatorul poate apăsa pentru a calcula vârfulFiecare widget Flutter poate fi fie StatelessWidget sau a StatefulWidget. După cum sugerează și numele, a StatefulWidget are o Stat obiect asociat cu acesta, ceea ce îi permite nu numai să stocheze date, ci și să reacționeze la schimbările din date.
A StatelessWidget, pe de altă parte, este un obiect mai simplu, care nu este proiectat să stocheze în mod persistent date. Pentru a păstra scurt acest tutorial, vom crea un tip de calculator ca un StatelessWidget. Prin urmare, deschis main.dart, eliminați toate conținutul și adăugați următorul cod:
pachet de import: flutter / material.dart "; clasa TipCalculator extinde statlessWidget
În codul de mai sus, import line este importantă pentru că material.dart este biblioteca care conține toate widget-urile Material Design pe care le vom folosi în această aplicație.
Pentru a stoca suma facturilor și a procentului de vârf, adăugați două clase ale membrilor la clasă.
double billAmount = 0,0; vârf dubluPercentaj = 0,0;
Pentru a începe crearea interfeței de utilizator a aplicației, înlocuiți-o construi() metodă.
@override Widget build (Context BuildContext) // Mai multe coduri aici
Să creați acum cele două TextField widget-uri. În timp ce facem acest lucru, putem specifica detalii cum ar fi etichetele pe care dorim să le asociăm cu widget-urile și tipurile de tastaturi virtuale care trebuie afișate când sunt focalizate.
Deoarece nu putem recupera direct conținutul unui a TextField widget, trebuie să asociem și un onChanged manipulator de evenimente cu el. În interiorul handlerului, care primește un InputValue obiect, putem actualiza conținutul variabilelor membrilor clasei noastre.
În consecință, adăugați următorul cod în interiorul construi() metodă:
// Crearea primului câmp de introducere a textului TextField billAmountField = TextField nou (labelText: "Sumă factură (\ $)", tastaturăTip: TextInputType.number, onChanged: (valoare InputValue) try billAmount = double.parse (value.text) captură (excepție) billAmount = 0.0;); // Creează un alt câmp de introducere TextField tipPercentageField = TextField nou (textText: "Tip%", tastaturăTip: TextInputType.number, hintText: "15", onChanged: (Valoare InputValue) try tipPercentage = double.parse (value.text) ; captură (excepție) tipPercentage = 0.0;);
Chiar dacă nu ați lucrat niciodată cu Dart înainte, codul de mai sus ar trebui să fie destul de intuitiv, atât timp cât sunteți familiarizați cu Java. De exemplu, puteți vedea că folosim analiza() pentru a converti fiecare TextField widget-ul de conținut text la un dubla obiect. Deoarece analiza() metoda poate arunca o FormatException, este, de asemenea, înconjurat de o încearcă să prinzi bloc.
Crearea unui RaisedButton widgetul seamănă cu crearea unui TextField widget. Cu toate acestea, pentru a le atribui o etichetă, trebuie să creați un nou Text widget și adăugați-l ca pe ei copil.
// Crează butonul RaisedButton calculateButton = nou RaisedButton (copil: text nou ("Calculate"), onPressed: () // Mai multe coduri intră aici);În interiorul onPressed manipularea evenimentului butonului, vom calcula sfatul și suma totală care urmează să fie plătită și afișată atât în interiorul unui dialog modal. Pentru a crea dialogul, putem folosi AlertDialog clasă. Odată creat, dialogul poate fi afișat prin trecerea lui ca argument la showDialog () metodă.
În consecință, adăugați următorul cod în interiorul onPressed organizatorul evenimentului:
// Calculați vârful și dublul total calculatTip = billAmount * tipPercentaj / 100.0; dublu total = billAmount + calculatTip; // Generarea dialogului AlertDialog dialog = nou AlertDialog (conținut: text nou ("Tip: \ $$ calculatTip \ n" "Total: \ $$ total")); // Afișați dialogul de dialog ShowDialog (context: context, copil: dialog);În codul de mai sus, rețineți că am folosit caracteristica de interpolare a șirului Dart pentru a încorpora variabilele din interiorul lui conţinut a dialogului. De asemenea, puteți vedea că literalul șirului în Dart poate fi concatenat doar prin plasarea lor una lângă alta - deși puteți utiliza + operatorul, dacă doriți.
O aplicație Flutter nu este altceva decât un copac de widget-uri. Cu alte cuvinte, creați o aplicație Flutter creând pur și simplu widgeturi multiple și stabilind relații părinte-copil între ele.
În prezent, nu există nicio relație între widget-urile pe care le-am creat în etapa anterioară. Așa cum ați fi ghicit, toți vor fi frați, așa că acum să creăm un widget pentru ei.
Un widget care poate avea mai mulți copii este denumit, de obicei, ca widget de aspect. Flutter oferă mai multe widgeturi pentru a alege de la. Pentru aplicația noastră, Coloană widget-ul este cel mai potrivit pentru că poziționează toți copiii unul sub celălalt.
În plus, pentru a se conforma spec. Material Design, trebuie să adăugăm o căptușeală 16 dp la Coloană widget. Putem face acest lucru făcând-o a copil a recipient widget.
Container Container = Container nou (umplutură: const EdgeInsets.all (16.0), copil: coloană nouă (copii: [billAmountField, tipPercentageField, calculateButton]));
O interfață de utilizare Material Design nu este completă fără o bară de aplicații. De aceea, creați unul folosind acum AppBar widget.
AppBar appBar = nou AppBar (titlu: text nou ("Tip Calculator"));Planurile care conțin bare de aplicații și containere sunt atât de frecvente încât Flutter oferă o Schelă widget pentru a vă ajuta să stabiliți rapid o relație între ele.
Schelă scheletă = schelă nouă (appBar: appBar, corp: container);
Cu Schelă widget-ul de la rădăcină, copacul nostru widget este acum gata. Puteți merge mai departe și utilizați Schelă widget ca valoare de returnare a construi() metodă.
schelet de întoarcere;
Dacă vă este greu să vizualizați arborele, următoarea diagramă ar trebui să vă ajute:
Fișierul Dart are nevoie de a principal() funcția de punct de intrare. În interiorul lui, trebuie să sunăm runApp () funcția de a umfla și de a face efectiv arborele widget pe care l-am creat în pasul anterior.
În plus, ale noastre TipCalculator widgetul trebuie plasat în interiorul unui MaterialApp astfel încât să se poată aplica o temă de design material și o schemă de culori. Prin urmare, adăugați următorul cod la main.dart:
void main () runApp (new MaterialApp (titlul: 'Tip Calculator', home: new TipCalculator ()));
Acum puteți apăsa butonul Apel de reîncărcare fierbinte pentru a începe să utilizați aplicația de pe dispozitiv.
În acest tutorial, ați învățat cum să utilizați Flutter și Dart, împreună cu IntelliJ IDEA, pentru a crea o aplicație simplă pentru Android.
După părerea mea, Flutter are aproape toate lucrurile pe care un dezvoltator le-ar putea căuta într-un cadru de dezvoltare a aplicațiilor mobile pe mai multe platforme. Înainte de a vă decide să începeți să vă construiți următoarea aplicație mare cu aceasta, trebuie totuși să știți că este încă un cadru foarte nou și care se dezvoltă rapid.
Pentru a afla mai multe despre Flutter, vă puteți referi la documentația oficială.
