Construiți aplicații mobile încrucișate cu flutterul Google

Au fost numeroase cadre mobile cu platformă de-a lungul anilor, cu îmbunătățiri constante asupra experienței și performanței dezvoltatorului pe tot parcursul anului. Google flutter Este o nouă adăugire la pachet și este deosebit de interesant, deoarece, mai degrabă decât utilizarea unui "pod" JavaScript cât mai multe cadre (cum ar fi reacția nativ), se compilează la codul nativ adevărat.

Puteți afla un pic despre cum funcționează în videoclipul introductiv de mai jos sau citiți pentru un ghid pas cu pas pentru a începe cu flutter. Pentru mai multe sfaturi, aruncați o privire la colecția noastră de tutoriale explicând Cum de a construi o aplicație . Sau, dacă construiți un site, alegeți a Builder de site-uri web și web hosting Serviciu de la ghidurile noastre. Nu sunteți mulțumit de depozitul dvs.? Aici sunt câteva Stocare in cloud Opțiuni.

În acest tutorial, ne vom uita la modul de configurare a flutterului și vom explora elementele de bază ale clădirilor aplicațiilor folosind cadrul, folosind MacOS pentru dezvoltarea noastră. Vom presupune că ați programat înainte și știți cum să utilizați coaja de bash, dar ar fi putut să nu fi dezvoltat pentru mobil.

01. Obțineți configurați

Va trebui să descărcați și să instalați câteva lucruri înainte de a putea utiliza flutterul:

• Xcode pentru suportul iOS
• Android Studio pentru sprijinul Android
• Android SDK (Descărcați prin Android Studio Odată ce creați un nou proiect)

Odată ce aveți toate acestea, executați Xcode și Android Studio, instalați componentele suplimentare pe care le oferă și creează un nou proiect pentru a vă asigura că acestea rulează.

Acum sunteți gata să începeți cu flutter. Descărcați. Flutter SDK. . Extrageți-l spre oriunde doriți să fie instalat. Trebuie să ne actualizăm calea, astfel încât MacOS să găsească flutter oriunde îl invocați. Deschideți (sau creați) $ Home / .bash_profile :

sudo atom $HOME/.bash_profile

Adăugați acum directorul flutter / bin la dvs. $ PATH. :

export PATH=/Users/simon/dev/flutter/bin:$PATH

Rulați o comandă Shell pentru a reîmprospăta profilul de bash:

source $HOME/.bash_profile

Acum putem începe să folosim flutterul CLI. Primul lucru pe care trebuie să-l faceți este să vă asigurați că aveți cea mai recentă versiune:

flutter upgrade

02. Fixați orice problemă

Odată ce ați terminat, Flutter oferă un instrument de diagnosticare la îndemână, care va verifica dacă tot ceea ce aveți nevoie este instalat și configurat corect. Este foarte util:

flutter doctor

Luați notă de ceea ce vă spune medicul și răspundeți la orice problemă care apar. S-ar putea să trebuiască să conduci doctorul de câteva ori pentru a obține feedback suplimentar și pentru a acționa pe ea.

Odată ce instrumentul este mulțumit de flutter, Android Toolchain, IOS Toolchain și studio Android, sunteți bine să mergeți. Nu vă faceți griji cu privire la dispozitivele conectate pentru acum.

XCode poate necesita pași suplimentari la coajă pentru a fi complet configurată:

 sudo Xcode-Select --Switch /applications/xcode.app/contents/developer
Brew Install --Head LibimobileDevice
Brew instalați ideviceInstaller.
Brew instalați cocoapodurile
POD SETUP 

Și studioul Android are adesea nevoie de Acordul de licență de acceptare:

 Flutter Doctor - licențe 

03. Găsiți un IDE și începeți un nou proiect

Acum, flutterul este configurat, veți dori ca un IDE să lucreze. Există pluginuri disponibile pentru Android Studio și IntelliJ. Vom merge cu codul VS, care are, de asemenea, propriul plugin flutter.

Porniți codul VS și faceți clic pe View & GT; Paleta de comandă. Introduceți "Instalare" și selectați extensiile: Instalați acțiunea extensiei. Căutați "flutter" și instalați pluginul flutter. După ce ați terminat, reporniți codul VS.

