Les dé­ve­lop­peurs ren­contrent ré­gu­liè­re­ment le problème : depuis bien longtemps déjà, les pro­grammes dé­ve­lop­pés pour Windows ne suffisent plus ; aujourd’hui, pour s’imposer, les logiciels doivent pouvoir fonc­tion­ner sur des smart­phones Android, sous iOS et, mieux encore, dans un na­vi­ga­teur web.

Pour y arriver, il fallait jusqu’ici ajuster et compiler un nouveau code de pro­gram­ma­tion pour chacune de ces pla­te­formes. Dans de nombreux cas, il fallait même parfois procéder à des mo­di­fi­ca­tions de taille pour conférer à ses ap­pli­ca­tions des par­ti­cu­la­ri­tés propres à chaque système d’ex­ploi­ta­tion et re­pro­duire l’aspect et les fonc­tion­na­li­tés des in­ter­faces uti­li­sa­teurs usuelles. Flutter simplifie le dé­ve­lop­pe­ment mul­ti­pla­te­forme en mettant à dis­po­si­tion une base de code commune pour toutes les pla­te­formes.

Flutter, c’est quoi ?

Flutter est un framework de dé­ve­lop­pe­ment d’ap­pli­ca­tions mul­ti­pla­te­forme, conçu par Google, dont la première version a été publiée sous forme de projet open source à la fin de l’année 2018. Flutter met à dis­po­si­tion une grande variété de bi­blio­thèques d’éléments d’IU standard pour Android et iOS.

Il reste cependant aussi adapté au dé­ve­lop­pe­ment d’ap­pli­ca­tions web de bureau clas­siques. Les ap­pli­ca­tions dé­ve­lop­pées avec Flutter prennent l’aspect d’ap­pli­ca­tions typiques des systèmes cor­res­pon­dants et se com­por­tent également de manière similaire, sans que le pro­gram­meur, c’est-à-dire vous, n’ait besoin de prêter attention à ces ca­rac­té­ris­tiques.

Pourquoi utiliser Flutter ?

Flutter est prin­ci­pa­le­ment utilisé pour le dé­ve­lop­pe­ment d'ap­pli­ca­tions Android et iOS, sans né­ces­si­ter la création d’une base de code propre à chacun de ces deux systèmes si dif­fé­rents l’un de l’autre. De cette manière, les ap­pli­ca­tions de smart­phone se com­por­tent, sur les dif­fé­rents appareils, comme de réelles ap­pli­ca­tions natives.

Elles sont compilées pour chaque pla­te­forme avant leur pu­bli­ca­tion, de sorte qu’elles n’ont besoin ni d’un module runtime ni d’un na­vi­ga­teur. Sur cette base de code commune, il est également possible de créer des ap­pli­ca­tions web pour na­vi­ga­teur, ainsi que des pro­grammes natifs pour Windows, Linux et macOS.

Google utilise Flutter pour plusieurs modules de l’assistant Google et pour l’interface uti­li­sa­teur du Google Home Hub, entre autres. Cela dit, même des four­nis­seurs de commerce en ligne, tels qu’eBay, Groupon ou le groupe Alibaba, utilisent Flutter pour doter leurs ap­pli­ca­tions web et mobiles d’un look et de fonc­tion­na­li­tés uniformes.

Sur quel langage de pro­gram­ma­tion se base Flutter ?

Le Flutter SDK se base sur le langage de pro­gram­ma­tion Dart également développé par Google. Il se veut le suc­ces­seur moderne du langage Ja­vaS­cript classique et, tout comme ce dernier, il s’exécute di­rec­te­ment sur les na­vi­ga­teurs, sous forme d’ap­pli­ca­tion web. Les pro­grammes Dart peuvent aussi être exécutés di­rec­te­ment sur un serveur.

Dans le na­vi­ga­teur, ils sont employés avec le trans­com­pi­la­teur Dart2js dans Ja­vaS­cript. Les ap­pli­ca­tions de la nouvelle pla­te­forme Fuchsia de Google sont di­rec­te­ment dé­ve­lop­pées avec Dart, dont la structure s’apparente à celle de langages de pro­gram­ma­tion orientés objet tels que Java ou C#.

Conseil

Pour apprendre comment pro­gram­mer avec le langage développé par Google, consultez notre tutoriel complet de pro­gram­ma­tion avec Dart.

Tout est un widget : le principe de Flutter

La stratégie de Flutter « Tout est un widget » intègre de manière sys­té­ma­tique la pro­gram­ma­tion orientée objet jusque dans l’interface uti­li­sa­teur : l’interface d’un programme se compose de dif­fé­rents widgets pouvant être imbriqués les uns dans les autres. Chaque bouton et texte affiché est un widget. Ces widgets pré­sen­tent diverses ca­rac­té­ris­tiques mo­di­fiables. Ils peuvent s’in­fluen­cer les uns les autres et réagir à des mo­di­fi­ca­tions d’état ex­té­rieures grâce à des fonctions intégrées.

Des widgets sont fournis pour tous les éléments prin­ci­paux de l’interface uti­li­sa­teur. Ils sont conformes aux designs prescrits par Android et iOS, ainsi qu’à ceux des ap­pli­ca­tions web usuelles. Au besoin, des fonctions sup­plé­men­taires peuvent être ajoutées. Des widgets per­son­na­li­sés peuvent également être créés et fa­ci­le­ment combinés avec les widgets existants.

Par com­pa­rai­son avec les concepts d’autres SDK, les widgets offrent une flexi­bi­lité accrue. Cependant, dans la mesure où ils sont tous ancrés dans le code source du programme, ils sont fortement imbriqués, ce qui peut ra­pi­de­ment entraîner une certaine confusion.

