tech deep dive.
Betere cross-platform apps ontwikkelen met Flutter
De gebruikerservaring van je app verschilt per platform? Dat wil je niet.
Gebruikers van mobiele applicaties verwachten dat ze snel te gebruiken zijn, vloeiend presteren en dat de user interface intuïtief is en er goed uitziet. Om dit te bereiken worden normaliter native-applicaties ontwikkeld waarbij de tools van het specifieke platform worden ingezet.
Hierdoor zie je regelmatig dat de applicaties op de verschillende platforms niet tegelijkertijd nieuwe functies krijgen en de ontwikkeling en codebase ervan uit elkaar loopt.
Beter cross-platform ontwikkelen met Flutter
Om dit probleem vroeg in het ontwikkelproces op te lossen kan je een cross-platform framework inzetten. Met zo’n framework is het mogelijk om met een enkele codebase applicaties te ontwikkelen voor meerdere platforms.
Bij Whyellow kiezen we voor Flutter. Flutter is het UI-framework van Google en biedt onze ontwikkelaars de mogelijkheid snel en uniform native applicaties te ontwikkelen voor zowel Android als iOS.
Met Flutter is het mogelijk om een idee snel om te kunnen zetten in een applicatie die op verschillende platforms op exact dezelfde manier werkt. Doordat Flutter werkt op de onderliggende Skia Rendering Engine worden interfaces en animaties overal vloeiend weergegeven. Deze rendering engine wordt onder andere ook gebruikt door Google Chrome en Firefox.
Met widgets snel een UI opzetten
Een Flutter applicatie wordt geschreven in de programmeertaal Dart en werkt zeer efficiënt. Deze taal biedt de mogelijkheid om gemakkelijk animaties en widgets toe te voegen aan een applicatie. Widgets zijn – wat in andere frameworks bekend staat als componenten – herbruikbare onderdelen waarmee een gelaagde applicatie wordt opgebouwd.
Alles binnen Flutter is een widget. Het zijn de zogenoemde bouwstenen van de gebruikersinterface (UI) van een Flutter app. Een widget kan je zien als een blauwdruk die vertelt hoe de applicatie er uit moet zien. Flutter gebruikt deze blauwdrukken om op de achtergrond de elementen voor de UI op te zetten. De selectie en volgorde van de widgets bepalen de UI van de app.
Stateful widgets voor een supersnelle UX
Widgets zijn te verdelen in twee subclasses: stateless en stateful.
Widgets die niet kunnen veranderen worden stateless widgets genoemd. Dit zijn onder andere iconen en en statische teksten.
Stateful widgets bevatten dynamische elementen die veranderen na interactie van de gebruiker of na het ontvangen van nieuwe data. Dit zijn bijvoorbeeld checkboxes, sliders en formulieren. De status van een widget wordt opgeslagen in een state object. Dit houdt de state van een widget gescheiden van zijn uiterlijk.
Wanneer de state van een widget veranderd wordt er gekeken naar het verschil met de vorige state en worden de minimale veranderingen bepaald die nodig zijn in de onderliggende render tree om naar die state toe te gaan. Hierna hertekent Flutter zijn UI met 60 fps (frames per second).
En dat is fijn voor de gebruiker, omdat hij dan snel kan doen wat hij wil doen in zijn app (formulier invullen, checkboxes aan- en uitzetten, swipen, etc.).
Zorg voor solide code
Het gebruik van Flutter voor het maken van apps bevalt ons goed. Je hebt een code base voor zowel IOS, Android als Web en je code is modulair opgebouwd. Flutter biedt veel voordelen, maar het feit dat de hardware niet direct aangesproken wordt is wel een nadeel. Hierdoor ben je afhankelijk van packages van een derde partij. Tip (maar eigenlijk zou dit altijd je uitgangspunt moeten zijn): zorg dat je je code solide bouwt, zodat je het overzicht bewaart en goed om kan gaan met toekomstige veranderingen.
Deze blog is geschreven door Britt van der Knaap, Full-stack developer bij Whyellow. Kennis over mobile development doet ze op en deelt ze actief met collega’s in onze Mobile-Circle.
