Flutter 

Florent Champigny Florent37 florent_champ http://bit.ly/AndroidDevFr Slack : Android Dev FR 

No content

Flutter Découverte Design Affichage de listes Interaction avec webservice Appel à du code natif android 

Découvrez Flutter 

Découvrez Flutter https://github.com/flutter Fuschia 

Découvrez Flutter https://github.com/flutter VS Code Android Studio Vim… 

Découvrez Flutter https://flutter.dev/ • Design beautiful apps • Productively build apps • Create faster apps (60fps) • Publish mobile, web, & desktop apps 

Android iOS Mac Linux Windows Web (beta) 

Skia 

+ Flare 

La puissance de Flutter Produire une application rapidement 

Declarative Tree no more View (xml, xib) / Controller Reactive programming Dart 2.0 interpreted on debug, compiled on release Flutter Hot reload 

Flutter Twitter on Android 

Design avec Flutter 

TweetView #atomicDesign 

TweetLabels TweetLink TweetButtons Text Image TweetView #atomicDesign 

TweetLabels TweetLink TweetButtons Text Image Column TweetView #atomicDesign 

TweetLabels TweetLink TweetButtons Text Image Row TweetView #atomicDesign 

TweetLabels TweetLink TweetButtons Text Image Column TweetView #atomicDesign 

No content

class TweetLabels extends StatelessWidget { @override Widget build(BuildContext context) { return Row( children: [ Text( "La plume du figaro" ), SizedBox(width: 6), //spacing Text( "@FigaroPlume" ), SizedBox(width: 6), //spacing Text( "27 mins" ), ], ); } } 

Text( "La plume du figaro", style: TextStyle( color: Colors.black, fontWeight: FontWeight.w700, fontSize: 16, ), ), SizedBox(width: 6), //spacing Text( "@FigaroPlume", style: TextStyle( color: Colors.grey, fontWeight: FontWeight.w400, fontSize: 14, ), ), SizedBox(width: 6), //spacing Text( "27 mins", style: TextStyle( color: Colors.grey, fontWeight: FontWeight.w600, fontSize: 14, ), ), 

TweetLabels( accountName: "La plume du figaro", accountPseudo: "@FigaroPlume", tweetTime: "27 mins", ) What we want #atomicDesign 

class TweetLabels extends StatelessWidget { String accountName; String accountPseudo; String tweetTime; TweetLabels({Key key, this.accountName, this.accountPseudo, this.tweetTime}) : super(key: key); @override Widget build(BuildContext context) { return Row( children: ... ); } } StatelessWidgets : updated when re-created StatefullWidget : can be updated with a setState method 

Row( children: [ Text( this.accountName, //"La plume du figaro", maxLines: 1, style: … ), SizedBox(width: 6), Flexible( child: Text( this.accountPseudo, //"@FigaroPlume", maxLines: 1, overflow: TextOverflow.ellipsis, style: … ), ), SizedBox(width: 6), Text( this.tweetTime, //"27 mins", style: … ), ], ); 

TweetLabels( accountName: "La plume du figaro", accountPseudo: "@FigaroPlume", tweetTime: "27 mins", ) What we want #atomicDesign 

Interaction utilisateur avec Flutter 

No content

class TweetButtons extends StatelessWidget { @override Widget build(BuildContext context) { return Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Image.asset("assets/twitter-icons/twitter-reply-outline.png"), SizedBox(width: 4), //margin Text("1") ], ); } } 

No content

Les développeurs mobile 

Les développeurs web F5 

return Row( children: [ Expanded( flex: 1, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Image.asset("assets/twitter-icons/twitter-reply-outline.png"), SizedBox(width: 4), Text("1") ])), Expanded( flex: 1, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Image.asset("assets/twitter-icons/twitter-retweet.png"), SizedBox(width: 4), Text("1") ])), Expanded( flex: 1, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Image.asset("assets/twitter-icons/twitter-like-outline.png"), SizedBox(width: 4), Text("1") ])), Expanded( flex: 1, child: Image.asset("assets/twitter-icons/twitter-share.png"), ) ]); Expanded( flex: 1, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Image.asset("assets/twitter-icons/twitter-reply-outline.png"), SizedBox(width: 4), Text("1") ])) Expanded( flex: 1, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Image.asset("assets/twitter-icons/twitter-reply-outline.png"), SizedBox(width: 4), Text("1") ])) 

