Flutter Studio, verzija 2

Ažurirali smo web aplikaciju Flutter Studio sa ciljem da je učinim fleksibilnijom, cjelovitijom, prilagodljivijom i preciznijom. Aplikacija bi sada trebala bolje raditi na različitim ekranima, pratiti vas u toku, precizno prikazivati ​​aplikaciju na više uređaja i orijentacija i raditi dosljedno. Pored toga, sada proizvodi cjelovit, radni kôd i datoteke za izradu datoteka i ima potpuniji skup widgeta, uključujući neke nove koji se ne nalaze u katalogu widgeta flutter.io.

Nova verzija

  • Odgovara
  • Prikazuje stvarne Android i iOS uređaje precizno na webu
  • Izrađuje i pokazuje piksele savršenog dizajna
  • Pruža više widgeta (uključujući teme)
  • Omogućuje vam da intuitivno uređujete widgete, proizvodeći točan kôd
  • Fokusiran na dizajnu (kôd i pubspec nalaze se na zasebnim karticama)
  • Izrađuje kompletne, radne kodove aplikacija i datoteke pubspec.yaml

Nova verzija dostupna je na

https://flutterstudio.app

Evo što je novo ...

Odgovarajuća aplikacija

Prva verzija Flutter Studio je izgrađena sa statičkim platnom i jednim uređajem (Pixel) sa fiksnim pločama za uređivanje koda i svojstava. Isti su uređivači entiteta pokazali za različite widgete, bez obzira jesu li primijenjeni na trenutni widget ili ne. Prikazani uređaj bio je iste veličine bez obzira na to koliko prostora ste imali. Lebdio je u moru bijelog prostora na velikom monitoru i jedva se uklapao u ekran prijenosnog računala. Kad god bih kodirao u pokretu (na MacBook Pro 13 ”) teško da bih mogao uklopiti izvorni kod, prozore alata i model u jedan prozor.

Redizajnirao sam ga da reagira i radim na većim veličinama zaslona:

Kao što možete vidjeti gore, nova verzija mijenja veličinu prozora uređaja i alata kako bi se uklopili u raspoloživi prostor. Što je zaslon veći, to će i veći uređaj biti prikazan. Postoji jedan uređivač svojstava koji se mijenja u skladu s odabranim widgetom. Generirani izvorni kod i pubspec nalaze se na zasebnoj kartici. Na slici su vidljive dodatne značajke, ali o njima ću se pozabaviti kasnije. Poanta je u tome što možete raditi na svom dizajnu na bilo kojem ekranu veličine, od 11-inčnog prijenosnog računala do 30-inčnog monitora i na njemu su vidljivi svi alati i mogućnosti.

Više, savršeno dizajnirani pikseli i novi alat

U prvoj verziji konstruktora lepršavanja koristio sam statično platno koje se vrlo lagano temelji na vlastitom testnom uređaju, telefonu Pixel. Bio je izuzetno nefleksibilan i često netočan. Nije precizno skaliran i ograničio vas je na jedan uređaj. Željela sam omogućiti prototipiranje na bilo kojem uređaju, uključujući i one koje možda nemate. Možda nemate 1000 dolara za nabavku iPhonea X ili možete naći radni Nexus 7 iz 2012., ali klijenti bi ih mogli koristiti.

Za ovu novu verziju stvorio sam bazu podataka o uređajima i statistike o njima koristeći podatke uglavnom prikupljene s https://material.io/devices/ i web stranica različitih proizvođača i ažurirao program za slikanje aplikacija kako bih te podatke uključio. Svaki uređaj, od Android Onea do iPhonea X precizno je prikazan, s dizajnom prilagođenim točno njihovim ekranima. Odabir nove je jednostavan kao odabir s padajućeg izbornika.

Kao što sam već pisao, radije izrađujem alate. Napisala sam aplikaciju za jednostavno upravljanje uređajima i dodavanje novih. U duhu dijeljenja učinila sam verziju javnom. Radi na vatri. Na taj način možete pregledati i preuzeti (kao JSON) statistiku uređaja na

https://devicedb.app/

Tamo također možete preuzeti cijelu bazu podataka ili bilo koji uređaj kao datoteku JSON.

Ali kako mogu iskoristiti ove podatke za pomoć programerima? Flutter koristi jedan od najboljih aspekata Androida: grafički se objekti mjere u jedinici neovisnoj o uređaju na temelju stvarnih dimenzija (dp ili dip, oko 160 po inču). Iako je fizički piksel na zaslonu na Nexusu 9 ili iPhoneu X mnogo manji od onog na izvornom Nexus One, gumb 160x160dp jednake je veličine na oba.

