Развој Флуттер апликација: Потпуни водич

Prema podacima Statiste, Flutter zauzima drugo mesto među najpopularnijim okvirima za razvoj mobilnih aplikacija na više platformi, sa podrškom za preko 100.000 aplikacija od svog lansiranja.

Google je kreirao ovaj open-source okvir 2017. godine. Njegova sposobnost da kreira aplikacije visokog kvaliteta, brzih performansi, koje su kompatibilne sa mobilnim operativnim sistemima – Android i iOS – kao i druge brojne mogućnosti, čine ga privlačnim izborom za mnoge programere.

Ukoliko ste donosilac odluka ili preduzetnik, možete koristiti Flutter kako biste za svoje poslovanje ostvarili visokokvalitetne aplikacije po pristupačnoj ceni.

Ako ste razmišljali o korišćenju Fluttera, sada je pravi trenutak da počnete. U ovom tekstu, saznaćete kako Flutter može pomoći programerima i kako ga možete koristiti za unapređenje svojih proizvoda.

Šta je Flutter?

Flutter je open-source okvir, koji se ponekad naziva i Softverski razvojni komplet (SDK), a koristi se za izradu nativno kompajliranih aplikacija za različite platforme. Sa jednom bazom koda možete kreirati rešenja za mobilne uređaje, veb i Mac računare.

Flutter se sastoji od okvira – skupa komponenti korisničkog interfejsa koje se mogu ponovo koristiti (dugmad, obrasci, klizači itd.) i koje možete prilagoditi svojim potrebama – kao i od SDK-a – skupa alata koji uključuju okvire, biblioteke i API-je koji vam pomažu u razvoju potpuno funkcionalnih aplikacija.

Flutter okvir je napisan u Dart programskom jeziku, koji je razvio Google i koji je prvenstveno fokusiran na front-end razvoj.

Zašto je Flutter potreban programerima?

Umesto da održavate brojne biblioteke u Javi, JavaScriptu, Swiftu za Android i iOS, što je potrebno kada se razvija aplikacija za više operativnih sistema, Flutter objedinjuje sav vaš kod u jednom jeziku, što olakšava razvoj na više platformi. Upravljanje kodom za sve vaše aplikacije na jednom mestu štedi vreme programerima.

Flutterovo kompajliranje traje delić sekunde, omogućavajući brze preglede. Možete koristiti Flutterovu funkciju hot-reload kako biste odmah videli izmene koda i prilagodili ih. Takođe, imate pristup Flutterovom izvornom kodu i možete ga modifikovati kako bi odgovarao vašim specifičnim potrebama, što olakšava kodiranje i izradu aplikacija.

Po čemu je Flutter jedinstven?

Flutter je stekao reputaciju kao alat koji štedi vreme i troškove razvoja aplikacija, a istovremeno omogućava izradu aplikacija sa interaktivnim dizajnom i glatkim animacijama.

