Flutter Studio, version 2

Jeg har opdateret Flutter Studio webapplikationen med det mål at gøre den mere fleksibel, komplet, lydhør og præcis. Appen skal nu arbejde bedre på forskellige skærme, holde dig i strømmen, nøjagtigt vise din app på flere enheder og retninger og arbejde konsekvent. Derudover producerer den nu komplette, arbejdskode og opbygning af filer og har et mere komplet sæt widgets, inklusive nogle nye, der ikke findes i flutter.io widgetkataloget.

Den nye version

  • Er lydhør
  • Viser rigtige Android- og iOS-enheder nøjagtigt på nettet
  • Producerer og viser perfekte pixeldesign
  • Giver flere widgets (inklusive temaer)
  • Tillader dig at redigere widgets intuitivt og fremstille nøjagtig kode
  • Fokuserer på design (kode og pubspec er på separate faner)
  • Fremstiller komplette, fungerende applikationskode og pubspec.yaml-filer

Den nye version er tilgængelig på

https://flutterstudio.app

Her er hvad der er nyt ..

En lydhør ansøgning

Den første version af Flutter Studio blev bygget med et statisk lærred og en enhed (en Pixel) med faste paneler til kode- og egenskabsredaktører. De samme egenskabsredaktører viste for forskellige widgets, uanset om de anvendte den aktuelle widget eller ej. Den viste enhed var af samme størrelse, uanset hvor meget plads du havde. Det flød i et hav af hvidt rum på en stor skærm og passede næppe på en bærbar skærm. Hver gang jeg kodede på farten (på en 13 ”MacBook pro), ville jeg have svært ved at passe kildekoden, værktøjsvinduerne og modellen i ét vindue.

Jeg redesignede den for at være lydhør og arbejde på flere skærmstørrelser:

Som du kan se ovenfor, ændres den nye version af enhedens og værktøjsvinduerne til at passe til den tilgængelige plads. Jo større skærmen er, jo større bliver den viste enhed. Der er en egenskabseditor, der ændres i henhold til den valgte widget. Den genererede kildekode og pubspec er på en separat fane. Der er flere funktioner synlige på billedet, men jeg kommer til dem senere. Pointen er, at du kan arbejde på dit design på en hvilken som helst størrelse skærm, fra en 11-tommer bærbar computer til en 30-tommer skærm og har alle værktøjer og muligheder synlige.

Mere, Pixel-Perfect Designs og et nyt værktøj

I den første version af flutterbuilderen brugte jeg et statisk lærred, der var meget løst baseret på min egen testenhed, en Pixel-telefon. Det var ekstremt ufleksibelt og ofte unøjagtigt. Det blev ikke skaleret nøjagtigt, og det begrænsede dig til en enhed. Jeg ønskede at tillade prototyper på enhver enhed, inklusive dem, du muligvis ikke har. Du har muligvis ikke $ 1000 til at få en iPhone X eller være i stand til at finde en fungerende Nexus 7 2012, men dine kunder bruger muligvis dem.

Til denne nye version har jeg oprettet en database med enheder og statistikker om dem ved hjælp af data, der for det meste er indsamlet fra https://material.io/devices/ og forskellige producenters websteder og opdateret applikationsmodelmaleren for at inkorporere disse oplysninger. Hver enhed, fra en Android One til iPhone X, vises nøjagtigt, med designet skaleret præcist til deres skærm. Det er lige så let at vælge en ny som at vælge fra dropdown.

Som jeg har skrevet før, foretrækker jeg at bygge værktøjer. Jeg skrev en applikation til at administrere enheder og let tilføje nye. I ånden om deling har jeg offentliggjort en version. Det kører på ildbase. Så du kan se og downloade (som JSON) enhedsstatistik på

https://devicedb.app/

Du kan også downloade hele databasen eller en hvilken som helst enhed som en JSON-fil der.

Men hvordan kan jeg bruge disse oplysninger til at hjælpe udviklere? Flutter bruger et af de bedste aspekter af Android: grafiske objekter måles i en enhedsuafhængig enhed baseret på reel dimension (dp eller dip, ca. 160 pr. Tomme). Mens en fysisk skærmepixel på en Nexus 9 eller iPhone X er meget mindre end en på en original Nexus One, er en 160x160dp-knap den samme størrelse på begge.

Givet en nøjagtig database med enhedsmetrics, inklusive deres skærmstørrelser i dp, kunne jeg opbygge en logisk model af applikationen i dp og oversætte den til din skærms grafiske raster for enhver enhed og vise den skaleret nøjagtigt til din skærm.