S obzirom na točnu bazu podataka o mjernim podacima uređaja, uključujući njihove veličine zaslona u dp-u, mogao bih sastaviti logički model aplikacije u dp-u i prevesti ga na grafički raster vašeg zaslona, ​​za bilo koji uređaj i prikazati ga precizno skaliranim na vašem zaslonu.

Pomoću skaliranja modela Flutter Studio koristeći statistiku stvarnih uređaja, korisniku mogu dati precizan model kako će izgledati pokretana aplikacija na određenom uređaju, s referentnog telefona Android One (zaslon piksela 480x854; ekran duljine 320x569 dp; dijagonala 4,5 ”) :

Na Nexus 9 tablet (2048x1539 piksela; 768x1024 dp; dijagonala 8,9 ”):

Primjetite kako isti elementi aplikacije zauzimaju manje prostora na Nexusu 9.

Koristeći stvarne modele telefona i dopuštajući različite aspekte (orijentacije pejzaža i portreta), također mogu omogućiti programerima da brzo testiraju različite izgled prije nego što ih isprobate na stvarnim uređajima. Iako se razvoj u Flutteru odvija vrlo, brzo i brzo se preokreće, ovo je mnogo brži način prototipa, pogotovo ako trebate testirati na više uređaja.

Ponekad precizno skaliranje aplikacije na uređaju otežava uvid u pokretačku aplikaciju, posebno na ekranima velike gustoće poput nexusa 9. Jedva vidim primjerice svoj rad dok koristim prijenosno računalo. S tim na umu uključio sam prekidač za isključivanje stvarnog skaliranja uređaja.

Na slici gore tipična je aplikacija na Nexusu 9, sa uključenim standardnim Material RaisedButton, Image i FlutterLogo s uključenim skaliranjem (prekidač je u donjem lijevom kutu). Izgleda upravo tako kako to radi na uređaju. Ali gotovo je nemoguće vidjeti tekst na gumbu. Istinsko skaliranje možete isključiti kako biste ga vidjeli, kao što je prikazano u nastavku.

Ako je skaliranje isključeno manje je aplikacije vidljivo, ali detalje možete vidjeti čak i na malom zaslonu. Aplikacija nije nacrtana u mjeri za taj uređaj, ali je vidljiva.

Omogućujući vam brzo razmjenu aplikacije omogućuje vam rad na izgledu bez ponovnog umetanja ili promjene uređaja za testiranje. Što manje (razvojnog) posla morate obaviti, više se možete usredotočiti na stvarnu vrijednost. Alat bi trebao ukloniti zauzet rad testiranja na više uređaja.

Aplikaciju sam testirao pomoću stvarnih uređaja (i IOS i android) i alata poput vladara kako bih osigurao točnost web aplikacije u stvarnom svijetu na stvarnim uređajima.

Više widgeta, bolji urednici