Acum suntem gata să începem să dezvoltăm. Porniți un nou proiect prin intermediul paletei de comandă selectând Flutter: Opțiune nouă de proiect. Denumiți proiectul dvs., selectați Unde să îl salvați și codul VS va invoca flutterul pentru a genera noul proiect.

04. Configurați dispozitive virtuale

Pentru a testa proiectul nostru, vom dori un simulator de dispozitiv să ne permită pe desktop. În colțul din dreapta jos al codului VS (în bara albastră), veți vedea ceva spunând fără dispozitive. Dacă ați dezvoltat pentru mobil înainte, când faceți clic pe acest lucru, veți vedea simulatoarele disponibile în paleta de comandă.

Dacă nu aveți simulatoare, executați următoarele în terminal pentru a deschide simulatorul iOS pentru prima dată:

 Simulatorul Open -A 

Ar trebui să vedeți apoi un simulator iOS disponibil atunci când reporniți codul VS.

Android este mai complex. Încărcați studioul Android și într-un proiect Android, faceți clic pe Instrumente & GT; Android & Gt; Manager AVD. Selectați Creați dispozitiv virtual.

Selectați dispozitivul pentru a emula - de exemplu, un Pixel Google 2. Faceți clic pe Următorul și puteți alege și o imagine de sistem (i.e. o versiune OS) pentru descărcare. Pe pagina următoare, sub performanță eminată, selectați Hardware - GLES 2.0 pentru a activa accelerarea grafică a hardware-ului pe emulator. Terminați procesul.

Odată ce ați creat dispozitivul virtual în Android Studio, reporniți codul VS și veți vedea emulatorul dvs. Android să apară alături de simulatorul IOS din lista de dispozitive a codului VS.

Acum, dacă faceți clic pe Nu există dispozitive, puteți selecta un dispozitiv iOS sau Android și un telefon virtual se va declanșa pe desktop. Încercați-l cu un simulator iPhone X.

04. Testați aplicația Starter

Acum, simulatorul rulează, puteți testa aplicația Starter. Apăsați F5 sau faceți clic pe Debug & GT; Începeți depanarea. Aplicația se va încărca pe simulator și puteți încerca să interacționați cu acesta. Fiți răbdători dacă nu se întâmplă imediat, deoarece poate dura ceva timp pentru a construi.

Înainte de a putea face același lucru pe Android, trebuie să instalăm dependențele legate de proiectul nostru (o mică nuanță de flutter chiar acum). Navigați la directorul rădăcină al proiectului și executați:

 Android / Graddlew 

Apoi puteți deschide un emulator Android și puteți rula proiectul în modul Debug așa cum ați făcut pentru iOS.

O caracteristică excelentă a flutterului este că susține "reîncărcarea caldă" - adică puteți modifica sursa dvs. și vedeți modificările reflectate imediat în simulator. În Main.dart. , Să facem câteva schimbări la clasa MyApp în timp ce simulatorul iPhone X rulează:

 Primaryswatch: culori.green,
Acasă: New Myhompage (Titlu: "Carte de rețete"), = 

Ar trebui să vedeți că schimbările au efect de îndată ce salvați.

06. Explorați sistemul de widget al flutterului

Ceea ce nu am vorbit încă este limba de programare Dart care utilizează flutter. Dart este un limbaj orientat obiect cu sintaxa C-Style, dezvoltată de Google și toată dezvoltarea flutterului îl folosește. Dacă aveți deja o experiență de dezvoltare web sau de dezvoltare mobilă, atunci nu ar trebui să fie total străin pentru dvs.

Totul din Flutter se bazează pe widget-uri, care sunt blocurile de construcție ale unei aplicații. Dacă ați folosit reacția înainte, abordarea flutterului este foarte asemănătoare, iar widget-urile sunt analoage cu componentele. În esență, întreaga dvs. aplicație poate fi descompusă într-o ierarhie a widget-urilor.

