Sunny_tech_flutter

Après Facebook et react-native, le géant google arrive enfin sur le marché des technos cross-plateforme avec son framework Flutter.

Venez découvrir comment créer très rapidement et facilement une application compatible avec Android et iOS avec un seul code source.

Ce talk sera porté sur la UI (représentation de l'écran en code Flutter) et ne comprendra pas de live coding mais une introduction et d'une explication pas à pas d'un exemple d'application, et sera fait de sorte qu'il soit compréhensible même pour des non-dev android

Transcript

1. Flutter
2. Florent Champigny Florent37 florent_champ http://bit.ly/AndroidDevFr Slack : Android Dev FR
4. Flutter Découverte Design Affichage de listes Interaction avec webservice Appel à du code natif android
5. Découvrez Flutter
6. Découvrez Flutter https://github.com/flutter Fuschia
7. Découvrez Flutter https://github.com/flutter VS Code Android Studio Vim…
8. Découvrez Flutter https://flutter.dev/ • Design beautiful apps • Productively build apps • Create faster apps (60fps) • Publish mobile, web, & desktop apps
9. Android iOS Mac Linux Windows Web (beta)
10. Skia
11. + Flare
12. La puissance de Flutter Produire une application rapidement
13. Declarative Tree no more View (xml, xib) / Controller Reactive programming Dart 2.0 interpreted on debug, compiled on release Flutter Hot reload
14. Flutter Twitter on Android
15. Design avec Flutter
16. TweetView #atomicDesign
17. TweetLabels TweetLink TweetButtons Text Image TweetView #atomicDesign
18. TweetLabels TweetLink TweetButtons Text Image Column TweetView #atomicDesign
19. TweetLabels TweetLink TweetButtons Text Image Row TweetView #atomicDesign
20. TweetLabels TweetLink TweetButtons Text Image Column TweetView #atomicDesign
22. 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" ), ], ); } }
23. 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, ), ),
24. TweetLabels( accountName: "La plume du figaro", accountPseudo: "@FigaroPlume", tweetTime: "27 mins", ) What we want #atomicDesign
25. 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
26. Row( children: <Widget>[ 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: … ), ], );
27. TweetLabels( accountName: "La plume du figaro", accountPseudo: "@FigaroPlume", tweetTime: "27 mins", ) What we want #atomicDesign
28. Interaction utilisateur avec Flutter
30. 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") ], ); } }
32. Les développeurs mobile
33. Les développeurs web F5
34. 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") ]))
35. Expanded( flex: 1, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Image.asset("assets/twitter-icons/twitter-reply-outline.png"), SizedBox(width: 4), Text("1") ]))
36. 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") ]), ))
37. TweetButtons( commentClicked: ( ) { //called when user clicks }, ) What we want #atomicDesign
38. class TweetButtons extends StatelessWidget { TweetButtons({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Row( children: <Widget>[ 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") ], ),
39. class TweetButtons extends StatelessWidget { Function commentClicked; TweetButtons({Key key, this.commentClicked}) : super(key: key); @override Widget build(BuildContext context) { return Row( children: <Widget>[ 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") ], ),
40. TweetButtons( commentClicked: () { //called when user clicks }, ) #atomicDesign
41. TweetButtons( commentClicked: () { }, likeClicked: () { }, retweetClicked: () { }, shareClicked: () { }, ) #atomicDesign
42. Afficher des listes avec Flutter
43. Afficher des listes avec Flutter Android ViewHolder Adapter RecyclerView LinearLayoutManager Recycled views Listeners for Click
44. Afficher des listes avec Flutter Widgets ListView
45. 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) ), ); } }
46. 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), ] ), ); } }
47. void main() => runApp(MyApp()); class MyApp extends StatelessWidget { List<Tweet> 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() ), ); } }
48. Appel réseau avec Flutter
49. Appel réseau avec Flutter Afficher une image depuis une url
50. Afficher une image depuis une url
51. "http://lorempixel.com/800/800/" Afficher une image depuis une url
52. Image.network( "http://lorempixel.com/800/800/", fit: BoxFit.cover, height: 140, ) Afficher une image depuis une url
53. Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Image.network( "http://lorempixel.com/800/800/", fit: BoxFit.cover, height: 140, ), ... ) Afficher une image depuis une url
54. Appel réseau avec Flutter Télécharger et parser du json
55. 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
56. https://pub.dev/packages/
57. 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 } ]
58. 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
59. class Tweet { int id; String text; Author author; Link link; int comments; int retweets; int likes; } Télécharger et parser du json
60. 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
61. 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}); }
62. 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<String, dynamic> json) => _$TweetFromJson(json); Map<String, dynamic> toJson() => _$TweetToJson(this); }
63. >_ flutter packages pub run build_runner build Generates all *.g.dart Télécharger et parser du json
64. 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 } ]
65. import 'dart:convert'; import 'package:http/http.dart' as http; import 'dart:async'; import 'models/Tweet.dart'; class Webservice { Future<List<Tweet>> 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; } }
66. class MyApp extends StatelessWidget { List<Tweet> 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() ); ), ); } }
67. 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<Tweet> tweets = snapshot.data; return ListView(children: tweets.map( (t) => TweetView(tweet: t) ).toList() ); } else { return ProgressIndicator(); } }),
68. Appel natif avec Flutter Appeler du code natif android
69. 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
70. 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
71. Flutter -Flutter -> android TweetButtons( shareClicked: () { ShareManager().share("http://twitter.com/${tweet.id}"); }, retweetClicked: () {}, likeClicked: () {}, commentClicked: () {}, ) On Flutter
72. 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
73. 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
74. Flutter -Flutter -> android
75. Flutter -Flutter -> android
76. Flutter Découverte Design Affichage de listes Interaction avec webservice Appel à du code natif android
77. Flutter - go further RxDart Bloc (Pattern) Silvers in ListView Hummingbird
78. THANKS ! Florent37 florent_champ Slack : Android Dev FR http://tinyurl.com/sunnyFlutter