Introduction rapide à Flutter.

Il y a quelques semaines, je recherchais un moyen d’écrire une application pour Smartphones, compatible avec iOS et Android, pour complémenter mon nouveau site.

J’ai lu beaucoup sur ReactNative (Facebook) et Xamarin (Microsoft) et soudainement, poursuivant ma recherche, je suis tombé sur un tout nouveau framework d’interface mobile, écrit par Google, appelé Flutter.

Que propose Flutter aux développeurs?

Flutter offre un moyen de créer des applications pour iOS et Android à la fois, en utilisant le même code.

Flutter utilise un langage de programmation compilé, appelé Dart, qui est compilé “ahead of time” (AOT) en code natif pour iOS et Android.

Flutter fournit des vues réactives sans avoir besoin d’un bridge Javascript pour communiquer avec la plateforme.

Les principaux blocs de construction de Flutter sont les Widgets. Ils sont fortement inspirés par la syntaxe JSX de React, ce qui permet aux développeurs natifs d’aborder facilement Flutter.

Flutter fournit une vaste gamme de composants inspirés de Material Design, prêts à être utilisés dans des applications:

  • Structure d’Application et navigation: Scaffold, Appbar, BottomNavigationBar, TabBar, TabBarView, Drawer
  • Buttons: RaisedButton, FloatingActionButton, FlatButton, IconButton, PopupMenuButton, ButtonBar
  • Input et Sélection: TextField, Checkbox, Radio, Switch, Slider, Date & Time Pickers, FormField, Form
  • Dialogues, alertes et panneaux: SimpleDialog, AlertDialog, BottomSheet, ExpansionPanel, SnackBar
  • Information displays: Image, Icon, Chip, Tooltip, DataTable, Card, LinearProgressIndicator, GridView
  • Layout: ListTile, Stepper, Divider
  • Basic: Container, Row, Column, Text, RichText
  • Support des Canvas
  • Cupertino (iOS -style): ActivityIndicator, AlertDialog, Button, Dialog, DialogAction, Slider, Switch, Picker, PageTransition, FullscreenDialogTransition, NavigationBar, TabBar, PageScaffold, TabScaffold, TabView
  • Layout: Container, Padding, Center, Align, FittedBox, AspectRatio, ConstrainedBox, Baseline, FractionallySizedBox, SizedBox, OverfloxBox, Transform, Stack, GridView, Flow, Table, Wrap, ListBody, ListView…
  • Animation: AnimatedContainer, AnimatedCrossFade, Hero, DecoratedBoxTransition, FadeTransition, PositionedTransition, RotationTransition, ScaleTransition, SizeTransition, AnimatedOpacity…
  • Interaction: Draggable, LongPressDraggable, GestureDetector, DragTarget, Dismissible, IgnorePointer, AbsortPointer, Scrollable
  • Routing: Hero, Navigator
  • Styling: Theme, MediaQuery
  • Painting and Effect: Opacity, Transform, DecoratedBox, FractionalTranslation, RotatedBox, ClipOval, ClipPath, ClipRect, CustomPaint, BackdropFilter
  • Async: FutureBuilder, StreamBuilder
  • Scrolling
  • Accessibility

Pas mal, non ?

Flutter est open-source. En d’autres termes, vous pouvez apprendre directement du code original.

Flutter est-il difficile à apprendre?

Au moment d’écrire cet article, Flutter est toujours en version Beta-2 (version 0.2.8). Cela signifie que les changements sont fréquents, ce qui casse parfois du code qui avait l’habitude de fonctionner.

Cependant, Flutter est livré avec des outils pour aider à diagnostiquer le code source qui nécessite des changements, en raison d’une version plus récente du langage.

Afin de répondre à la question “Est-ce que Flutter est difficile à apprendre?“, Je dirai: NON ce n’est pas si difficile. Après quelques jours, j’ai pu construire le squelette de mon application qui interagit avec mon serveur Web sans trop de problèmes.

La documentation est vaste et plutôt bien écrite. Si j’éprouve des difficultés à comprendre la documentation, je me réfère souvent à l’application fournie en exemple, appelée Gallery, qui implémente beaucoup de fonctionnalités. Le code source est vraiment très clair.

Dart - Langage OOP

Flutter utilise Dart (version 2) comme langage de programmation.

La documentation dit que Dart est clair et concis, rapide et fournit une solution de compilation optimisée pour obtenir des performances élevées et un démarrage rapide sur des appareils mobiles ainsi que le Web. Il se compile en code ARM et x86, de sorte que Dart Mobile Apps peut fonctionner nativement sur iOS, Android et autres.

Dart est un language orienté objet et sa syntaxe est proche de C++, C#, Objective-C ou Java. Il supporte de garbage collector et la programmation asynchrone.

A première vue, Dart semble facile d’approche. Cependant, avec la version 2, la notion de Type a été renforcée, ce qui rend le code un peu plus complexe.

Dart est un langage de programmation mono thread. Pour éviter le gel d’exécution, Dart utilise des opérations asynchrones (notion de Future) pour laisser le programme s’exécuter sans se bloquer. Un Future est un moyen d’obtenir une valeur à un certain moment dans le futur (comparable à une Promise en Javascript).

IDE - Intégration avec des Editeurs de code

Flutter jouit d’une excellente intégration avec des éditeurs de code.

Personnellement, ma préférence va à Visual Studio Code et son extension Flutter officielle (accessible via VSCode Extension Marketplace). Cette extension transforme cet éditeur en un IDE très puissant pour créer, déboguer et exécuter l’application sur un périphérique physique ou un simulateur directement depuis l’éditeur.

Les autres éditeurs sont Android Studio ou IntelliJ. Android Studio est livré avec une énorme liste de différents simulateurs et offre une fonctionnalité très pratique (pas encore disponible avec VSCode): le Flutter Inspector qui permet d’inspecter les éléments des applications.

Les deux outils, offrent un Hot Reload qui actualise automatiquement et directement l’application dès que vous enregistrez les modifications que vous avez appliquées au code source. En d’autres termes, vous mettez à jour le code source, l’enregistrez et l’application est automatiquement actualisée avec les modifications que vous venez de faire !! Très pratique.

Pourquoi je crois en Flutter ?

Tout d’abord, parce qu’il est développé par Google. Deuxièmement, parce qu’un ancien directeur de programme de Visual Studio, nommé Tim Sneath, a rejoint Google pour travailler sur ce nouveau framework de développement d’applications mobiles. (Source)

Installation

10 à 20 minutes sont nécessaires pour une installation complète sur un ordinateur.

La procédure d’installation est très détaillée. Suivez-la et vous ne devriez rencontrer aucun problème.

Tutoriels

Bien sûr, lorsque vous commencez avec quelque chose de nouveau, de bons tutoriels sont très utiles.

Voici certains de ceux que j’avais l’habitude de regarder sur YouTube. Ils m’ont beaucoup aidé. Sachez cependant que certains de ces tutoriels ont été écrits avant la nouvelle intégration avec Dart v2. Certains exemples pourraient ne plus fonctionner.

Support

Jusqu’à présent, j’ai reçu beaucoup de soutien de la part de la communauté, en utilisant Stack Overflow.

Les gens sont très réactifs et très souvent de bon conseils.