Ved at skalere Flutter Studio-modellen ved hjælp af reelle enhedsstatistikker, kan jeg give brugeren en nøjagtig model for, hvordan det kørende program ser ud på en bestemt enhed, fra en Android One-referencetelefon (480x854 pixel-skærm; 320x569 dp-skærm; 4,5 ”diagonal) :

Til en Nexus 9-tablet (2048x1539 pixels; 768x1024 dp; 8,9 ”diagonal):

Bemærk, hvordan de samme applikationselementer optager mindre plads på nexus 9.

Ved at bruge virkelige modeller af telefoner og tillade forskellige aspekter (liggende og portrætorientering), kan jeg også give udviklere mulighed for at teste forskellige layout hurtigt, før de prøver dem på faktiske enheder. Mens udvikling i Flutter er meget, meget hurtig med hurtig vending, er dette en meget hurtigere måde at prototype på, især hvis du har brug for at teste på flere enheder.

Nogle gange gør skalering af applikationen nøjagtigt for enheden det svært at se den kørende applikation, især på skærmeenheder med høj tæthed som nexus 9. Jeg kan næppe se mit arbejde, mens jeg f.eks. Bruger en bærbar computer. Med det i tankerne inkluderede jeg en afbryder til at slå ægte skaleringsskala ud.

På billedet ovenfor er en typisk app på nexus 9 med en standard Material RaisedButton, Image og FlutterLogo med skalering tændt (kontakten er nederst til venstre). Det ser nøjagtigt ud som dette, der kører på enheden. Men det er næsten umuligt at se teksten på knappen. Du kan slukke ægte skalering for at se den, som vist nedenfor.

Når skalering er slået fra, er mindre af applikationen synlig, men du kan se detaljer på appen, selv på en lille skærm. Applikationen tegnes ikke efter skala for den enhed, men den er synlig.

Gør det muligt for dig at skalere appen hurtigt kan du arbejde på layoutet uden at genindlæse eller ændre testenheden. Jo mindre arbejde du (udvikleren) skal udføre, jo mere kan du fokusere på den faktiske værdi. Værktøjet skal eliminere det travle arbejde med testning på flere enheder.

Jeg har testet appen ved hjælp af virkelige enheder (både IOS og Android) og værktøjer som linealer for at sikre den virkelige verden nøjagtighed af web-appen på faktiske enheder.

Flere widgets, bedre redaktører