Expanded( flex: 1, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Image.asset("assets/twitter-icons/twitter-reply-outline.png"), SizedBox(width: 4), Text("1") ])) 

Expanded( flex: 1, child: GestureDetector( onTap: () { //clicked }, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Image.asset("assets/twitter-icons/twitter-reply-outline.png"), SizedBox(width: 4), Text("1") ]), )) 

TweetButtons( commentClicked: ( ) { //called when user clicks }, ) What we want #atomicDesign 

class TweetButtons extends StatelessWidget { TweetButtons({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Row( children: [ Expanded( flex: 1, child: GestureDetector( onTap: () { /* click happened */ }, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Image.asset("assets/twitter-icons/twitter-reply-outline.png"), SizedBox(width: 4), Text("1") ], ), 

class TweetButtons extends StatelessWidget { Function commentClicked; TweetButtons({Key key, this.commentClicked}) : super(key: key); @override Widget build(BuildContext context) { return Row( children: [ Expanded( flex: 1, child: GestureDetector( onTap: commentClicked, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Image.asset("assets/twitter-icons/twitter-reply-outline.png"), SizedBox(width: 4), Text("1") ], ), 

TweetButtons( commentClicked: () { //called when user clicks }, ) #atomicDesign 

TweetButtons( commentClicked: () { }, likeClicked: () { }, retweetClicked: () { }, shareClicked: () { }, ) #atomicDesign 

Afficher des listes avec Flutter 

Afficher des listes avec Flutter Android ViewHolder Adapter RecyclerView LinearLayoutManager Recycled views Listeners for Click 

Afficher des listes avec Flutter Widgets ListView 

void main() => runApp(MyApp()); class MyApp extends StatelessWidget { Tweet tweet1 = Tweet(…); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Twitter', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( body: TweetView(tweet: tweet1) ), ); } } 

void main() => runApp(MyApp()); class MyApp extends StatelessWidget { Tweet tweet1 = Tweet(…); Tweet tweet2 = Tweet(…); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Twitter', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( body: ListView(children: [ TweetView(tweet: tweet1), TweetView(tweet: tweet2), ] ), ); } } 

void main() => runApp(MyApp()); class MyApp extends StatelessWidget { List tweets = […]; @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Twitter', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( body: ListView(children: tweets .map( (t) => TweetView(tweet: t) ) .toList() ), ); } } 

Appel réseau avec Flutter 

Appel réseau avec Flutter Afficher une image depuis une url 

Afficher une image depuis une url 

"http://lorempixel.com/800/800/" Afficher une image depuis une url 

Image.network( "http://lorempixel.com/800/800/", fit: BoxFit.cover, height: 140, ) Afficher une image depuis une url 

Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Image.network( "http://lorempixel.com/800/800/", fit: BoxFit.cover, height: 140, ), ... ) Afficher une image depuis une url 

Appel réseau avec Flutter Télécharger et parser du json 

dependencies: http: ^0.12.0+1 json_annotation: ^2.0.0 dev_dependencies: json_serializable: ^2.0.0 build_runner: ^1.0.0 pubspecs.yaml https://pub.dev/packages/ Flutter Télécharger et parser du json 

https://pub.dev/packages/ 

GET https://api.tweeter.com/myTweets Télécharger et parser du json [ { "tweet": "Ces mots qu'on utilise mal sans le savoir", "id": 1001, "author" : { "imageUrl": "http://lorempixel.com/400/400/", "name": "La plume du figaro", "pseudo" "@FigaroPlume" }, "link" : { "imageUrl": "http://lorempixel.com/800/800/", "description": "Ces mots qu'on utilise mal sans le savoir", "website": "lefigaro.fr" }, "comments": 1, "retweets": 0, "likes": 0 } ] 

class Tweet { int id; String text; Author author; Link link; int comments; int retweets; int likes; } class Author { String imageUrl; String name; String pseudo; } class Link { String imageUrl; String description; String website; } Télécharger et parser du json 

class Tweet { int id; String text; Author author; Link link; int comments; int retweets; int likes; } Télécharger et parser du json 

class Tweet { int id; String text; Author author; Link link; int comments; int retweets; int likes; Tweet({this.id, this.text, this.author, this.link, this.comments, this.retweets, this.likes}); } Télécharger et parser du json 

import 'package:json_annotation/json_annotation.dart'; @JsonSerializable() class Tweet { int id; String text; Author author; Link link; int comments; int retweets; int likes; Tweet({this.id, this.text, this.author, this.link, this.comments, this.retweets, this.likes}); } 

import 'package:json_annotation/json_annotation.dart'; part 'Tweet.g.dart'; @JsonSerializable() class Tweet { int id; @JsonKey(name: "tweet") String text; Author author; Link link; int comments; int retweets; int likes; Tweet({this.id, this.text, this.author, this.link, this.comments, this.retweets, this.likes}); factory Tweet.fromJson(Map json) => _$TweetFromJson(json); Map toJson() => _$TweetToJson(this); } 

>_ flutter packages pub run build_runner build Generates all *.g.dart Télécharger et parser du json 

GET https://api.tweeter.com/myTweets Télécharger et parser du json [ { "tweet": "Ces mots qu'on utilise mal sans le savoir", "id": 1001, "author" : { "imageUrl": "http://lorempixel.com/400/400/", "name": "La plume du figaro", "pseudo" "@FigaroPlume" }, "link" : { "imageUrl": "http://lorempixel.com/800/800/", "description": "Ces mots qu'on utilise mal sans le savoir", "website": "lefigaro.fr" }, "comments": 1, "retweets": 0, "likes": 0 } ] 

import 'dart:convert'; import 'package:http/http.dart' as http; import 'dart:async'; import 'models/Tweet.dart'; class Webservice { Future> myTweets() async { final response = await http.get( "https://api.tweeter.com/myTweets" ); if (response.statusCode == 200) { var jsonList = json.decode(response.body); return jsonList.map( (model) => Tweet.fromJson(model) ).toList(); } return null; } } 

class MyApp extends StatelessWidget { List tweets = [...]; @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Twitter', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( body: ListView(children: tweets.map( (t) => TweetView(tweet: t) ).toList() ); ), ); } } 

class MyApp extends StatelessWidget { Webservice webservice = Webservice(); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Twitter', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( body: FutureBuilder( future: webservice.myTweets(), builder: (context, snapshot) { if (snapshot.hasData) { List tweets = snapshot.data; return ListView(children: tweets.map( (t) => TweetView(tweet: t) ).toList() ); } else { return ProgressIndicator(); } }), 

Appel natif avec Flutter Appeler du code natif android 

A flutter project contains 3 directories - lib : for dart files - android : an android project - ios : an xcode project (with CocoaPods) Use Platform Channels to communicate between platforms Flutter Platform Channels can be opened from each platform - android -> Flutter - Flutter -> android - Flutter -> android 

Flutter -Flutter -> android import 'package:flutter/services.dart'; class ShareManager { MethodChannel _channel = MethodChannel('flutter.twitter/share'); void share(String link) async { try { await _channel.invokeMethod('share', link); } catch (e) { print(e); } } } On Flutter 

Flutter -Flutter -> android TweetButtons( shareClicked: () { ShareManager().share("http://twitter.com/${tweet.id}"); }, retweetClicked: () {}, likeClicked: () {}, commentClicked: () {}, ) On Flutter 

Flutter -Flutter -> android class MainActivity : FlutterActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) GeneratedPluginRegistrant.registerWith(this) //insert your code here } } /android/…/MainActivity.kt On android 

Flutter -Flutter -> android //insert your code here val shareChannel = MethodChannel(flutterView, "flutter.twitter/share") shareChannel.setMethodCallHandler { methodCall, result -> when (methodCall.method) { "share" -> { val url = methodCall.arguments as String startActivity( Intent.createChooser(Intent().apply { action = Intent.ACTION_SEND type = "text/plain" putExtra(Intent.EXTRA_TEXT, "Please open $url") }, "Share")) result.success(null) } } } On android 

Flutter -Flutter -> android 

Flutter -Flutter -> android 

Flutter Découverte Design Affichage de listes Interaction avec webservice Appel à du code natif android 

Flutter - go further RxDart Bloc (Pattern) Silvers in ListView Hummingbird 

THANKS ! Florent37 florent_champ Slack : Android Dev FR http://tinyurl.com/sunnyFlutter