U ovom tutorial-u ćete saznati kako izraditi jednostavnu Flutter aplikaciju za bacanje kockica te se upoznati s osnovama rada Flutter-a i programskog jezika Dart.

 

Flutter je Google-ov framework za razvoj mobilnih i web aplikacija, a odlikuje se time što se aplikacije pišu u jednoj kodnoj bazi (pišete samo jedan kod u jednom programskom jeziku) koji se kasnije pretvara u kod za Android, iOS i web aplikacije. Za stvaranje Flutter aplikacija koristi se programski jezik Dart.

 

Priprema radnog okruženja za razvoj aplikacije

Kako biste započeli s izradom aplikacija potrebno je najprije postaviti radno okruženje te instalirati potreban softver. Za početak preuzmite i instalirajte Flutter, Microsoft PowerShell (uključen je u Win10), Git i code editor po želji (u primjerima ćemo korisiti Visual Studio Code).

 

Nakon ovoga potrebno je instalirati i podesiti virtualne emulatore za testiranje aplikacija na računalu (instalirajte i Android SDK) te podesiti stvarne uređaje za testiranje (vaš mobitel).

 

Nakon što ste instalirali sve što je potrebno, trebate još instalirati ekstenzije za razvoj Flutter aplikacija u VS Code.

 

Priprema resursa (assets)

Za izradu aplikacije bit će vam potrebne slike kockica koje možete preuzeti ovdje, a kasnije ćete ih ubaciti u mapu images koju ćete stvoriti unutar projekta.

 

Izrada aplikacije

Najprije je potrebno u VS Code-u izraditi novi Flutter projekt. Nakon što ga kreirate ćete, ovisno o brzini vašeg računala, morati malo pričekati da se generiraju sve potrebne datoteke u projektu. Nakon toga, ćete unutar projekta, u mapi lib stvoriti novu mapu images pa u nju ubaciti slike koje ste ranije preuzeli.

 

 

Flutter će automatski generirati sve što vam je potrebno za započeti aplikaciju, uključujući main.dart datoteku sa "Hello World" kodom unutar te datoteke, a da biste počeli raditi na aplikaciji kockice potrebno je izbrisati sadržaj te datoteke i dodati kod kao što je prikazano u sljedećem videu.

 

 

Sljedeći korak je kreiranje korisničkog sučelja/layout-a aplikacije. Flutter ima veliklu zbirku različitih Widget-a koji se mogu međusobnu ugnježđivati jedan u drugi te na taj način stvarati strukturu aplikacije. U našem slučaju najprije smo unutar widgeta Container stvorili widget Scaffold koji ima svoja svojstva backgroundColor , appBar i body sa pripadajućim vrijednostima. Svojstvo appBar sadrži widget AppBar koji ima svoja svojstva backgroundColor title. Za prikaz svih mogućih svojstava nekog widget-a potrebno je samo mišem prijeći preko tog widget-a i pričekati sekundu-dvoje kako bi se otvorio tool-tip sa objašnjenjem tog widget-a. U sljedećem videu je prikazan kod ovog dijela.

 

Nakon toga ćemo dodati slike kockica, a njih ćemo ubaciti u widget Center koji centrira sadržaj unutar njega, nakon čega ćemo u njemu dodati widget Row koji služi za smještanje više drugih widget-a u istom redu. Unutar svake pozicije u Row-u ćemo smjestiti jedan widget Expanded kako bi se sadržaj raširio koliko je to moguće, a unutar Expanded-a ćemo napokon staviti widget Image koji ima svojstvo asset u koji ćemo upisati lokaciju slike ('lib/images/kockica1.png'). Kako ne biste imali error-e prije ovog koraka morate unutar projekta u mabi lib stvoriti mapu images i u nju prebaciti slike koje ste preuzeli.

 

Zatim ćemo kopirati widget Expanded kako bismo na ekrenu prikazivali dvije kockice. Kako bi slike bile dostupne aplikaciji potrebno je u datoteci pubspec.yaml dodati asset-e kao što je prikazano u sljedećem videu.

 

Nakon ovog koraka možete sa F5 pokrenuti svoju aplikaciju, odabrati emulator ili uređaj na kojem želite testirati, pričekati dok se sve ne učita i vidjeti kako aplikacija za sada izgleda.

 

Ako ste primijetili, slike imaju naziv oblika kockica{broj}.png što znači da dinamički možemo mijenjati naziv kockice koja će se pojavljivati korištenjem varijabli kao što je prikazano u sljedećem videu.

 

Kada varijablama zamijenimo vrijednosti s drugim brojevima, učitavat će se druge slike kao što se vidi iz sljedeća 2 videa.

 

 

Kako bi se brojevi na kockicama pojavljivali nasumično od 1 do 6 stvorit ćemo funkciju dajMiRandom(). Za funkciju random potrebno je uvesti biblioteku dart:math.

 

Kako bi korisnik mogao "baciti" kockice moramo mu omogućiti da na nešto klikne, a u ovom slučaju to će biti same kockice. Stoga moramo oko svake slike staviti widget FlatButton kojim će slike postati gumbi.

 

Naposlijetku preostaje samo pridružiti funkciju dajMiRandom() kao radnju koju će gumbi pokrenuti kada se na njih klikne. Kako je cijela klasa koju smo definirali - početni widget Kockice - stateful widget morat ćemo koristiti funkciju setState kako bismo klikom na gumb pozvali funkciju da dodijeli nasumične brojeve varijablama koje kontroliraju prikaz slika. Kako se to radi je prikazano u sljedećem videu.

 

Završni rezultat