Flutter est un framework, un ensemble d'outil pour développer des applications mobiles Android et iOS à partir d'un socle commun.
Flutter est développé par Google c'est donc une alternative sérieuse et crédible aux développements d'applications natives.
Le langage utilisé est Dart, une évolution de javascript qui utilise un typage fort.
Flutter reprend des concepts de React tout en les améliorant. Toute l'application est pensée en forme de Widget qui vont vivre et se rafraîchir de manière indépendante.
Les widgets : ils permettent de décrire simplement le rendu final. Chaque objet est défini indépendamment des contraintes parentes. C’est son emplacement dans le code qui permettra de définir ses contraintes extérieures. Cela permet de construire facilement son interface ; le code est alors plus facilement lisible et maintenable.
Les composants : ils ont été recréés par Google. Les développeurs disposent d’une galerie de composants s’adaptant à IOS comme Android, et aux différentes versions d’OS. Cependant une pléthore de composants hétéroclites conçus pour le même objectif ne rendent pas la tâche du développeur facile.
React Native est une solution multiplateforme lancée par Facebook en 2015, utilisant le Javascript et ayant vite fait ses preuves au sein de la communauté des développeurs. Aujourd’hui, son principal avantage face à Flutter est son ancienneté (facilité pour le développeur de trouver des bibliothèques ou du support). Néanmoins, Flutter rattrape bien son retard grâce à sa possibilité de personnaliser les éléments d’interface, et ses performances supérieures à son concurrent direct.
Xamarin est un framework de développement mobile multiplateforme utilisant le langage C# et le framework .NET. Il est fondé en 2011 (à la base appelé « Mono for Android » et « MonoTouch » pour iOS) et fût racheté en 2016 par Microsoft. Bien qu’il soit une alternative forte au développement d’applications natives, il reste tout de même nécessaire d’écrire des parties de code spécifiques à chaque plateforme. Aujourd’hui, les applications natives sont plutôt développées en Kotlin et Swift profitant des dernières optimisations alors que Xamarin base sa partie native sur les langages Java et Objective-C.
Flutter est plus accessible pour les développeurs et propose un tronc commun pour toute l’application, ce qui apporte un gain de temps substantiel.
Télécharger Flutter pour votre OS
https://flutter.dev/docs/get-started/install/windows
Installer le, comme indiqué dans la documentation (mettre à jour le path)
Utiliser Visual Studio Code, et installer les plugins Dart et Flutter
Avec Visual Studio Code lancer l'outil de diagnostic flutter doctor à partir du menu View, Command Palette
Effacer le programme et commencer par le programme HelloWorld
https://flutter.dev/docs/development/ui/widgets-intro
Mise en page des éléments
https://flutter.dev/docs/development/ui/layout
Concepts
https://flutter.dev/docs/get-started/codelab
Lecteur de QrCode https://pub.dev/packages/qrscan#-example-tab-
Consommation d'une API Web
Ajouter la libraire http dependencies: http: <latest_version>
https://inducesmile.com/google-flutter/how-to-populate-listview-with-json-api-data/
body: FutureBuilder<List
if (!snapshot.hasData) return Center(child: CircularProgressIndicator());
return ListView(
children: snapshot.data
.map((user) => ListTile(
title: Text(user.name),
subtitle: Text(user.email),
leading: CircleAvatar(
backgroundColor: Colors.red,
child: Text(user.name[0],
style: TextStyle(
fontSize: 18.0,
color: Colors.white,
)),
),
))
.toList(),
);
},
),
Tab bar
return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: DefaultTabController( length: 3, child: Scaffold( appBar: AppBar( bottom: TabBar( tabs: [ Tab(icon: Icon(Icons.directions_car)), Tab(icon: Icon(Icons.directions_transit)), Tab(icon: Icon(Icons.directions_bike)), ], ), title: Text(widget.title), ), body: TabBarView( children: [ Icon(Icons.directions_car), Icon(Icons.directions_transit), Icon(Icons.directions_bike), ], ), ), ), );
https://flutter.dev/docs/cookbook/navigation/passing-data
https://pusher.com/tutorials/flutter-user-input