Farger i Flutter!
I denne artikkelen introduserer jeg rammeverket Flutter for de som ikke har vært bort i det før. Samtidig har jeg lyst til å vise fram en av tingene jeg syns er mest artig med å jobbe i Flutter, nemlig fargesystemet! Slik fargesystemet er implementert i Flutter, kan du som utvikler designe en app med god fargebruk uten å ha så mye peiling på farger og fargesystem. Litt lenger ned på siden vil jeg demonstrere hvordan.
Hva er Flutter?
Flutter er et kryssplattform brukergrensesnitt rammeverk skrevet i programmeringsspråket Dart. Det brukes i hovedsak til å lage iOS og Android brukergrensesnitt, men kan også brukes til Web, Windows, Linux og MacOS.
Det unike med Flutter er slagordet “Everything is a widget”, som vil si at koden skrives som komponenter som kan kombineres til større komponenter. Dette konseptet er velkjent for de som har vært borti React før, men i Flutter kalles altså disse komponentene for “Widgets”. Flutter-Widgetene bygges som et tre med en rotnode Widget på toppen, med grener av løvnoder under den igjen med sine egne barn, osv.
Rammeverket har tatt mye inspirasjon fra React og skiller seg noe fra andre kryssplatform rammeverk som React Native. Det som gjør Flutter unikt er blant annet:
- Flutter gir utviklere ganske mye ut av boksen i form av “Widgets”. Her får man med seg et omfattende brukergrensesnitt bibliotek med Material Design UI komponenter, iOS-style UI komponenter, accessibility, animation, async biblioteker og mye mer. Slik at et Flutter prosjekt vil typisk ikke trenge mange eksterne biblioteker, men man har muligheten for det og med Flutter Package Manager.
- Flutter har sin egen interne “engine”, på samme måte som en spillmotor som håndterer alt som vises på skjermen. Dette er noe annerledes enn andre kryssplatformer som typisk kommuniserer med Android og iOS bibliotekene for å representere Native komponenter. Flutter på den andre siden slipper unna denne abstraksjonen, fordi Dart-koden manipulerer alle pikslene selv og kompilerer rett ned til Native maskinkode i stedet for Native komponenter.
- Dart er enkelt å lære seg, spesielt hvis man har mye erfaring med Javascript med Typescript, C# og Java.
Flutter og Fargesystem
Flutter har tatt utgangspunkt i Material Design hvor de nyeste versjonene av rammeverket tar spesifikt i bruk Material 3. Det er også mulig å bygge en Flutter applikasjon med iOS style design, eller egendefinert design system. Fokuset for artikkelen er dog bruken av Material 3 i Flutter, fordi det er det som støttes best ut av boksen av rammeverket.
Det er totalt 24 farger som kan defineres innen Material 3 fargesystemet kjent som primær-, sekundær-, tertiær-, error- og nøytrale farger.
Primærfargen brukes på de viktigste og mest brukte komponentene i brukergrensesnittet som knapper eller/og aktive tilstander. Rollen til primærfargen er generelt å tiltrekke seg oppmerksomheten.
Sekundærfargen er mindre fremtredende komponenter som f.eks filter chips eller andre ikoner.
Tertiærfargen brukes til å kontrastere og balansere primær og sekundærfargene.
Errorfargen brukes til å gi tilbakemelding eller varsle når ting ikke fungerer som det skal i brukergrensesnittet.
Nøytrale farger omfavner en rekke fargekategorier som f.eks bakgrunns-, overflate- og skyggefarger.
Hvis du vil implementere koden fra seksjonene under så antar jeg at du har satt opp et Flutter miljø. Følg dokumentasjonen her, for å installere og sette opp et Flutter miljø. Du kan også leke med konseptene beskrevet i artikkelen i dette demoprosjektet.
Hvordan implementerer du et fargesystem i Flutter?
For implementere disse fargene i Flutter, lager du en klasse som inneholder en medlemsvariabel av typen “ThemeData” som tar inn blant annet en ColorScheme klasse argument. Der definerer man light eller dark theme i “brightness” og Material 3 fargene man ønsker. Slik ser det ut:
Som du kan se så har jeg valgt å ikke fylle ut alle fargene, for det vil først og fremst kreve at jeg forstår hvilke farger som komplimenterer hverandre. Noe jeg åpenbart ikke gjør, så da er det bra at Flutter anerkjenner at ikke alle utviklere har tilgang på designere.
Hvis du finner deg selv i samme situasjon som meg kan du velge å definere kun 2 argumenter, nemlig “brightness” og “colorSchemeSeed”. Hvor colorSchemeSeed definerer din selvvalgte primærfarge som generere de resterende fargene.
Flutter vil da generere passende farger som samsvarer med designprinsipper til fargesystemet. Resultatet er at det vil se veldig bra ut! Dette uten at man trenger å ha noe forståelse av hvordan fargesystemet funker.
En kombinasjonssak mellom colorSchemeSeed og eksplisitte definerte farger i ColorScheme klassen er også mulig. Men her må man bruke extension metoden som jeg beskriver lenger ned.
Nå har du definerte farger, hva nå?
Flutter tar i bruk fargene nesten umiddelbart når du lager et prosjekt. Med starterkoden under så er klassen “MaterialApp” utgangspunktet vårt til å lage all brukergrensesnitt, hvor MaterialApp er rotnoden av applikasjonen. Det er på dette nivået vi definerer fargesystemet vårt som vil prege alle komponentene våre. Legg merke til at medlemsvariabelen “lightTheme” til ExampleTheme klassen vår som vi definerte tidligere, går inn som “theme” argument i “MaterialApp”. Jeg har også lagt til dark theme versjonen kun ved å bytte ut “brightness” argumentet i ExampleTheme klassen.
Med dette så vil Flutter definere fargen på alle komponentene våre uten at vi trenger å eksplisitt gjøre det selv. I dette eksemplet har jeg har tatt utgangspunkt i brukergrensesnittet til Vy, slik ville light og dark theme sett ut når vi definerer blå som primærfarge i Flutter:
Hva er det egentlig Flutter gjør bak kulissene?
Basert på Material 3 sin designprinsipper på komponenter, bruker den fargen som er ment for en spesifikk komponent uten at man trenger å definere det eksplisitt. For eksempel knapper av typen Floating Action Buttons i Material 3 har primærfargene “Primary” og “onPrimary”. Det fins andre typer knapper, og disse har andre farge kombinasjoner. For eksempel i dette eksempel bruker knappen “Kjøp billett til neste avgang”, primærfargen “primaryContainer” som bakgrunnsfarge og “onPrimaryContainer” som text/icon fargen.
Hva om du ikke vil ha de autogenererte fargene på knappen?
Hvis du ønsker å skifte text fargen på knappen kan du i “color” argumentet av TextStyle bytte fra dette:
Til hvilken som helst farge i fargesystemet, for eksempel “onError”:
“Theme.of(context).colorScheme” kan kalles fra hvor som helst i applikasjonen, når man først har definert et fargesystem! Dette er en utrolig fin og skalerbar måte å integerere fargetemaer inn i applikasjonen.
Hva om fargene i Material 3 ikke dekker alle behovene dine?
Flutter håndterer også det på en veldig fin måte! Du kan bruke “extension” metoden for å definere flere farger for klassen ColorScheme. For eksempel, hvis jeg vil ha unike farger for varsling kan jeg definere extensions metoden “AdditionalColors” med farge variabler jeg ønsker å bruke i applikasjonen. Disse fargene vil så bli lagt til alle instanser av ColorScheme klassen.
Da kan man på samme måte bruke “Theme.of(context).colorScheme” med sin egendefinerte farger. Slik som det er gjort her:
I extension metoden over vil fargene kun være definert for light theme. For å inkludere både light og dark theme farger i extension metoden kan man gjøre følgende:
Konklusjon
Flutter forenkler håndteringen av fargesystemet ved å automatisk implementere mye av det ut av boksen. Det at den generer passende fargekombinasjoner forenkler arbeidet for en utvikler dersom man ikke har en designer på teamet. Den trebaserte komposisjonen av Flutter “Widgets” gjør det enkelt å bruke et fargesystem. Fargene defineres i rotnoden og traverserer nedover til komponentene lenger ned i Widget-treet. Den er også fleksibel og lar utvikleren definere unntakstilfeller eller legge til ekstra farger som ikke er definert i det opprinnelige fargesystemet.
Og.. sånn ser forresten den virkelige Vy appen ut, med Fluttermagi ved siden av:
Jeg ønsker å avslutte med et bilde av Flutter maskotten Dash som takker for seg og gleder seg til at du skal prøve Flutter rammeverket på egen hånd. Faktisk så kan du lage din egen Dash Avatar her.
