# Commencer le développement d'applications mobiles avec Flutter
Pendant quelques temps, j'aimais bien développer mes applications mobiles avec Ionic. J'ai même fait des formations et des talks autour d'Ionic. J'ai aussi testé NativeScript et React Native pour voir ce que je pouvais faire avec et si ces frameworks me plaisaient. Ces technos pourraient être le sujet d'un futur post si j'y pense.
Il y a quelques temps, on m'a proposé de participer à un codelab sur Flutter en me rappelant que j'aimais bien développé pour mobile.
J'avoue qu'au début, j'étais un peu réticente pour avoir déjà tenté une première installation sur ma machine avec Android Studio et Flutter. Car je trouvais que tout cet environnement était très gourmand en place (surtout Android Studio).
# Qu'est-ce que Flutter?
Flutter est un framework développé par Google permettant de développer des applications multiplateformes pour Android et iOS.
D'autres frameworks avant Flutter proposait aussi de faire du développement d'applications multiplateformes. On avait le choix avec Ionic où l'on développait une application web packagée en application mobile, React Native ou Native Script où l'on développait une application qui utilisait un bridge pour échanger entre le mobile et l'utilisateur. C'était un bon début mais en utilisant l'un ou l'autre des frameworks, on n'avait pas le look and feel de l'os mobile utilisé, car c'est un développement Web.
Si on voulait avoir le bon look and feel, il fallait faire le développement de l'application en natif et l'on perdait tous les avantages de faire du développement multiplateforme avec un seul framework.
La différence avec Flutter est qu'il permet de développer des applications natives multiplateformes.
# Installation
Lorsqu'on veut faire du développement avec Flutter, on a quelques éléments à installer tel que Flutter ou Android Studio (pour développer ou télécharger le SDK Android et les emulateurs) ou encore xCode pour ceux développent sur Mac pour iOS.
Si vous êtes root sur votre machine, tout se déroule sans accroc. Mais voilà, je ne le suis pas sur ma machine de développement. Or je voulais avoir accès au SDK Android pour pouvoir tester mon application sur mon téléphone. Heureusement, sur ma machine de développement, j'ai quand même pu installer une version de brew. Après avoir dézippé la librairie Flutter, j'ai poursuivi par l'installation de Android Studio. Si vous voulez vous aussi le faire, je vous mets une petite explication sur comment j'ai réussi à le faire.
brew tap homebrew/cask
brew cask install android-studio
Au moment où vous devez saisir le mot de passe de votre compte utilisateur, vous allez dans le Finder dans le répertoire
~/[repertoire_brew]/Caskroom/
et vous copiez/coller le répertoire
Android Studio
dans un répertoire auquel vous aurez accès plus tard. Après vous pouvez saisir le mot de passe qui provoquera surement une erreur si vous n'êtes pas root de votre machine pour effectuer le déplacement du répertoire Android Studio -> Applications. Android Studio est maintenant disponible, vous le lancez et vous pouvez télécharger le SDK Android qui vous intéresse ainsi qu'un émulateur, vous pouvez aussi télécharger le plugin Flutter pour pouvoir développer des applications Flutter avec Android Studio (ou vous pouvez aussi le faire depuis Visual Studio Code).
# Premier code Dart
L'environnement est maintenant prêt, il ne me reste plus qu'à créer mon premier projet Flutter. Et là c'est très facile, vous créez un nouveau projet Flutter et vous pouvez lancer le déploiement de votre application en utilisant la commande
flutter run
Et l'application se déploiera soit dans un émulateur, soit sur votre téléphone si vous l'avez connecté à votre ordinateur et configuré en mode développeur.
Le code Dart d'une application Flutter est vraiment assez simple.
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
// This is the theme of your application.
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
),
);
}
}
# Codelab
Le sujet du codelab tourne autour de l'espace et d'une liste de galaxies. Ce codelab a été préparé pour une présentation lors du Devfest de Nantes le 19 octobre 2018.
Le codelab était vraiment très intéressant et progressif comme toujours (merci Horacio). Si vous avez l'occasion de le faire et que vous êtes intéressé par Flutter, n'hésitez pas, vous passerez un bon moment de code.
La suite... je pense que je vais refaire une application que j'avais fait avec Ionic pour voir ce que ça donne avec une vrai application.