Flutter : des exemples simples

Pour vous permettre de vous lancer ra­pi­de­ment dans l’uti­li­sa­tion de Flutter, ses dé­ve­lop­peurs ont publié de nombreux exemples pratiques. Très simple, le projet « Hello World » présente la structure fon­da­men­tale d’un programme à un widget et une fonction élé­men­taire void Main() de démarrage du programme.

// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import ‘package:Flutter/material.dart’;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
		return MaterialApp(
			title: ‘Welcome to Flutter’,
			home: Scaffold(
			appBar: AppBar(
				title: Text(‘Welcome to Flutter’),
			),
			body: Center(
				child: Text(‘Hello World’),
			),
	),
		);
	}
}

Sur un smart­phone ou dans la si­mu­la­tion pour smart­phone, le programme affiche, en haut de l’écran, la barre de titre « Welcome to Flutter » de l’élément AppBar() du widget. En dessous, le texte « Hello World » est affiché au centre de l’écran, sur la surface libre désignée par le terme body dans Flutter.

Image: Application simple « Hello World » avec Flutter
Un simple programme « Hello World » dans Flutter.

Des exemples in­te­rac­tifs pré­sen­tent, di­rec­te­ment dans le na­vi­ga­teur, des ap­pli­ca­tions Flutter et le code source Dart utilisé. À partir de là, il est possible de modifier le code source in­te­rac­tif et d’observer le résultat dans l’ap­pli­ca­tion.

Image: Exemple Flutter dans le navigateur
Pro­grammes de dé­mons­tra­tion faciles de Flutter dans un na­vi­ga­teur

La galerie Flutter présente, grâce à plusieurs exemples d’ap­pli­ca­tions, l’uti­li­sa­tion de plusieurs types de widgets standard. Comme c’est le cas pour tous les projets open source, les ca­té­go­ries d’éléments des in­ter­faces uti­li­sa­teurs ne re­pren­nent pas les noms de marque Android et iOS et sont nommées, res­pec­ti­ve­ment, « Material » (selon le langage de design de Google) et « Cupertino » (du nom du siège de l’en­tre­prise Apple).

Image: Galerie Flutter : vue d’ensemble
Galerie Flutter avec exemples pour l’uti­li­sa­tion d’éléments d’IU
Conseil

Sur GitHub, l’équipe de Flutter regroupe de nom­breuses ap­pli­ca­tions de dé­ve­lop­peurs, ainsi que des tutoriels visant à faciliter l’ap­pren­tis­sage de la pro­gram­ma­tion avec Flutter.

De quoi a-t-on besoin pour pro­gram­mer avec Flutter ?

Toutes les bi­blio­thèques et tous les outils de ligne de commande es­sen­tiels au dé­ve­lop­pe­ment de logiciels avec Flutter sont intégrés au Flutter SDK, dis­po­nible au té­lé­char­ge­ment gratuit sur le site officiel flutter.dev. Le SDK (kit de dé­ve­lop­pe­ment logiciel) ne comprend pas d’IDE graphique propre.

Cependant, vous pouvez utiliser l’éditeur de texte de votre choix pour écrire votre code source. Google re­com­mande l’ins­tal­la­tion d’Android Studio pour une ex­pé­rience de pro­gram­ma­tion plus con­vi­viale. Flutter comprend des plugins adaptés pour Android Studio en vue de l’in­té­gra­tion facile de bi­blio­thèques et de la co­lo­ra­tion syn­taxique au­to­ma­tique au sein de l’éditeur. Il existe également des plugins com­pa­rables pour l’éditeur de code Visual Studio de l’en­vi­ron­ne­ment de dé­ve­lop­pe­ment de Microsoft.

Note

Pour plus d’in­for­ma­tions sur l’ins­tal­la­tion et la pro­gram­ma­tion avec Flutter, consultez notre tutoriel Flutter pour débutants.

Avantages et in­con­vé­nients de Flutter

Chaque SDK et chaque langage de pro­gram­ma­tion a ses avantages et ses in­con­vé­nients. D’une manière générale, on pourrait dire que les avantages de Flutter le dé­mar­quent clai­re­ment d’autres systèmes si­mi­laires.

Avantages de Flutter

  • Base de code unique pour toutes les pla­te­formes cibles majeures
  • Dart, un langage de pro­gram­ma­tion d’ap­pren­tis­sage facile pour les débutants
  • Concept « Tout est un widget » offrant de nom­breuses op­por­tu­ni­tés
  • Exécution per­for­mante d’ap­pli­ca­tions natives sur smart­phones
  • Accès à des bi­blio­thèques complètes d’éléments d’IU préconçus
  • Im­plé­men­ta­tion facile de flux de données pour la mise à jour continue des uti­li­sa­teurs
  • Re­char­ge­ment à chaud (« Hot Reload ») pour l’ac­cé­lé­ra­tion des tests durant la phase de dé­ve­lop­pe­ment.

In­con­vé­nients de Flutter

  • Code de pro­gram­ma­tion confus en raison de l’in­té­gra­tion des widgets
  • Nécessité de mise à jour des modules Flutter lors de la mise à jour des designs des dif­fé­rents systèmes d’ex­ploi­ta­tion. Re­com­pi­la­tion et réins­tal­la­tion des modules sur les appareils, car ils sont intégrés au programme de manière fixe.
  • Langage récent et peu répandu ; com­mu­nauté encore réduite.
Aller au menu principal