Flutter: de UI Toolkit van de toekomst.

In een enquête afgenomen in 2019 kwam Flutter als derde uit als meest geliefde framework en UI Toolkit bij developers. Maar wat is Flutter? Naast de snelst groeiende skill onder software developers, is het de UI Toolkit van de toekomst.



Apps ontwikkelen: een droom of een nachtmerrie?

Voor elk bedrijf, elke hobby en elk mogelijk probleem bestaat er een app. Als Full Stack developer is het mijn job om dagelijks in de code te duiken voor al deze apps. En ook al hou ik van mijn job, soms is het ontwikkelen van een app een echte pain in the a**. Was ik even dankbaar toen ik Flutter tegenkwam.

In tijden voor Flutter had je als developer twee opties om alle mogelijke users te bedienen: ofwel twee codebases onderhouden (één voor Android en één voor iOS – laten we even het Windows-phone fiasco vergeten) wat dubbel zoveel werk en problemen meebracht, of uitwijken naar cross-platform oplossingen zoals Xamarin of React-Native, met ook elk hun eigen specifieke problemen

Met Flutter ontwikkel je apps voor Android, Fuchsia, iOS, Windows, Mac, Linux en het web. Eigenlijk voor alles. Heb je er nog nooit van gehoord? Geen paniek, je bent niet de enige. Deze volledig nieuwe UI Toolkit bestaat nog maar sinds 2015 als preview versie en de eerste stabiele release dateert uit december 2018.

Wat is Flutter?

Flutter werd ontwikkeld door developer-masterminds bij Google. Het is een framework door en voor developers. Al vanaf het begin draaide de ontwikkeling rond vier belangrijke punten:

  1. BEAUTIFUL
  2. FAST
  3. PRODUCTIVE
  4. OPEN

1. Beautiful

Flutter apps moesten en zouden er goed uitzien. Developers die zelf een app maken moeten snel en eenvoudig coole ontwerpen kunnen implementeren.

In Flutter is elke pixel onder de controle van de developer, doordat elk Widget volledig aanpasbaar is.

Heb je geen zin om je eigen design te implementeren? Dan levert Flutter out-of-the-box widgets aan in Android en iOS stijl om apps te bouwen met de vertrouwde native look.

2. Fast

Google doelt met “fast” op de prestaties van de apps. Programmeren in Flutter gebeurt in Dart, een single-threaded, asynchrone programmeertaal (voel je de slaap al opkomen? Dan ben je waarschijnlijk geen developer en is het toegestaan dit punt te skippen).

Dart is typed en behoudt tegelijk de flexibiliteit van bijvoorbeeld modern Javascript. Het is vlot lees- en schrijfbaar en voelt zeer natuurlijk aan.

Under the hood draait alles op de Flutter engine, geschreven in C++, die de interacties met de platform-specifieke SDK’s verzorgt.
Releaseversies van apps worden met Ahead-of-time (AOT) gecompileerd voor zowel Android als iOS. Dit zorgt voor een razend snelle uitvoering.

Daarnaast zorgt de Flutter engine voor low-level rendering via de Skia-graphics library van Google. Hierdoor kan Flutter tot 120 fps op het scherm toveren, wat resulteert in prachtige animaties die zonder lag getoond worden.

Heb je toch aan Dart alleen niet genoeg? Dan kan je via method channels overschakelen naar platformspecifieke code om delen van je app in native Java/Kotlin of C#/Swift te schrijven.

3. Productive

Een feature die Flutter zo leukt maakt om apps in te ontwikkelen, is Hot Reload / Restart. Gedaan met het wachten op het hercompileren van je app bij elke kleine wijziging.

Hot Reload injecteert veranderde code in de reeds draaiende app, wat ervoor zorgt dat een wijziging al na één seconde zichtbaar is op je toestel of emulator. Dit bespaart massa’s tijd en frustraties en maakt ontwikkeling in Flutter zoveel leuker.

De slagzin “Everything is a Widget” is ook helemaal waar: voor bijna alles is er een widget te vinden die met een paar regels code doet wat je in gedachten had. Is die widget er nog niet of doet hij toch niet helemaal wat je wenste? Dan pas je hem naar eigen voorkeur aan of stel je gewoon zelf een nieuwe samen uit de bestaande, low-level widgets.