Ako želite da naučite Flutter, korisno je da ga dobro upoznate pre nego što krenete sa učenjem. Ovo je pregled njegovih ključnih karakteristika:

  • Podrška za više platformi: Flutter omogućava razvoj nativno kompajliranih aplikacija iz jedne baze koda za mobilne uređaje, veb i desktop računare. Za razvoj mobilnih aplikacija, ne morate pisati poseban kod za svaku platformu (npr. Android i iOS), što štedi vreme i eliminiše glavobolje oko razvoja brojnih aplikacija. Ovo takođe smanjuje troškove.
  • Dostupnost SDK-a i izvornih funkcija: Flutter koristi svoj izvorni kod, platform API-je i integracije trećih strana, što pojednostavljuje procedure razvoja i omogućava bolje korisničko iskustvo za programere.
  • Widgeti: Flutter nudi veliki broj specijalizovanih dizajna koje možete prilagoditi svojim potrebama.
  • Hot reload: Ova funkcija omogućava trenutno praćenje promena koda nakon što ih unesete. Flutter prikazuje ažuriranja koja su odmah vidljiva u aplikaciji.
  • Open source: Flutter je potpuno besplatan za korišćenje i open source. Možete integrisati različite pakete i biblioteke trećih strana u svoju aplikaciju, bilo da se radi o video snimcima, ćaskanju, reklamama ili drugim funkcijama.
  • U nastavku ćemo razmotriti neke od prednosti korišćenja Fluttera.

    Prednosti korišćenja Fluttera

    #1. Business Logic UI na svim platformama

    Flutter nudi najbolji način za deljenje koda između platformi. Ne morate kreirati komponente specifične za svaku platformu da biste prikazali korisnički interfejs; sve što vam je potrebno je platno za crtanje.

    #2. Smanjeno vreme razvoja koda

    Ako radite na Android aplikaciji srednje veličine, potrebno je do 40 sekundi da se prilagodi funkcija izgleda. Ugrađena funkcija hot reload omogućava da se vaše promene vide skoro trenutno.

    #3. Povećano vreme do izlaska na tržište

    Ako koristite Flutter za razvoj aplikacija, potrebno vam je upola manje radne snage nego kada radite dve odvojene aplikacije, npr. za Android i iOS.

    Ovo štedi vreme jer ne morate da pišete kod specifičan za svaku platformu, a ipak postižete željeni vizuelni prikaz na svim platformama.

    #4. Sličnost sa razvojem nativnih aplikacija

    Današnji tehnološki pristup izradi digitalnih proizvoda stavlja korisničko iskustvo (UX) na prvo mesto. Sa Flutterom možete kreirati bolje animacije korisničkog interfejsa (UI); Flutter je ugrađen direktno u mašinski kod, čime se eliminišu greške u performansama.

    #5. Brz razvoj aplikacija

    Možete pristupiti mnogim widgetima za svoj razvoj, što ubrzava razvoj i rast. Ako planirate da svoju aplikaciju lansirate na tržište, možete koristiti Flutter za kreiranje aplikacija bez poteškoća. Korisnici su oduševljeni ovakvim iskustvom, što ih motiviše da dele vaš proizvod, a to povećava njegov tržišni obim.

    #6. Karakteristike minimalističkog dizajna

    Ako želite da koristite različite widgete za svoju aplikaciju, Flutter vam omogućava da kreirate nove i koristite ih samostalno ili u kombinaciji sa postojećim. Ovaj pristup je od ključnog značaja za obezbeđivanje dizajna koji je jednostavan za upotrebu.

    Nedostaci korišćenja Fluttera

    #1. Biblioteke

    Kao programeru, potrebne su vam biblioteke nezavisnih proizvođača za određene funkcije u vašem softveru. Iako su biblioteke trećih strana besplatne, open source i lako dostupne, to nije uvek slučaj sa Flutterom.

    Flutter je novi okvir i još uvek se razvija i unapređuje; možda ćete morati da sačekate neke funkcije, napravite sopstvene ili, u najgorem slučaju, pronađete drugu opciju za dugoročni razvoj.

    #2. Integracija

    Integracija Fluttera sa platformama za kontinuiranu integraciju (CI) može biti izazovna, za razliku od nativnih Android i iOS aplikacija. Možda ćete morati da kreirate i održavate prilagođene skripte za izradu, testiranje i primenu Flutter aplikacija u CI procesima.

    #3. Slabija podrška za iOS funkcije

    Google podržava Flutter, dok je podrška za iOS prepuštena drugima. Na primer, aplikacija na iOS-u uklanja sve EXIF podatke o snimanju slika na Apple uređajima. Kao rezultat toga, vaša fotografija dobija netačnu orijentaciju, lokaciju i gamu. Jedinstvene funkcije pristupačnosti iOS-a, kao što su glasovno pregovaranje, vođeni pristup, titlovanje i audio opis, nisu dobro podržane u Flutteru.

    Kako napraviti Flutter aplikaciju

    Već smo se bavili teorijom; hajde da pređemo na praktičan rad i izradimo jednostavnu aplikaciju koja će vam pomoći da shvatite kako se gradi uz pomoć Fluttera.

    Instaliranje Fluttera

    Potrebno vam je integrisano razvojno okruženje (IDE) za brz razvoj, kreiranje i testiranje vašeg softvera. Možete birati između sledećih opcija:

  • VS Code – Ima sve željene kvalitete IDE-a, uključujući to da je lagan i brz. VS Code je bio prvi izbor mnogih programera; možete se fokusirati na njega.
  • Android Studio – Da biste počeli sa Android Studijem, potrebno je samo da podesite njegov SDK. Instalirajte dodatke Flutter i Dart.
  • Instalirajte Flutter SDK preuzimanjem sa zvanične Flutter lokacije. Nakon preuzimanja, instalirajte SDK i kliknite na „Dodaj u datoteku putanje“ da biste bili sigurni da je sve ispravno podešeno.

    Kreiranje jednostavne Flutter aplikacije

    U ovom odeljku ćete napraviti jednostavnu Flutter aplikaciju kako biste razumeli kako stvari funkcionišu. Osnovno je da vam pružimo dobar početak u strukturi Fluttera i ključnim metodama. Napravićete jednostavnu aplikaciju koja će korisniku reći „Zdravo, svete“.

    Za početak, otvorite svoj terminal u VS Code-u i otkucajte:

    Flutter create proj_hello_world

    Projekat se razvija u sledećoj strukturi:

    proj_hello_world

    Postoje različite sintakse za različite aplikacije:

    • Android – Za kreiranje aplikacija zasnovanih na Androidu. Sve implementacije za Android se čuvaju u ovom poddirektorijumu.
    • Assets – Lokacija za čuvanje svih vaših datoteka, kao što su slike itd.
    • iOS – proizvodi iOS aplikaciju. Sve implementacije za iOS aplikaciju se nalaze u ovom poddirektorijumu.
    • Lib – Primarna datoteka, „main.Dart“, gde se kreira jedan od ključnih kodova.
    • Test – Koristi se za sprovođenje testiranja.

    Svaki Flutter program zahtevaće datoteku „main.Dart“. Pre bilo kakvog razvoja, morate obrisati postojeći kod u datoteci; uradite to pre nego što nastavite.

    Zatim morate da unesete paket „Material“ da biste uključili elemente korisničkog interfejsa. Kopirajte i nalepite sledeći kod u svoj terminal.

    import 'package:flutter/material.dart';

    Flutter se ne razlikuje od bilo kog drugog programskog jezika; izvršenje počinje sa glavnom metodom.

    void main() => runApp(new HelloWorldApp());

    Widgeti su primarni fokus Fluttera i oni su sve što vaš kod treba da pokrene. Ako se pitate šta su widgeti, to je bilo šta što kontroliše ekran, kao što su dugmad za unos, lista, prikazi kartica, tabele itd. Vaš ceo Flutter program je skup mnogih widgeta koji zajedno obezbeđuju odličan korisnički interfejs.

    Kao što je ranije pomenuto, koristićete widgete. Za svaku klasu koju kreirate, uverite se da ste nasledili klasu widgeta. Ova tehnika je preuzeta iz objektno orijentisanog programiranja (OOP). Pošto je vaša aplikacija jednostavna i ne treba da čuva stanja – widget bez stanja – trebalo bi da postoji metod izgradnje.

    class HelloWorldApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    Now comes the main magic-
    return new MaterialApp(
    home: new Material(
    child: new Center(
    child:new Text("Hello world!"),

    „Centralni“ widget će pokretati elemente dok će „MaterialApp“ obmotati widget, koji se sastoji od materijala.

    U ovom slučaju, dodajete widget za tekstualno polje sa tekstom; slobodno koristite svoj. Pored vidljivih svojstava koja se ovde koriste, „home i child“, postoje mnogi atributi za upravljanje kompletnim korisničkim interfejsom, kao što su stil, dekoracije, datumi, vreme, lokacija itd.

    Skoro ste stigli; vreme je da kombinujemo naš kod. Proverite da li u uređivaču koda imate sledeće:

    import 'package:flutter/material.dart';
    void main() => runApp(new HelloWorldApp())
    class HelloWorldApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    Now comes the main magic-
    return new MaterialApp(
    home: new Material(
    child: new Center(
    child:new Text("Hello world!"),
    ),),);}}

    Na kraju, unesite ovu komandu i pokrenite je.

    flutter run

    Čestitamo, vaš izlaz bi trebalo da bude „Zdravo svete!“ na ekranu.

    Flutter testiranje

    Ako imate iskustva u svetu razvoja softvera, znate koliko je teško ručno testirati da li vaša aplikacija radi ispravno. Ako nemate, možete zamisliti izradu velikih aplikacija sa hiljadama jedinstvenih funkcija. Koliko god se trudili, ne možete ručno testirati sve funkcije. Automatski testovi proveravaju da li vaša aplikacija radi ispravno pre nego što je objavite u produkciji.

    Ovo su kategorije automatskog testiranja:

    #1. Jedinični test

    U ovom slučaju, testirate jednu funkciju, klasu ili metod. Vaš cilj je da proverite da li je jedinica ispravna u različitim uslovima. Jedinični testovi ne upisuju ili čitaju sa diska, ne primaju radnju korisnika niti se prikazuju na ekranu van procesa testiranja. Ako želite da dublje uđete u testiranje jedinica, pokrenite „flutter test –help“ na svom terminalu.

    #2. Test widgeta

    Ponekad se naziva testom komponenti u drugim okvirima korisničkog interfejsa. Ovaj test osigurava da korisnički interfejs vaših widgeta izgleda kako je predviđeno i da se ponaša kako se očekuje. Potrebno vam je testno okruženje za testiranje widgeta jer uključuje više klasa. Na primer, možete da testirate widget kako biste potvrdili da prima korisničke radnje i događaje. Ovaj test je sveobuhvatniji za razliku od jediničnog.

    #3. Integracioni test

    Ovaj test pokriva celu aplikaciju ili njen veći deo. U ovom slučaju, cilj vam je da osigurate da svi widgeti i usluge u vašem digitalnom proizvodu rade zajedno kako je predviđeno u vašem dizajnu. Ovo je provera učinka vaše aplikacije. Integracioni testovi se pokreću na stvarnim uređajima ili OS emulatorima, kao što su iOS ili Android. Više o integracionim testovima možete saznati u Flutterovom vodiču za testiranje integracije.

    Kako postati Flutter programer

    Danas je tržište rada za Flutter programere u velikoj potražnji s obzirom na prednosti koje smo ranije pomenuli. Ako razmišljate da naučite Flutter, napravili ste pravi izbor.

    Prikupite neka predznanja, kao što je objektno orijentisano programiranje, poželjno u Javi. Učenje osnova za Android olakšava snalaženje sa Flutterom.

    Počnite sa osnovama, pređite na razvoj korisničkog interfejsa i naučite kako da upućujete pozive interfejsu aplikacijskog programa (API). Pređite na integracije baze podataka i naučite upravljanje stanjem. Na kraju, zaokružite sve arhitekturom projekta.

    Resursi za učenje

    Evo nekoliko sjajnih kurseva koji će vam pomoći da uđete u razvoj Flutter aplikacija. Ovaj pregled se sastoji od Udemy kurseva i Amazon knjiga.

    #1. Flutter and Dart – Kompletni vodič

    Ovaj kurs je kompletan vodič kroz Flutter SDK i njegov okvir za izradu Android i nativnih iOS aplikacija. Naučićete osnove i dublje zaroniti u teme, i na kraju postati napredni programer.

    #2. Kompletan trening za razvoj Flutter aplikacija sa Dartom

    Nema boljeg načina da naučite Flutter od pohađanja ovog kursa na Flutter Development Bootcamp-u sa Dartom, kreiranog u saradnji sa Google Flutter timom. Bićete sigurni da razumete sve koncepte razvoja Fluttera.

    #3. Naučite Flutter od nule

    Ako ste početnik koji želi da počne sa Flutterom, ovaj kurs o Flutteru od nule će vam pomoći da razumete osnove i kreirate jednostavne i lepe Flutter aplikacije. Nisu potrebni nikakvi preduslovi; možete brzo početi!

    #4. Zvanična dokumentacija Fluttera

    Bez obzira na to da li imate iskustva u kodiranju ili ne, Flutterova dokumentacija će vas provesti kroz proces da postanete stručni programer. To je takođe najbolje mesto za preuzimanje najnovijih stabilnih Flutter izdanja.

    #5. Real-World Flutter by Tutorials (prvo izdanje)

    Ako ste savladali osnove Fluttera i želite da napredujete, ova knjiga Real-World Flutter by Tutorials (prvo izdanje) je vaš prvi izbor.

    Proći ćete kroz sve potrebno da profesionalno pravite Flutter aplikacije.

    #6. Flutter Complete Reference

    Ova knjiga je detaljan pregled Flutter okvira i programskog jezika Dart, i bavi se naprednim temama i najboljim praksama za razvoj Flutter aplikacija.

    Zvanična veb stranica ove knjige nudi i nekoliko kviz igara za testiranje vaših veština.

    #7. Flutter Cookbook

    Ova knjiga je vodič o tome kako da napravite, otklonite greške i skalirate izvorne iOS i Android aplikacije.

    Prođite kroz sveobuhvatne tutorijale sa Flutterom i iterirajte kroz jedinstvene korisničke interfejse (UI).

    #8. Flutter for Dummies

    Ova knjiga pod nazivom Flutter for Dummies je jedinstvena. Ona vas uči programski jezik Dart.

    Objašnjava kako da inicijalizujete sopstvene okvire i na kraju vas opremi svim osnovnim stvarima za početak u revolucionarnom razvoju Flutter aplikacija.

    #9. Igre izrade sa Flutterom

    Bez obzira na to da li želite da istražujete ili pravite Flutter igre, ova knjiga je sveobuhvatan vodič za izradu multiplatformskih igara pomoću Flutterovog Flame motora.

    Knjiga je napisana korak po korak kako bi se osiguralo da razumete sve korake i najbolje razvojne prakse.

    #10. Flutter Projects

    Ova knjiga vas uči programski jezik Dart i Flutter okvir tako što vas vodi kroz izradu aplikacija i igara u stvarnom svetu.

    Sadrži praktične projekte koji demonstriraju najbolje tehnike za razvoj Flutter aplikacije.

    Završne reči

    Sada imate kompletnu sliku o tome kako Flutter funkcioniše i kako vam može pomoći da napravite digitalne proizvode. Flutter vam nudi potpunu dominaciju u fleksibilnosti aplikacija, a vaša mašta je jedino ograničenje.

    Kada savladate osnove Flutter razvoja, možete da kreirate bilo koju aplikaciju – bilo da je veb, Android, Mac ili iOS – kako biste zadovoljili potrebe bilo kog klijenta.

    Zatim pogledajte najbolje okvire za kreiranje aplikacija bez servera.