Prva verzija aplikacije temeljila se na ranoj alfa verziji lepršavanja i imala je ograničeni skup widgeta. Za ovu verziju barem sam se želio uskladiti s popisom u katalogu widgeta (https://flutter.io/widgets/). Iako je ovo pokretna meta, u današnje vrijeme uspio sam uključiti gotovo sve widgete (svibanj 2018, Beta 3). To uključuje neke nove poput FlutterLogo, RotatedBox i Opacity. Bilo mi je osobno korisno uključiti ih budući da me prisilio da ih koristim i naučim njihove zamke. Kao bonus, komponente poput FlutterLogo natjerale su me da naučim i HTML platnu i matricu transformacije Fluttera.

Neki widgeti i ukrasi imaju vrlo škakljive API-je i nije lako shvatiti kako ih koristiti. Napravio sam da urednici svojstava za njih budu (nadam se) intuitivni. Tako se možete poigrati s njima i vidjeti kako se kôd ažurira, što im olakšava učenje.

Na primjer, gradijenti imaju API koji ima neke značajke. Omogućavanje brzog igranja s njim pomoću grafičkog uređivača i ispitivanjem generiranog koda čini učenje API-ja mnogo lakšim:

Pored widgeta na web-lokaciji flutter.io, uvrstio sam i neke od onih koje sam često koristio prilikom kodiranja stvarnih Flutter aplikacija, poput FractionallySizedBox (koji često koristim za logičko dijeljenje aplikacija, neovisno o veličini zaslona) i DropdownButton. Uključio sam i druge koje sam koristio koje stvarno nisu dobro dokumentirane. Često se pojavljuju dva: RadialGradient i LinearGradient. Oni nisu stvarni widgeti, ali su zaista korisni i njihova primjena ima neke zamke.

Nadam se da će pružanje alatima drugima da se lako vizualno igraju s njima i proizvesti radni kod ubrzati proces učenja. Jednom kada ih shvatite, ove widgete lako je koristiti. Ali teško ih je pokupiti, a mnoge od njih je zapravo teško otkriti.

Ukratko, posljednja verzija Flutter Studio imala je 26 widgeta. Ova verzija ima oko 50.

Ikone su lakše

Stara aplikacija imala je zbrkani izbornik ikona. Klik na gumb ikone otvorio je izbornik, promjenu ikone. Zatim ste je prevukli u aplikaciju. Ovo je bio problem. Alat je bio nedosljedan (imao je ikonu koja se stalno mijenjala). I nije djelovalo kao drugi dijelovi aplikacije koji zahtijevaju dva koraka, od kojih jedan nije otkriven. Bio je to ekvivalent weba 3D Touch, dugim pritiskom ili desnom tipkom miša. Nova verzija tretira ikone i gumbe ikona kao i bilo koji drugi widget. Povucite je iznad, a zatim uredite na ploči sa svojstvima.

Uređivač svojstava omogućuje vam odabir boje, veličine i glifa ikone.

Teme su i widgeti

Sve je widget u Flutteru, čak i teme. Tema definira tipografiju i boje materijalne aplikacije ili djecu teme. To znači da svoju aplikaciju možete pravilno podijeliti u logičke odjeljke i temu. Widget za temu nalazi se na kartici za oblikovanje.

Za stiliziranje teme cijele aplikacije kliknite na okvir uređaja (sivi dio koji okružuje stvarnu aplikaciju). Uređivač svojstava sada prikazuje temu cijele aplikacije.

Snimak zaslona prikazuje mi uređivanje aplikacije podijeljene na dvije polovice (pomoću FractionallySizedBoxes). Uvukao sam Temu u svaku polovicu. Gornja tema je mračna tema. Dno je svijetla tema s ružičastim primarnim uzorkom. Sve komponente u bilo kojoj polovici dijelit će boje i fontove te teme.

Kompletan, radni kod i PubSpec

Posljednja inačica Flutter Studio proizvela je samo isječke koda generirane aplikacije. Također se nije bavila korištenim sredstvima (npr. Slikama). Nova verzija proizvodi u potpunosti radni kôd i radnu datoteku pubspec.yaml sa svim korištenim slikama ili fontovima. Jedna od najvećih muka u učenju kako koristiti imovinu u Flutteru je pravilno oblikovanje datoteke pubspec i praćenje slika. Siguran sam da ste imali ovo iskustvo: dodate imovinu slike svojoj aplikaciji, raskomadate liniju imovine u generiranoj datoteci pubspec i izrada ne uspijeva. (Generirani pubspec.yaml formatiran je s razmacima i parser očekuje kartice.) Jedna kartica ili prostor na pogrešnom mjestu dovodi do pogreške. Također, morate upamtiti da uklonite slike iz yaml datoteke ako ih promijenite ili izbrišete.

Alat to čini ne-pametnim. Čitava se yaml datoteka generira, a svaki korišteni font ili slike dodaju se, pravilno formatiraju i bez duplikata. U sadržaj svog srca možete dodati teme, slike i stilove gumba. Alat će filtrirati samo fontove i sredstva koja koristite i dodati ih u kompletnu, razumljivu yaml datoteku za projekt.

Također će stvoriti cjelovitu aplikaciju, spremnu za pokretanje na bilo kojem uređaju, a ne samo isječke koda. Kôd koji alat proizvodi je dovršen i pokrenut.

Još jedna zadnja napomena

Ako razmišljate o izradi velike web aplikacije, preporučam vam da razmislite o Dartu. FlutterStudio i Device Database napisani su putem Dart-a. Prva verzija aplikacije izgrađena je u Google Web Toolkit-u, jer sam znao da će raditi, upotrebljavajući je u bijesu. Posljednje dvije verzije izgrađene su pomoću Dart-a. Nova baza kodova, sa svim dodanim značajkama, značajno je manja od izvorne GWT verzije. To nije samo zbog boljeg sastavljača.

Dart potiče učinkovit kod i ima strukture i vrste koje ga omogućuju (poput budućnosti i potoka) na temeljnoj razini. U prošlosti sam se ustručavao to preporučiti jer nije bio snažno tipkan, a iz iskustva znam da to može dovesti do problema u većim bazama kodova. U verziji 2, upisuje se Dart.

Također je puno bistriji i lakši za održavanje. Google je agresivno razvio Dart (i Flutter), koristeći lekcije koje su naučili iz GWT-a, androida i drugih projekata. Kompajleri (i unaprijed i vremenski) i VM-ovi brzi su i učinkoviti. Dart prevodioci me dosljedno impresioniraju kad izdaju JavaScript (web) i ARM (lepršava) kôd. To je brz, mali i učinkovit kod. Ako ciljate moderne preglednike, pikado je spremna za proizvodnju. Ne mogu reći dovoljno dobrih stvari o tijeku rada i knjižnicama dostupnim za izradu web aplikacija.