Er bestaan verschillende frameworks om een app te ontwikkelen voor mobile devices, zoals Ionic Framework en Flutter. Flutter neemt steeds meer toe in populariteit en organisaties als Google Pay, Sonos en eBay hebben hiermee inmiddels apps ontwikkeld. Ook INDI, een van onze klanten, maakt gebruik van dit framework. Hier wordt Flutter ingezet als app voor klanten om gemakkelijk artikelen te scannen via QR-codes en deze opnieuw te bestellen. Voor mij was dit een mooie gelegenheid om mezelf verder in Flutter te verdiepen.
Wat is Flutter?
Flutter is een open-source framework of software development kit (SDK) ontwikkeld door Google. Het is een set tools om applicaties te ontwikkelen en je code te compileren in native machinecode voor Android en iOS.
Flutter transformeert het app-ontwikkelingsproces, voortaan bouw, test en implementeer je gemakkelijk mobile, web, desktop en embedded apps vanuit een enkele codebase.
Het idee achter Flutter is dat je Dart code schrijft die kan worden gecompileerd naar native code die draait op een device, bijvoorbeeld iOS of Android. Flutter versie 1.0 is geïntroduceerd in 2018 tijdens het Flutter Live event.
Je gebruikt Dart + het Flutter framework om user interfaces te bouwen die bestaan uit zogenaamde widgets. Flutter wordt geleverd met een stel voorgeconfigureerde widgets (knoppen, tabbladen, enz.) en je gebruikt deze meestal om vervolgens ook je eigen, meer complexe widgets te bouwen.
Waarom kiezen voor Flutter?
Hoewel het een nieuw open-source front-end framework is, kiezen steeds meer bedrijven voor Flutter. Er zijn meerdere redenen waarom ontwikkelteams voor Flutter kiezen zijn:
-
Verhoogde productiviteit:
Het gebruik van dezelfde codebase voor iOS en Android bespaart zowel tijd als middelen. De native widgets van Flutter minimaliseren ook de tijd die besteed wordt aan testen door ervoor te zorgen dat er weinig tot geen compatibiliteitsproblemen zijn met verschillende OS-versies.
-
Gemakkelijk:
Flutter stelt ontwikkelaars in staat om native mobiele applicaties te bouwen zonder toegang te hoeven hebben tot OEM-widgets of veel code te hoeven gebruiken. Dit maakt het creatieproces van mobile apps veel eenvoudiger.
-
Goede performance:
Gebruikers melden dat het moeilijk is om het verschil te merken tussen een Flutter app en een native mobiele app.
-
Kosteneffectief:
Het bouwen van iOS en Android apps met dezelfde codebase is in wezen het bouwen van twee apps voor de prijs van één.
-
Beschikbaar op verschillende IDE’s:
Ontwikkelaars zijn vrij om te kiezen tussen Android Studio en VS Code om hun code op Flutter te bewerken.
Architectuur
Flutter is ontworpen als een gelaagd, uitbreidbaar systeem. Het bestaat uit een aantal opeenvolgende bibliotheken, waarbij elk ervan afhankelijk is van de onderliggende laag.
Over het algemeen werken ontwikkelaars via het Flutter framework met behulp van Dart. Het bevat de lay-out, een uitgebreide reeks platforms en fundamentele bibliotheken die uit meerdere lagen bestaan.
Dart als fundament voor Flutter
Dart is de programmeertaal van Flutter, wat ook is ontwikkeld door Google. Dart is niet helemaal nieuw voor ilionx. In 2012 is Dart onthuld tijdens een GOTO conferentie in Aarhus, Denemarken door Lars Bak en Kasper Lund. En een jaar later werd Dart 1.0 gereleased. Om Dart bekend te maken bij de ontwikkelaars werd er een wereldwijde campagne Dart Flight School door Google georganiseerd.
En dat trok mijn aandacht. Ik heb contact gezocht met Google en Kasper Lund en in begin 2014 had ilionx een eigen Dart Flight School in het Aviodrome met als hoogtepunt een keynote speech van Kasper Lund in een echte Boeing 747, een ontzettend leuke ervaring!
Alles is een widget
Aan alle kanten draait Flutter om widgets. Widgets zijn de kerncomponenten van de Flutter-architectuur en de belangrijkste bouwstenen van de gebruikersinterface van een Flutter-app. Widgets worden gerenderd naar het Skia canvas, een grafische engine geschreven in C/C++ die de CPU of GPU opdracht geeft om de tekening op het apparaat te voltooien. Hier is een typisch Flutter voorbeeld.
class MyHomePage extends StatelessWidget {
MyHomePage({Key key, this.title}) : super(key: key);
// This widget is the home page of your application.
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(this.title),
),
body: Center(
child: Text('Hello World'),
),
);
}
}
Conclusie
In dit blog heb ik geprobeerd een duidelijk beeld te schetsen van het open-source framework Flutter. En we kunnen wel stellen dat er sinds mijn eerste kennismaking met Dart veel is veranderd. Ondanks dat ik heel graag werk met het Ionic Framework, is Flutter ook een zeer interessant front-end framework, en ik ben blij dat ik bij INDI meer over Flutter kan leren. In een volgende blog zal ik de verschillen en overeenkomsten tussen Flutter en Ionic uiteenzetten.
Flutter heeft een groot aantal positieve kanten, zoals herbuikbaarheid, de componenten library, en real-world usage. Tevens is Dart een moderne programmeertaal en is in principe eenvoudig te leren.
ilionx ziet Flutter als goede aanvulling op onze Tech Stack. En misschien gaan we wel een Flutter Flight School organiseren….