4. Open

Flutter is gratis en volledig Open-Source. Iedereen kan je code nakijken en verbeteren. Dat wil ook zeggen dat er massaal veel packages zijn die door derden geschreven werden.

Ze dragen bij aan de nu al zeer grote verzameling van open-source code die rechtstreeks in je Flutter app geïmporteerd kan worden en ontwikkelen zoveel makkelijker maakt.

Voeg de naam en versie van het juiste package toe aan je yaml en via pub wordt alles op een paar seconden binnengehaald.

Handige tools

Beter een goede buur dan een verre vriend: de twee teams van Flutter en Dart (de programmeertaal) zitten letterlijk naast elkaar in de kantoren van Google. Ze hebben de laatste jaren Dart zo geëngineerd dat de taalnog beter samen past met Flutter. Dat merk je meteen in de taal en het framework.

Ook op vlak van tools is de UI Toolkit van de toekomst onklopbaar:

Google stond al heel sterk met de gratis IDE Android Studio (gebouwd op de nummer één van IDE’s; IntelliJ) en heeft de mogelijkheden voor Flutter uitgebreid met ondersteuning voor Visual Studio Code, een zeer sterk en gratis IDE gebouwd door Microsoft.Voor beide zijn er door het Flutter team zeer goede plugins geschreven die uitgebreide mogelijkheden geven voor debugging, code completion /intelliSense en formatting.

De Flutter Command Line Interface geeft een reeks commando’s om je projecten te initialiseren, code te genereren, packages binnen te halen met pub en je project te builden en runnen.Je voert de CLI commando’s uit vanuit de terminal in, maar er zitten ook interfaces van Android Studio en VS Code ingebakken. Voorlopig heeft Android Studio nog een paar features extra t.o.v. VS Code (geïntegreerde emulators in alle mogelijke Android versies, bijvoorbeeld), maar dat verschil wordt snel kleiner door de constante ontwikkelingen.

Waarom je Flutter moet gebruiken

Nog niet overtuigd? Laat je dan overhalen door enkele sterke argumenten en statistieken:

  • Data van LinkedIn toont aan dat Flutter de snelst groeiende skill is onder software developers. Dus, hop on that bandwagon!
  • Google zet zeer zwaar in op Flutter. Het zal dan ook het primaire framework worden om software in te schrijven voor hun nieuwe OS Fuchsia dat ergens in de loop van de komende jaren op de markt komt.
  • De grote teams die Google inzet voor Flutter, produceren massa’s documentatie, tutorials en instructies via hun YouTube kanaal en de Flutter Dev website. Een nieuwe UI Toolkit onder de knie krijgen was nog nooit zo eenvoudig!
  • Dart: deze flexibele, snelle en eenvoudige programmeertaal wordt meer en meer gebruikt en steeds verbeterd. Zoals je al weet, zitten de Flutter- en Dart-teams letterlijk naast elkaar in de kantoren van Google, waardoor ze onderling snel kunnen afstemmen.
  • Flutter heeft grote plannen: het framework wil uitbreiden naar Windows, Mac, Chromebooks, het web en zelfs embedded devices. Binnenkort draait er misschien Flutter op je ijskast, mixer of digitale bloempot.
  • In 2019 was Flutter het tweede meest gebruikte cross-platform mobile framework dat wereldwijd door software developers gebruikt werd. Daarmee steekt het, ondranks zijn zeer jonge leeftijd, nu al wijdverspreide frameworks zoals Xamarin, Ionic en Cordova voorbij.
  • React-Native staat op de eerste plaats, maar ziet Flutter naderen. Dat blijkt uit onderstaande grafiek die het aantal vragen op Stack Overflow over React-Native uitzet tegenover het aantal over Flutter voor de laatste jaren. In 2019 waren er al meer Flutter-vragen dan React-Native vragen.

Aan de slag met Flutter

Heb je na het lezen zin om zelf een app te maken met Flutter? Neem dan zeker een kijkje op hun website of YouTube kanaal. Ook op learning websites zoals Udemy vind je prachtige cursussen om snel zelf aan de slag te gaan.

Flutter is de toekomst!

Blijf op de hoogte

Schrijf je in voor de nieuwsbrief & ontvang alle nieuwste updates.

E-mailadres