Snabbare och snyggare med Flutter

Med Flutter som ramverk ökar möjligheten att komponera unika appar med hjälp av widgets. Vi träffade Tobias Åkeblom, Tromb Developer Expert med stenkoll på Flutter och ställde några frågor.

Snabbare och snyggare med Flutter

Appar är en del av allas vår vardag. Hur skulle vi klara oss utan väderappen, löneappen, bankappen, sjukanmälabarnenappen? Men har du tänkt på att apparna börjar se mer och mer lika ut? Med Flutter som ramverk ökar möjligheten att komponera unika appar med hjälp av widgets. Det är ett nytt sätt att jobba, som sparar både tid och är enklare. Dessutom är det en crossplatform, där samma kod används för både iOS och Android. Vi träffade Tobias Åkeblom, Tromb Developer Expert med stenkoll på Flutter och ställde några frågor.

Tobias Åkeblom, Tromb Developer Expert (TDE)

För en som är oinvigd, vad är Flutter?
— Flutter är ramverk, framtaget av Google, skapat för att bygga applikationer för olika typer av plattformar. Till att börja med var fokus på mobila appar till IOS och Android. Nu är även Flutter för webapplikationer samt applikationer för desktop på gång. Google har även lagt stort fokus i att skapa en riktigt bra upplevelse för oss utvecklare.

Kan man säga att Flutter är ett språk?
— Nja, inte riktigt. Flutter är ett UI-framework och programmeringsspråket som används heter Dart. Första versionen av Flutter presenterades redan 2015 på Dart Developer Summit. Releasen av Flutter 1.0 kom 2018 och är alltså relativt nytt. Flutter och Dart är nu ett av de snabbaste växande projekten på GitHub. Det händer mycket i Dart-världen just nu, med senaste releasen, version 2.6, som har många nya features. Flutter är stort och populärt, därför satsar man mycket på att utveckla Dart för att förbättra och förenkla för Flutter-användarna.

Vad är magin med Flutter – varför ska man använda Flutter?
— Från utvecklarens perspektiv är ”Stateful Hot Reload” väldigt magiskt. Det innebär att en kan göra små justeringar i koden och se dessa i realtid utan att appen måste kompileras och startas om. Animeringar fungerar också väldigt bra i Flutter tack vare den höga skärmuppdateringsfrekvensen( minst 60fps)

Berätta hur du använder Flutter i ditt arbete?
— Flutter är ett UI-ramverk. Allt i Flutter är så kallade widgets. När man bygger ett UI i Flutter, använder man bara kod, som skrivs i Dart. Man komponerar ihop sina totallösningar genom att kombinera ett antal widgets. Och den helhet som man komponerar, kallas också för en widget.

Hur kan man lära sig Flutter?
— Det finns mängder med kunskap att hämta online. Det går att lära sig Fluter genom att läsa på webben på flutter.dev och titta på You Tube-klipp. Det går snabbt och är relativt enkelt om man har förkunskaper inom programmering. Flutter är till hundra procent öppen källkod. Det innebär att man lätt kan kolla hur någon annan löst exempelvis en bra knapp. Då kan man härma den koden och slipper uppfinna hjulet igen.

Är Flutter gratis?
— Ja, det är gratis och det är öppen källkod. Vem som helst kan lägga in en förfrågan, anmäla buggar och lägga in rättning på buggar. Det är communitydrivet med ett stort engagemang. Det inspirerar.

Är Flutter framtiden, eller vad tror du?
— Ja, det verkar vara lite av framtiden. Apple släppte nyligen något de kallar SwiftUI och för Android finns nu en teknik som kallas Jetpack Compose. Båda dessa tekniker använder komposition som metod för att bygga de grafiska gränssnitten.

Kan du berätta om något spännande Flutter-projekt som du jobbar på just nu?
— Ett exempel är Volvo Penta, där vi precis håller på att avsluta utvecklingen av en app, en intern produkt, som kommer underlätta vardagen för medarbetarna. Ett annat spännande projekt är uppdraget att uppdatera appen twICEme. Det är en mobilapp som är gjord för att kunna scanna NFC-taggar som håller så kallad ICE (In Case of Emergency)-data. Under hösten presenterades ett samarbete mellan twICEme och den svenska hjälmtillverkaren POC. Det innebär att på utvalda modeller av skid- och cykelhjälmar kommer det finnas en inbyggd twICEme-tag. Med hjälp av appen kan sedan användaren skriva in sin ICE-data på taggen. Om olyckan är framme kan exempelvis ambulanspersonal läsa av datat från hjälmen. För att få en samlad kodbas valde vi att skriva om appen i Flutter

Vad är nästa steg för Flutter?
— Som Tromb Developer Expert ansvarar jag för att hålla ett öga på allt nytt och intressant som är på gång inom detta område. Ett tips är att spana in Flutter Interact, som gick av stapeln nyligen. Där pratades det mycket om visionen att Flutter ska gå att använda på alla typer av enheter som har en skärm. Det vill säga telefoner, datorer, surfplattor, klockor, tv-apparater och så vidare. De jobbar hårt för att färdigställa den tekniken och de presenterade att Flutter för web just gått in i BETA-stadie från att tidigare bara varit en så kallad ”Developer preview”. Jag kan rekommendera att kolla in föreläsningarna från Flutter Interact. Och vill du dyka ännu djupare finns massa matnyttigt på flutter.dev samt på Flutters You Tube-kanal.

Fördel Flutter

Snabba uppstarttider och exekvering av appen är fördelar med att Flutter kompileras till maskinkod.

Smidigt

Användargränssnittet körs med en uppdateringsfrekvens på minst 60fps och varje pixel på skärmen ägs av Skialagret. Det resulterar i ett smidigt och högst anpassningsbart gränssnitt.

Allt är Widgets

Widgets är grunden i användargränssnittet när man bygger appar i Flutter. Till skillnad från andra ramverk som separerar vyer, vy-controllers, layouts och andra egenskaper, använder Flutter widgeten som en enhetlig objektmodell. Widgets bildar en hierarki baserad på komposition. Varje widget kapslar in och ärver egenskaper från sin överordnade. Det finns inget separat applikationsobjekt. I stället tjänar rootwidgeten denna roll. En widget kan definiera:
• Ett element som t ex en knapp eller en meny
• Ett stilelement som t ex en font eller ett färgschema
• En formatering som t ex padding runt ett element.

Komposition istället för arv

Widgets är i sig ofta sammansatt av många små, enstaka widgets som kombineras för att ge kraftfulla effekter. Exempelvis består den frekvent använda Container-widgeten av flera widgetar som är ansvariga för layout, färgsättning, positionering och storlek. Mer specifikt betstår container av widgetarna LimitedBox, ConstrainedBox, Align, Padding, DecoratedBox och Transform. I stället för att subklassa Container för att skapa en anpassad effekt kan du komponera dessa och andra enkla widgetar på nya sätt.

Flutters ramverk för mobila applikationer

• Fluttermotorn hantererar Skia (grafikrendering) samt en virtuell miljö för Dart.
• Dart gör det möjligt för Flutter att kompilera källkoden AOT till maskinkod.
• Fluttermotorn kompileras av Android eller IOSs LLVM.
• Båda delarna paketeras sedan ihop till ett körbart projekt för Android och IOS.