Share
Flutter devine rapid unul dintre cele mai populare cadre pentru dezvoltarea de aplicații mobile pe mai multe platforme. Majoritatea dezvoltatorilor Android și iOS încep să accepte că este o alternativă mai rapidă și mai rezistentă la viitor față de alte cadre inter-platforme, cum ar fi React Native și NativeScript.
Google în sine nu lasă nici o piatră neatinsă pentru a atrage mai mulți dezvoltatori. De exemplu, Google I / O din acest an a avut mai multe sesiuni în profunzime, care s-au axat pe dezvoltarea aplicațiilor compatibile cu Material Design. În timpul unei sesiuni, Google a anunțat, de asemenea, că Flutter va fi o platformă de primă clasă pentru proiectarea materialelor.
În această serie de tutoriale, vă voi ajuta să învățați principiile de dezvoltare a aplicațiilor Android cu Flutter. În acest tutorial, care începe seria, mă voi concentra pe widget-urile Flutter, elementele de bază ale tuturor aplicațiilor Flutter.
Pentru a profita la maximum de această serie, veți avea nevoie de:
După instalarea câtorva pluginuri ușoare, puteți utiliza Android Studio, dezvoltatorii de aplicații Android originali pentru aplicații Android, sunt cei mai obișnuiți să dezvolte aplicații Flutter.
Începeți prin a lansa Android Studio și alegeți Configurează> Plugin-uri opțiune în ecranul de întâmpinare.
În dialogul care apare, apăsați pe Răsfoiți depozitele și căutați pluginul Flutter.
Odată ce ați găsit pluginul, apăsați pe el Instalare buton. În acest moment, veți fi întrebat dacă doriți să instalați și pluginul Dart. presa da a inainta, a merge mai departe.
După ce ați instalat ambele pluginuri, apăsați pe Reporniți Android Studio pentru a finaliza configurația.
După repornire, veți putea vedea a Începeți un nou proiect Flutter pe ecranul de întâmpinare Android Studio. Apăsați pentru a începe crearea primului proiect Flutter.
În ecranul următor, alegeți Flutter Application și apăsați Următor →.
Veți vedea acum un formular care solicită informații detaliate despre aplicația Flutter, cum ar fi numele și locația acesteia. Asigurați-vă că introduceți valori valide în toate câmpurile.
Flutter plugin-ul nu vine împreună cu Flutter SDK. Prin urmare, trebuie să instalați SDK separat. Puteți face acest lucru apăsând pe Instalați SDK butonul acum.
În funcție de cât de rapid este conexiunea dvs. la Internet, instalarea poate dura ceva timp până la finalizare. După ce reușește, veți putea apăsa Următor → pentru a finaliza configurarea proiectului.
În tot acest tutorial, veți scrie cod în interiorul lib / main.dart fişier. Acesta va conține, în mod implicit, un exemplu de cod, pe care nu îl veți avea nevoie. Deci, ștergeți toate conținutul înainte de a continua.
Cadrul Flutter folosește limba de programare Dart, o limbă ușor de învățat a cărei sintaxă este foarte asemănătoare cu cea a Java și C. În consecință, la fel ca majoritatea programelor Java și C independente, o aplicație Flutter are nevoie și de o principal() funcția, o funcție specială care servește drept punct de intrare pentru aplicație.
În consecință, adăugați următorul cod la main.dart fişier:
void principal () // TO DO
În acest moment, puteți apăsa Shift-F10 pentru a construi și a rula aplicația. Dacă nu ați întâmpinat nicio eroare în pașii anteriori, ar trebui să vedeți ca aplicația să afișeze o pânză albă necompletată pe dispozitiv.
Toate aplicațiile Flutter sunt compuse din unul sau mai multe widget-uri, instanțe de clase care vă permit să desenați text și imagini pe ecran. De obicei, nu va trebui să programați miniaturi de nivel scăzut de la zero, deoarece cadrul vine cu o mare varietate de widget-uri pre-făcute și frumoase, care aderă la limbile de proiectare ale platformelor Android și iOS.
Pentru a putea utiliza widget-urile de bază în aplicația dvs., importați widget-uri bibliotecă prin adăugarea următorului cod la începutul main.dart fişier:
pachet de import: flutter / widgets.dart ';
Cele mai simple widget-uri pe care le puteți crea sunt widget-urile fără stat. După cum probabil ați ghicit, ei nu au nicio stare asociată cu ele și sunt astfel statice. Ele sunt ideale pentru a afișa etichete, titluri și alte elemente ale UI ale căror conținut este puțin probabil să se schimbe în timp ce aplicația rulează. Pentru a crea un widget fără stat, trebuie să extindeți StatelessWidget clasa și suprascrie construi() metodă. Următorul exemplu de cod vă arată cum:
clasa MyFirstWidget extinde StatelessWidget @override Widget build (Context BuildContext) // Mai mult cod aici
După cum puteți vedea în codul de mai sus, construi() metoda trebuie să returneze a Widget obiect. Sunteți liberi să alegeți și să returnați oricare dintre cele zeci de oferte widget-uri făcute de Flutter. De exemplu, dacă doriți să afișați o linie de text, puteți să creați și să returnați a Text widget după cum se arată mai jos:
Accentsconagua
retur Text ("Acesta este frumos!", textDirection: TextDirection.ltr);Rețineți că trebuie să vă amintiți întotdeauna să specificați direcția textului în timp ce utilizați a Text widget.
Dacă rulați imediat aplicația, cu toate acestea, nu veți putea vedea textul. Asta pentru că încă nu v-ați instanțiat widget-ul fără stat. Deci du-te la principal() , instanțiați widgetul din interiorul acestuia și îl transmiteți la runApp () metodă. Iată cum:
runApp (noul MyFirstWidget ());
În momentul în care adăugați codul de mai sus și salvați proiectul, Android Studio ar trebui să reîncarce automat aplicația de pe dispozitiv, permițându-vă să vedeți textul.
Dacă doriți să afișați o imagine în loc de text, puteți înlocui pur și simplu Text widget cu un Imagine widget din interiorul clasei tale construi() metodă. Următorul cod vă arată cum să creați un Imagine widget care descarcă și afișează o imagine de la distanță:
retur Image.network ("https://images.pexels.com/photos/1168940/pexels-photo-1168940.jpeg");La salvarea din nou a proiectului, ar trebui să vedeți ceva de genul acesta pe dispozitiv:
Toate aplicațiile Flutter pot fi considerate copaci widget. Aplicația pe care ați creat-o în pasul anterior este un arbore widget cu un singur widget. Utilizarea Text sau Imagine widget-urile ca elemente de vârf ale arborelui widget, cu toate acestea, nu este o idee bună pentru că nu veți putea să le adăugați widget-uri copil.
Flutter oferă mai multe widget-uri care pot acționa ca recipiente pentru alte widget-uri. Cele mai frecvent utilizate sunt Rând și Coloană widget-uri. După cum sugerează numele lor, Rând widget vă permite să plasați mai multe widgeturi unul lângă altul și Coloană widget vă ajută să poziționați widget-urile una sub cealaltă. Ele sunt indispensabile atunci când se creează copaci widget adânci.
Următorul cod vă arată cum să utilizați Coloană widget pentru a crea un copac widget care are doi copii: a Text widget și an Imagine widget.
Text myText = Text ("Aceasta este o fotografie frumoasă!", TextDirection: TextDirection.ltr); Image myImage = Image.network ("https://images.pexels.com/photos/1168940/pexels-photo-1168940.jpeg"); retur Coloana (copii: [myText, myImage]); Aplicația ar trebui să arate astfel:
În plus, există widget-uri care vă ajută să poziționați mai bine un singur widget. De exemplu, Centru widget vă ajută să centrați un widget. În mod similar, a recipient widget vă permite să adăugați umplutură și margini la widget-urile dvs..
Următorul cod vă arată cum să centrați Coloană widget-ul pe care tocmai l-ați creat prin încorporarea în interiorul unui Centru widget:
retur Centrul (copil: Coloana (copii:[myText, myImage], mainAxisSize: MainAxisSize.min);
În codul de mai sus, rețineți că Coloană widget utilizează o proprietate suplimentară numită mainAxisSize, a cărui valoare este stabilită min. Este necesară deoarece, înainte de a centra o coloană, trebuie să faceți înălțimea ei egală cu suma înălțimilor tuturor copiilor săi. Fără proprietatea, Coloană widget-ul va fi la fel de mare ca ecranul dispozitivului și Centru widgetul nu va avea niciun efect asupra acestuia.
Toate acestea, în timp ce utilizați widget-uri de bază care fac parte din widget-uri bibliotecă. Flutter are o bibliotecă alternativă numită material, care oferă widget-uri Material Design. Pentru ao utiliza în aplicația dvs., înlocuiți instrucțiunea care importează widget-uri bibliotecă cu următoarele:
pachet de import: flutter / material.dart ";
Apoi, pentru a aplica stilul Material Design pentru widget-urile dvs., trebuie să aveți a MaterialApp widgetul din partea de sus a arborelui dvs. widget. De asemenea, trebuie să încorporați toate widget-urile pe care le-ați creat mai devreme într-un Schelă widget, care poate servi ca ecran de pornire al MaterialApp widget.
Mai mult, deoarece majoritatea aplicațiilor de design material au o bară de aplicații, puteți seta opțional Schelă lui widget appBar proprietate la un nou AppBar widget.
Următorul cod vă arată cum să faceți tot ce este concis:
întoarceți MaterialApp (acasă: Schele (appBar: AppBar (titlu: Text ("App-ul meu")) [myText, myImage], mainAxisSize: MainAxisSize.min),))); Aplicația ar trebui să arate mult mai bine acum.
Dispozitivele fără stat sunt imuabile. Cu codul pe care l-ați scris în pașii anteriori, nu există nicio modalitate ușoară de a modifica conținutul Text widget sau Imagine widget. De ce? Deoarece cadrul Flutter preferă programarea reactivă peste programarea imperativă. În consecință, majoritatea widget-urilor sale nu au metode de setter care pot actualiza conținutul lor în timpul rulării. De exemplu, Text widgetul nu are setText () care vă va permite să schimbați textul pe care îl afișează.
Unele widget-uri de stat, pe de altă parte, sunt mutabile, deși nu direct. Ei se bazează pe Stat obiecte pentru a decide ce ar trebui să afișeze la un moment dat. Ca atare, ori de câte ori a Stat modificările obiectului, cadrul va actualiza automat conținutul oricărui widget statal conectat la acesta.
Pentru a crea un widget statal, trebuie să extindeți StatefulWidget clasa și suprascrie createState () metodă.
clasa MySecondWidget extinde StatefulWidget @override StatecreateState () // TO DO
Apoi, trebuie să creați un nou personalizat Stat clasă care conține variabile care formează starea widget-ului statal. În plus, în interiorul clasei, trebuie să ignorați construi() pentru a returna arborele dvs. widget.
Următorul cod vă arată cum să creați un Stat clasa care conține o singură variabilă numită URL-ul:
clasa MyState extinde statulString url = "https://source.unsplash.com/random/800x600"; // Crearea unei imagini aleatoare de la Unsplash @override Widget (Context BuildContext) // Mai mult cod aici
De dragul unui exemplu concret, să creați acum un arbore de widget Material Design care să conțină un Imagine widget, care afișează o imagine aleatorie și a RaisedButton widget, pe care utilizatorul îl poate apăsa pentru a încărca o nouă imagine aleatorie. Următorul cod vă arată cum:
întoarcere MaterialApp (acasă: schelet (corp: Centru (copil: Coloană (mainAxisSize: MainAxisSize.min, copii:[RaisedButton (copil: Text ("Apăsați pe mine"), onPressed: changeURL,), Image.network (url)]))));
Rețineți că Imagine widget constructor ia acum URL-ul variabilă ca intrare, în loc de literal șir. Aceasta permite cadrului să utilizeze ultima valoare a variabilei ori de câte ori Imagine widgetul este desenat.
De asemenea, rețineți că RaisedButton widgetul are un onPressed atributul care indică un ascultător al evenimentului numit changeURL (). Metoda nu există încă, așa că creați-o.
void changeURL () // Mai mult cod aici
În interiorul metodei, trebuie, desigur, să schimbați valoarea URL-ul variabil. Cu toate acestea, nu trebuie să îl schimbați direct. Dacă faceți acest lucru, cadrul Flutter nu va fi notificat despre schimbare. Pentru a actualiza corect starea unui widget statal, trebuie să efectuați întotdeauna toate modificările în interiorul setState () metodă.
Pentru moment, pentru a afișa imagini aleatorii, vă sugerăm să utilizați serviciul Unsplash Source. Tot ce trebuie să faceți pentru a descărca o imagine aleatorie din acesta este să faceți o solicitare HTTP la adresa URL și să transmiteți un șir de interogare unic la acesta.
Următorul cod vă arată cum să faceți acest lucru utilizând o marcă de timp pentru a construi șirul de interogare unic:
setState (() url = "https://source.unsplash.com/random/800x600/?" + "q = $ new DateTime.now (). milisecondsSinceEpoch";);
În acest moment, obiceiul tău Stat clasa este gata. Tot ce trebuie să faceți în continuare este să îl instanțiați și să îl returnați din createState () metoda widget-ului dvs. statal.
returnează MyState ();
Dacă treceți o instanță a widgetului dvs. statal la runApp () , reîncărcați aplicația și apăsați de câteva ori butonul, ar trebui să vedeți afișarea unei fotografii noi de fiecare dată.
Acum știți cum să lucrați cu widget-uri apatrid și statal în aplicațiile Flutter. De asemenea, ați învățat cum să aplicați o temă de design material, să le modificați dinamic conținutul și să le faceți interactive.
Merită remarcat faptul că Flutter nu utilizează widget-uri native ale unei platforme mobile. Acesta atrage toate widget-urile în sine, folosind un motor grafic de înaltă performanță, numit Skia, care utilizează extensiv GPU-ul. Ca rezultat, aplicațiile Flutter rulează frecvent la aproape 60 de cadre pe secundă și se simt foarte fluide și receptive.
Pentru a afla mai multe despre widget-urile din Flutter, consultați documentația oficială.