Acest lucru este ușor de văzut în cadrul MyApp. clasă. MyApp. este A. StateSlesswidget. (Aceasta înseamnă că este imuabilă). construi() Metoda Suntem imperativi spune flutter Cum ar trebui să fie redat widget-ul. Acest lucru este similar cu reacția face() funcţie.

Metoda returnează a Materialelapp Widget, care reprezintă o aplicație care utilizează designul materialului Google. Acest lucru, la rândul său, are mai multe proprietăți, care sunt în sine Widget-uri: Themedata. definește stilul vizual care trebuie utilizat și Myhomepage. este un widget personalizat definit mai departe în jos Main.dart. fișier care conține corpul aplicației.

07. Editați conținutul

Spre deosebire de stat MyApp. , Myhomepage. este un widget odihnitor. Aceasta înseamnă că comportamentul său este definit de _Myhomepagestata Clasa, permițându-i să stocheze informații și să se schimbe în consecință, cum ar fi când apăsați butonul de pe aplicație.

Puteți vedea că în prezent se utilizează multe widget-uri încorporate Flutter oferă pentru a gestiona lucrurile comune, cum ar fi aspectul, butoanele și afișajul de text. Să facem niște schimbări în acea clasă pentru a modifica ceea ce prezintă aplicația noastră.

 Clasa _MyHomePageState extinde starea ),
       Copil: New Recipewidget ()
     )
   );
 }
} 

Am eliminat conținutul existent și l-am înlocuit cu un widget de containere maro, dar avem nevoie și de a crea un widget personalizat, recipewidget, care va fi pus în container.

 Clasa RecipeWidget extinde StateSlesswidget {
 @trece peste
 Lightget Build (BuildContext Context) {
   Liste & widget & gt; widget-uri = list nou & lt; widget & gt; ();
   Returnați New Listview (copii: widget-uri);
 }
} 

08. Încărcați unele active

Apoi, să încărcați unele active cu aplicația, astfel încât să le putem adăuga la Listview. widget în interiorul Recipewidget. . Activele statice pentru o aplicație sunt specificate în pubspec.yaml. Sub secțiunea "flutter":

 Active:
   - img / mic dejun.jpg
   - img / curry.jpg
   - img / paste.jpg 

De asemenea, vom crea o simplă structură de date în Main.dart, împerecherea de imagini cu șiruri de caractere pentru a acționa ca o miniatură și rezumat pentru rețete.

 VAR Rețete = {
   "Micul dejun.jpg": "Începeți ziua cu acest mic dejun nutritiv.",
   "paste.jpg": "Wow prietenii tăi făcând pastele tale proaspete",
   "curry.jpg": "Arătați-vă abilitățile culinare cu o curry bogată.",
}; 

09. Finalizați-vă

În cele din urmă, să actualizăm Recipewidget. Pentru a construi o listă de widget-uri care afișează rețetele. Folosim Imagine.asset. Pentru a încărca activele statice incluse în pubspec.yaml. .

 rețete.Foreceh ((degetul mare, caption) = & gt; widgets.add (
       Container nou (copil:
         Noi padding (padding:
           New Edgeinsets.Toate (16.0), Copil:
             NOI LISTTILE (
               lider: imagine.asset ('img /' + degetul mare, lățimea: 80.0),
               Titlu: Text (caption)
             )
           ),
           decor:
             noua boxdecoration (
                 Frontieră: Noua frontieră (
                     Partea de jos: Noua Borderside (Culoare: Colors.Prown)
                 ),
                 Culoare: Colors.brown 

             )
       )
     )
); 

Sperăm că începeți să vă simțiți pentru modul în care Flutter utilizează widget-uri pentru a construi aplicații. Încercați să utilizați simulatorul pentru a roti dispozitivul. Layout-ul flutter găzduiește automat modificările. Pentru comparație, încercați aplicația pe emulatorul Android.

Acest articol a fost publicat inițial în net , cea mai bună revistă din lume pentru designeri și dezvoltatori web. Cumpără Ediția 310. sau Abonati-va .

Citeste mai mult:

• Ia-ți capul în jurul valorii de a reacționa cu acești cinci factori
• 11 Aplicații iPhone gratuite pentru designeri
• Cum se proiectează Icoanele App