Découverte de Flutter et du langage dart

Depuis 2009 je développe professionnellement, et j’ai même commencé par du développement mobile en objective C (1er application Lacoste sur Apple c’est bibi).

 

En 10 ans j’ai roulé ma bosse sur tout plein de techno comme Android, du Flex en AS3, du framework web avec toutes les versions de Symfony, jouer avec tout plein de base de données (relationnel, non relationnel, sous forme de graph, orienté temps réel etc), en ce moment je surfe sur la vague nodejs et React par exemple.

 

Hey ben croyez le ou pas mais j’ai eu un gros coups de cœur sur Flutter et dart.

 

Je voulais faire une petite application mobile pour faire le suivi des heures et des repas de ma nounou, histoire de pouvoir mettre sur un calendrier que le 22 elle a eu ma fille 4h et le 23 8h avec un repas. Puis faire quelque calcule pour m’aider à remplir la déclaration page emploi. Je voulais aussi que l’application serve à ma femme et moi même pour synchroniser et partager cette prise de notes. Je n’avais quasiment pas fait de veille sur ce framework ni sur sur le language. J’ai mis environ 2.5 jour pour la faire.

 

Je n’ai jamais vu un outil qui se prend aussi bien en main. La syntaxe dart me fait très penser à du JavaScript mais avec du typage, l’approche de pouvoir construire sa vue en utilisant une imbrication de composants m’a fait penser à React et la logique de layout à Android. L’installation de dépendance est super claire, ça marche bien.

 

Bon c’est bien gentil tout ça mais en pratique ça donne quoi ?

Une classe = une vue

 

Cette classe implemente au minimum une fonction ‘build’ qui retourne un objet de type Widget.

 

Cet objet peut contenir des sous objet ou non pour permettre de composer un écran.

 

Par exemples le Widget Column demande des sous objet de type Widget pour s’afficher (au moins un), par exemple on peut lui donner des objets Text. De cette manière on verra des textes qui s’affichent les uns sous les autres.

 

La classe principal possède un ensemble d’attribut dont une Map que l’on nomme state. Pour mettre à jour ce state on passe par une fonction. En faisant ça ça revient à re-invoquer la fonction build.

 

Du si vous ajoutez un objet Button a cet Column vous pouvez lui associer une fonction lors du clique. Cette fonction peut mettre à jour le state et donc changer l’affichage de l’écran. (Bon okay c’est très pompé sur React :))

 

Je vous mets le Hello World avec mes commentaire qui permet d’afficher une application avec un simple bouton qui fait +1 et un texte qui se met à jour.

 

J’ai rarement vu un code aussi simple à lire:

import 'package:flutter/material.dart';

// Voilà, là j'ai pensé "Putain, je refais du C"
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
// OK, je renvoi un sous object
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}

// On déclare que l'on va utilisé un widget ayant un "state", donc qui stocke de l'information et qui se re-affiche si le state est modifié. OK
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);

final String title;

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;

void _incrementCounter() {
// A chaque appel à setState, la vue se raffraichi en appelant "build"
setState(() {
_counter++;
});
}

@override
Widget build(BuildContext context) {
// Scaffold est un widget ayant une barre de navigation, un body, peut avoir un drawer aussi etc
return Scaffold(
appBar: AppBar(
title: Text(widget.title), // widget fait référence ici à l'object MyHomePage
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}

Et toi t’en penses quoi ?

About: Oni

Développeur depuis maintenant plus de 10 ans, j'ai tenu plusieurs blogs techniques (pour moi, pour les sociétés qui m'employait), et comme je le faisait en mode "side project", rien n’avançait vraiment. Je suis maintenant Freelance, et j'ai enfin la liberté d'organiser mon temps comme je le souhaite, du coup j'en rouvre un. PS: Voici mon CV ;p


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.