Den første version af appen var baseret på en tidlig alfaversion af fladder og havde et begrænset sæt widgets. Til denne version ønskede jeg i det mindste at matche listen i widgetkataloget (https://flutter.io/widgets/). Selvom dette er et bevægende mål, var jeg i stand til at medtage næsten alle widgets på nuværende tidspunkt (maj 2018, Beta 3). Dette inkluderer nogle nye som FlutterLogo, RotatedBox og Opacity. Det var personligt nyttigt at inkludere dem, da det tvang mig til at bruge dem og lære deres underlige forhold. Som en bonus fik komponenter som FlutterLogo mig til at lære både HTML-lærred og Flutter-transformationsmatricer.

Nogle af widgets og dekorationer har meget vanskelige API'er, og det er ikke let at finde ud af, hvordan man bruger dem. Jeg designet egenskabseditorerne, så de (forhåbentlig) intuitive. Så du kan lege med dem og se, hvordan koden opdateres, hvilket gør det meget lettere at lære dem.

Forløb har for eksempel en API, der har nogle quirks. At give dig mulighed for hurtigt at lege med det ved hjælp af en grafisk editor og undersøge den genererede kode gør læring af API meget lettere:

Ud over widgets på flutter.io-webstedet inkluderede jeg nogle af dem, jeg ofte har brugt, når jeg kodede faktiske Flutter-apps, såsom FractionallySizedBox (som jeg ofte bruger til at opdele apps logisk, uafhængigt af skærmstørrelse) og DropdownButton. Jeg inkluderede også andre, jeg brugte, der virkelig ikke er godt dokumenteret. To møder især op ofte: RadialGradient og LinearGradient. De er ikke egnede widgets, men de er virkelig nyttige, og deres implementering har nogle høringer.

Forhåbentlig at give andre et værktøj til let at lege med dem visuelt og fremstille arbejdskode vil fremskynde læringsprocessen. Når du først har forstået dem, er disse widgets nemme at bruge. Men de er vanskelige at hente, og mange af dem er faktisk svære at opdage.

Kort sagt, den sidste version af Flutter Studio havde 26 widgets. Denne version har omkring 50.

Ikoner er lettere

Den gamle app havde indviklet ikonvælger. Ved at klikke på ikonknappen blev der valgt en valgmand og ændret ikonet. Derefter trækker du den over til appen. Dette var et problem. Værktøjet var inkonsekvent (det havde et konstant skiftende ikon). Og det fungerede ikke som andre dele af appen, der krævede to trin, hvoraf den ene ikke kunne opdages. Det var webækvivalent med 3D Touch, lang tryk eller højreklik. Den nye version behandler ikoner og ikonknapper som enhver anden widget. Du trækker det over og redigerer det derefter ved hjælp af egenskabspanelet.

Med egenskabseditoren kan du vælge farve, størrelse og glyph på ikonet.

Temaer er også widgets

Alt er en widget i Flutter, selv temaer. Et tema definerer typografi og farver på en materiel app eller temaet børn. Dette betyder, at du kan opdele din app i logiske sektioner og hvert tema korrekt. Tema-widget findes i styling-fanen.

For at style hele applikationens tema skal du klikke på enhedsrammen (den grå del, der omgiver den aktuelle applikation). Egenskabseditoren viser nu hele appens tema.

Skærmbillede herunder viser mig redigering af et program, der er opdelt i to halvdele (ved hjælp af FractionallySizedBoxes). Jeg trækkede et tema ind i hver halvdel. Det øverste tema er et mørkt tema. Bunden er et let tema med en lyserød primærprøve. Alle komponenter i begge halvdele vil dele dette temas farver og skrifttyper.

Komplet, Working Code og PubSpec

Den sidste version af Flutter Studio producerede kun kodestykker af det genererede program. Det handlede heller ikke med aktiver (f.eks. Billeder), der blev brugt. Den nye version producerer fuldt fungerende kode og en fungerende pubspec.yaml-fil med brugte billeder eller skrifttyper. En af de største irritationer, jeg havde ved at lære at bruge aktiver i Flutter, var at formatere pubspec-filen korrekt og holde styr på billeder. Jeg er sikker på, at du har haft denne oplevelse: Du føjer et billedaktiver til din app, fjerner annullering af aktivlinjen i den genererede pubspec-fil, og build mislykkes. (Den genererede pubspec.yaml er formateret med mellemrum, og parseren forventer faner.) Én fane eller mellemrum på det forkerte sted fører til fejl. Du skal også huske at fjerne billeder fra yaml-filen, hvis du ændrer eller sletter dem.

Værktøjet gør dette til en no-brainer. Hele yaml-filen genereres, og alle anvendte skrifttyper eller billeder tilføjes, formateres korrekt og uden duplikater. Du kan tilføje temaer, billeder og knapformater til dit hjerte indhold. Værktøjet filtrerer kun de skrifttyper og aktiver, du bruger, og føjer dem til en komplet, parseable yaml-fil til projektet.

Det vil også producere en komplet applikation, klar til at køre på enhver enhed, ikke kun kodestykker. Koden, som værktøjet producerer, er komplet og kører.

En sidste note

Hvis du overvejer at bygge en stor webapplikation, vil jeg virkelig anbefale at overveje Dart. FlutterStudio og enhedsdatabasen blev begge skrevet ved hjælp af Dart. Den allerførste version af applikationen blev bygget i Google Web Toolkit, fordi jeg vidste, at den ville fungere, efter at have brugt den i vrede. De sidste to versioner blev bygget ved hjælp af Dart. Den nye kodebase med alle de tilføjede funktioner er væsentligt mindre end den originale GWT-version. Dette er ikke kun på grund af de bedre samlere.

Dart tilskynder til effektiv kode og har strukturer og typer, der tillader det (som futures og streams) på et grundlæggende niveau. Jeg tøvede med at anbefale det stærkt i fortiden, fordi det ikke var stærkt indtastet, og jeg ved af erfaringer, at det kan føre til problemer i større codebaser. Fra version 2 indtastes Dart.

Det er også meget klarere og lettere at vedligeholde. Google har aggressivt udviklet Dart (og Flutter) ved hjælp af de lektioner, de har lært fra GWT, Android og andre projekter. Kompilatorerne (både forud for tid og lige til tiden) og VM'er er hurtige og effektive. Dart-kompilatorerne imponerer mig konstant, når de udsender javascript (web) og ARM (flutter) -kode. Det er hurtig, lille og effektiv kode. Hvis du målretter mod moderne browsere, er dart produktionsklar. Jeg kan ikke sige nok gode ting om arbejdsgangen og biblioteker til rådighed til at opbygge webapplikationer.