Waarom wij mobiele apps met Flutter bouwen

5 min readFeb 21, 2020

Wij zijn Defigners; een design en development agency in Utrecht. We staan voornamelijk bekend om ons UX en branding werk, maar we hebben ook een sterk development team! Logisch dat dit minder naar voren komt, want als gebruiker zie je altijd het mooie plaatje, in plaats van (de net zo mooie) code. Om dit iets meer uit te lichten hebben we een stuk geschreven over ons proces op het gebied van mobiele apps development.

Hoe wij mobiele apps bouwen?

Om snel antwoord op deze vraag te geven: met Flutter! Hoe we bij dit open-source platform beland zijn is een lange reis geweest. We zijn op zoek gegaan naar de perfecte balans tussen kwaliteit en efficiëntie voor development.

Wat is Flutter

Flutter is een cross-platform UI development toolkit om native apps mee te bouwen. Flutter is open source en wordt beheerd door Google. Het doel van Flutter is om een UI kit te bouwen dat compleet onafhankelijk is van het platform. Dit betekend dat je met één codebase een app kan bouwen voor mobiel, web, desktop en zelfs voor IOT apparaten zoals smartwatches en smart displays.

Flutter is stabiel en “production ready” voor het ontwikkelen van apps voor Android en iOS. Er wordt momenteel nog hard gewerkt om ook web en desktop uit de beta fase te halen.

Hoe wij Flutter hebben gevonden

Onze developers zijn van “nature” native developers. Dat betekend dat we voor iOS in Swift ontwikkelen en voor Android met Java of Kotlin. Wij waren (en zijn nog steeds) fan van native development. Een aantal jaar geleden was het, wat ons betreft, de enige keuze om goede apps te bouwen.

Steeds vaker kregen we van klanten te horen dat zij geen budget hebben om twee apps te bouwen (iOS en Android) en te onderhouden. Wij denken graag mee met de klanten, dus hebben we onderzoek gedaan naar cross-platform development tools.

React Native

We zijn begonnen met het populaire React Native platform. Dit was een logische keuze, want we hadden al een aantal jaar ervaring met het ontwikkelen in React. React is een JavaScript framework ontwikkeld door Facebook. Je kunt het zo bekijken: wat React Native is voor mobiele apps, is React voor web-development.

Initieel waren we erg tevreden. We konden snel de basis van een app opzetten. We hebben vervolgens besloten deze technologie te gebruiken voor een aantal projecten. Zodra de projecten complexer werden — meer functionaliteiten en meer integraties met hardware — begon de ellende. We kregen veel obscure errors en hadden problemen met ‘code packages’ (stukjes code geschreven door anderen). Deze waren niet goed onderhouden, waardoor onze apps bij elke update stuk gingen.

Ook waren er veel problemen om de app op iOS en Android hetzelfde te laten werken. Wat op iOS wél werkte, werkte op Android niet — en vice versa. De JavaScript code, die initieel bedoeld is voor het web, werd telkens omgezet naar ‘native’ code. Hierdoor waren de apps qua performance ook niet optimaal.

Liefde op de eerste regel code

Initieel was het een beetje eng om met Flutter te beginnen, een nieuw platform en geschreven in een programmeertaal van Google: Dart. Hier hadden we allemaal geen ervaring mee.

Nadat we een aantal tutorials en test appjes hadden gebouwd waren we verliefd. Onze angst voor werken met Dart was ongegrond, de taal is makkelijk te leren en lijkt veel op JavaScript.

Developer gemak

Het grote voordeel van Flutter is het developer gemak. Flutter heeft namelijk iets dat “hot reload” heet. Dit zorgt ervoor dat de gebruikersinterface (UI) van je app updatet wordt op het moment dat je code schrijft. Deze luxe hebben webdevelopers al langer, maar dit is een luxe die native mobile developers niet kennen. Voordat je bij native development veranderingen ziet, moet je eerst de app builden en opnieuw starten. Dit kan bij grote apps soms wel een minuut of langer kan duren.

Trouwens, React native claimde ook “hot reload” te hebben, maar in de praktijk werkte dit zelden.

Eigen Render-engine

Wat Flutter onderscheid van andere platformen is dat het zijn eigen “Render-engine” heeft. Dit betekend dat Flutter zelf alle UI tekent, dit in tegenstelling tot bijvoorbeeld React-native dat JavaScript vertaald naar “native” componenten op iOS en Android.

Het grote voordeel van het hebben van een eigen Render-engine, is dat Flutter hierdoor compleet onafhankelijk/ losgekoppeld is van het platform waar het op draait (iOS, Android, web, desktop, …). Zelf zorgt het voor het tekenen van alle UI elementen. Daarom wordt Flutter ook wel een UI-Toolkit genoemd.

Omdat Flutter zelf zorgt voor het tekenen van de UI, weten we zeker dat het op elk platform er hetzelfde uitziet. Er zijn dus geen problemen meer met verschillen tussen iOS en Android. Take that, React native!

Voor meer informatie over hoe Flutter werkt ga naar: https://flutter.dev/docs/resources/technical-overview

Projecten

Vanaf het moment dat we Flutter ontdekt hebben, zijn we alle projecten met deze technologie gaan ontwikkelen. We hebben zelfs één app, die we voorheen in React native hadden gemaakt, helemaal opnieuw ontwikkeld met Flutter. Hieronder een aantal projecten gemaakt met Flutter: