Flutter Tutorial 1. dio: Napravite aplikaciju Flutter ispočetka

Naučite kako započeti stvaranje Flutter aplikacije, prvog dijela serije o lepršavom udžbeniku.

Dio 1: Kako izraditi lepršavu aplikaciju od nule

U ovoj seriji udžbenika uputit ćemo vas korak po korak kako stvoriti mobilnu aplikaciju za e-trgovinu pomoću lepršavanja. Mobilna aplikacija bila bi aplikacija otvorenog koda za Aviacommerce platformu. Vodič bi se usredotočio na ovu aplikaciju na uvođenju važnih koncepata lepršavog okvira.

Ovaj je udžbenik prvi dio serije lepršavih tutorijala: -

  1. Kako izgraditi lepršavu aplikaciju od nule
  2. Kako lebdjeti aplikaciju (uskoro dolazi)
  3. Kako organizirati podatke u lepršavom položaju (uskoro)
  4. Podaci o uvrtavanju (uskoro)

Više ažuriranja sadržaja kako napredujemo.

Na blogu će biti objašnjeno kako stvoriti izgled i uvesti stanje korak po korak. Da biste ronili ravno u kod, cijeli je projekt dostupan u Githubu pod okriljem AviaCommercea. Slobodno ga odvikajte i igrajte se okolo.

Mi u AviaCommerceu aktivno tražimo nove okvire koji redefiniraju razvoj softvera. Naš tim pomno prati aktivnost u Flutteru od njegovog prvog beta izdanja.

Google je napokon najavio Flutter 1.0, prvo stabilno izdanje UI alata za stvaranje lijepih, zavičajnih doživljaja za iOS i Android iz jedinstvene baze podataka.

Flutter ima izuzetnu dokumentaciju za postavljanje razvojnog okruženja. Slijedite ovaj službeni vodič za instalaciju da biste započeli.

Nakon što je postavljanje dovršeno, možemo započeti s novim testnim projektom. Više volim Android Studio jer nudi cjelovito, integrirano IDE iskustvo za Flutter. Android Studio zahtijevat će dodatak za uređivanje za Dart.

Pokrenite Android Studio. Možete vidjeti opciju za pokretanje novog projekta temeljenog na Flutter-u.

Odaberite Flutter Application s popisa konfiguracija.

Zamislite maštovito ime za svoju prvu aplikaciju Flutter. Ili samo pođite s timerom ako niste u zvanju stvari poput mene .

Posljednji korak u ovom dijaloškom okviru će vas pitati za ime paketa aplikacija.

Nakon ovog koraka Flutter SDK će stvoriti početnu strukturu direktorija za aplikaciju. Sve akcije se odvijaju unutar mape lib, a main.dart je polazna točka u izvršavanju aplikacije.

U Flutteru je sve widget. Slike, ikone i tekst u aplikaciji Flutter sve su widgeti. Čak su i elementi izgleda poput redaka, stupaca i rešetki koji raspoređuju, ograničavaju i poravnavaju druge widgete.

Dobra poanta je da Flutter SDK kreira interaktivni widget u korijenu same aplikacije ovdje. Da biste pojednostavili stvari, dopustite da ih uklonite i započnite s minimalnim dizajnom (Hello World!).

Vaša datoteka main.dart trebala bi izgledati ovako:

Uključivanjem Android emulatora otvara se tekstualni widget s pozdravom "Hello World!"

Ovdje primijetite widget koji je usredotočen. Pokušat ćemo modificirati tijelo MaterialApp-a kako bi se prikazalo sučelje kakvo želimo. Izvorna verzija je ono što je prikazano u nastavku.

Elementi izgleda (widgeti) u Flutteru mogu se široko kategorizirati u dvije vrste na temelju toga imaju li jedan widget ili su sposobni držati niz widgeta. Kontejneri, padding pripadaju prvom, dok Row, Stupac itd. Spadaju pod drugi.

Uvedite izgled redaka s troje djece tipa tekstualnih widgeta.

Prije nego što nastavimo i stiliziramo komponente, preporučljivo je stvoriti novi widget koji će upravljati stilom kako bismo slijedili DRY princip.

Zamijenite troje djece prilagođenim widgetom definiranim kasnije u istoj datoteci. Sada postaje datoteka main.dart

Tajmer trenutno djeluje pomalo blago. Nisam baš dobar u korisničkim sučeljima, ali pokušajmo najbolje. Spakirajte widget Text u kontejner i ukrasite spremnik bojom pozadine, zajedno s jastučićima za razmaknute elemente.

Također, umetnite gumb da biste izvodili radnje na tajmeru ispod tri stilizirana tekstualna widgeta. Izmijenjeni kôd izgleda ovako.

Ovdje dolazi najprisutniji dio aplikacije - stanje. Država će zadržati trenutnu vrijednost tajmera i je li tajmer aktivan (radi) ili ne. Smislio sam klasu TimerState koja je odgovorna za održavanje države i koja se također brine za izgradnju stabla widgeta.

Pritiskom na tipke preklopnik je varijabla Active.

Dart dolazi s elegantnim modulom za async operacije. Možemo koristiti svoju klasu Timer da nam pomogne u porastu sekundi. Modificirani TimerAppState opisan je dolje. Napominjemo da smo ponovno postavili Timer klasu na TimerApp kako bismo spriječili nejasnoće s Timer-klasom u async modulu.

Aplikacija je sada u potpunosti funkcionalna. Kompletan glavni.dart kod možete pronaći ovdje. Nadam se da će to raščistiti osnove Flutter okvira.

FLUTTERFORUM: MJESTO GDJE FLUTTER DEV HANGOUT

FlutterForum je mjesto na kojem se lepršavi programeri druže i uključuju u razgovore i pitanja.

posjetite https://flutterforum.co

Ako ste uživali u ovom vodiču, kliknite gumb i podijelite kako biste ga pomogli drugima! Slobodno ostavite komentar u nastavku.