Les Widgets en Flutter

Transcript

1. Les Widgets en Flutter Edouard Marquez (Développeur freelance Flutter & Android)
2. Avant de commencer
3. Les Widgets en Flutter Devfest Lille 2019 En résumé, qu'est-ce que Flutter ? Framework permettant de concevoir des applications multiplateforme Smartphones Android et iOS Ordinateurs* Windows, Mac, Linux Embarqué Ex : Nest Hub Max Web* “ “
5. Les Widgets en Flutter Devfest Lille 2019 Comment fonctionne Flutter ? Code natif Canvas Evénements Application Plateforme Position GPS Bluetooth Audio Capteurs Caméra Etc Services Widgets, Rendu Platform Channels
6. Les Widgets en Flutter Devfest Lille 2019 La stack Flutter Material Cupertino Widgets Rendering Fondation Animation Painting Gestures Framework (Dart) Skia Dart Text Engine (C++)
7. Les Widgets en Flutter Devfest Lille 2019 Du multiplateforme… mais natif et surtout pratique ! Dart Connait une deuxième vie grâce à Flutter Mode AOT Génération d'un binaire optimisé pour la plateforme Mode JIT Lors du développement, injection des changements à la volée Garbage collector Optimisé pour le recyclage de nombreux petits objets
8. Les Widgets en Flutter Devfest Lille 2019 Un développement agréable et rapide grâce au Hot Reload
9. Les Widgets
10. void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } }
11. void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } }
12. Une application est un Widget “ “
13. void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } }
14. void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } }
15. Qui elle même affiche des Widgets ? “ “
16. Oui, en Flutter Tout est un Widget “ “
17. Les Widgets expliqués
18. Ceci n'est pas une présentation sponsorisée
19. 1 Il en existe de toutes les formes
20. 1 Il en existe de toutes les formes 2 Une brique peut avoir plusieurs couleurs
21. 1 Il en existe de toutes les formes 3 Une brique n'a qu'une seule fonction 2 Une brique peut avoir plusieurs couleurs
22. 1 Il en existe de toutes les formes 4 On peut imbriquer une forme 
 dans une autre 2 Une brique peut avoir plusieurs couleurs 3 Une brique n'a qu'une seule fonction
23. 1 Il en existe de toutes les formes 4 On peut imbriquer une forme 
 dans une autre 5 Ou au contraire… 
 certaines ne peuvent pas 2 Une brique peut avoir plusieurs couleurs 3 Une brique n'a qu'une seule fonction
24. 1 Il en existe de toutes les formes 4 On peut imbriquer une forme 
 dans une autre 5 Ou au contraire… 
 certaines ne peuvent pas 6 On peut obtenir des résultats complexes 2 Une brique peut avoir plusieurs couleurs 3 Une brique n'a qu'une seule fonction
25. 1 Il en existe de toutes les formes 2 Une brique peut avoir plusieurs couleurs 3 Une brique n'a qu'une seule fonction 4 On peut imbriquer une forme 
 dans une autre 5 Ou au contraire… 
 certaines ne peuvent pas 6 On peut obtenir des résultats complexes 7 Certaines briques sont utilitaires, d'autres visibles
26. Et appliqué à Flutter ?
27. 1 Il existe de très nombreux Widgets Application Layout Widget 1 Widget 2 Widget 3 Stocker des informations { "User":"toto", "Password":"LOL" } Accessibilité Image d'un pont Texte Hello World ! Animation A B
28. 1 Il existe de très nombreux Widgets flutter.dev Widgets catalog
29. Texte Hello World ! Le texte peut changer sa police Le texte peut changer sa couleur Le texte peut changer sa taille Le texte peut changer son alignement 2 Un Widget peut contenir des attributs
30. Texte Hello World ! Ne sait pas gérer le padding Ne sait pas la couleur d'arrière-plan Ne sait pas comment gérer l'opacité Ne sait pas comment scroller… 3 Mais un Widget est ultra-spécialisé
31. 4 On peut imbriquer un Widget dans un autre Layout Widget 1 Widget 2 Widget 3 Le Widget Column peut accueillir plusieurs enfants qu'il alignera les uns en dessous des autres Padding Le Widget Padding peut accueillir une seul enfant sur lequel il appliquera des marges Hello World !
32. Texte Hello World ! 5 Ou au contraire… certains ne peuvent pas Image
33. 6 On peut obtenir des résultats complexes
34. 7 Certains Widgets ne dessinent rien à l'écran Layout Widget 1 Widget 2 Widget 3 Stocker des informations { "User":"toto", "Password":"LOL" } Accessibilité Image d'un pont Texte Hello World !
35. Si on résume
36. Les Widgets en Flutter Devfest Lille 2019 Un Widget en Flutter est donc… Description d'une partie de la UI Peut s'imbriquer à d'autres Widgets Fait partie d'un arbre de Widgets
37. Widget A Widget B Widget D Widget E Widget C Widget F Widget G
38. Mise en application
39. Analytics Want to see about : Audience 260 Total Posts 26.84% 2.648 Followers 26.32% 768 Followers 0.86% 82.6% Engagement 8.64%
40. Les Widgets en Flutter Devfest Lille 2019 Imbriquer des Widgets grâce au StatelessWidget 260 Total Posts 26.84% Container Column (÷) Icon Text Text Row (㲗) Icon Text
41. class TotalPosts extends StatelessWidget { @override Widget build(BuildContext context) { return Container( decoration: ShapeDecoration(shape: RoundedRectangleBorder()), child: Column(children: <Widget>[ Icon(Icons.photo_album), Text('260'), Text('Total posts'), Row(children: <Widget>[ Icon(Icons.trending_up), Text('26.84%') ]), ]), ); } }
42. class TotalPosts extends StatelessWidget { @override Widget build(BuildContext context) { return Container( decoration: ShapeDecoration(shape: RoundedRectangleBorder()), child: Column(children: <Widget>[ Icon(Icons.photo_album), Text('260'), Text('Total posts'), Row(children: <Widget>[ Icon(Icons.trending_up), Text('26.84%') ]), ]), ); } }
43. Et la gestion de l'état ?
45. Les Widgets en Flutter Devfest Lille 2019 Gérer l'état d'un Widget Un Widget est immutable On va lui associer un objet State On utilise un StatefulWidget Il faut appeler la méthode setState pour indiquer que l'état a changé et qu'il faut redessiner
46. class TotalPosts extends StatelessWidget { @override Widget build(BuildContext context) { return Container( decoration: ShapeDecoration(shape: RoundedRectangleBorder()), child: Column(children: <Widget>[ Icon(Icons.photo_album), Text('260'), Text('Total posts'), Row(children: <Widget>[ Icon(Icons.trending_up), Text('26.84%') ]), ]), ); } }
47. class TotalPosts extends StatefulWidget { @override _TotalPostsState createState() => _TotalPostsState(); }
48. class _TotalPostsState extends State<TotalPosts> { int posts = 260; @override Widget build(BuildContext context) { return Container( decoration: ShapeDecoration(shape: RoundedRectangleBorder()), child: Column(children: <Widget>[ Icon(Icons.photo_album), Text('260'), Text('Total posts'), Row(children: <Widget>[ Icon(Icons.trending_up), Text('26.84%') ]), ]), ); } }
49. class _TotalPostsState extends State<TotalPosts> { int posts = 260; @override Widget build(BuildContext context) { return Container( decoration: ShapeDecoration(shape: RoundedRectangleBorder()), child: Column(children: <Widget>[ Icon(Icons.photo_album), Text('260'), Text('Total posts'), Row(children: <Widget>[ Icon(Icons.trending_up), Text('26.84%') ]), ]), ); } }
50. class _TotalPostsState extends State<TotalPosts> { int posts = 260; @override Widget build(BuildContext context) { return Container( decoration: ShapeDecoration(shape: RoundedRectangleBorder()), child: Column(children: <Widget>[ Icon(Icons.photo_album), Text(posts.toString()), Text('Total posts'), Row(children: <Widget>[ Icon(Icons.trending_up), Text('26.84%') ]), ]), ); } }
51. class _TotalPostsState extends State<TotalPosts> { int posts = 260; @override Widget build(BuildContext context) { return InkWell( onTap: () { setState(() { posts++; }); }, child: Container( child: Column(children: <Widget>[ // Même contenu ]) ), ); } }
52. class _TotalPostsState extends State<TotalPosts> { int posts = 260; @override Widget build(BuildContext context) { return InkWell( onTap: () { setState(() { posts++; }); }, child: Container( child: Column(children: <Widget>[ // Même contenu ]) ), ); } }
53. Oui, mais…
54. Les Widgets en Flutter Devfest Lille 2019 Les Widgets ont aussi quelques particularités… Une instance est immutable L'arbre est aussi immutable Ne connaît pas sa taille Ne connaît pas sa position à l'écran Ne connaît pas ses voisins Ne sait pas dessiner à l'écran
55. La notion d'Element
56. Un widget décrit la configuration d'un Element “ “
57. Les Widgets en Flutter Devfest Lille 2019 La création du couple Widget/Element 1 Instancier le Widget 2 Créer un Element 3 Associer les deux 4 Et on fait cela pour tous les Widget(s) Widget Element Widget Element Widget Element Arbre des widgets Arbre des éléments
58. Un Element désigne l'instanciation d'un Widget à un endroit de l'arbre “ “
59. Widget A Widget B Widget D Widget E Widget C Widget F Widget G
60. Element A Element B Element D Element E Element C Element F Element G
61. Le BuildContext ?
62. class TotalPosts extends StatelessWidget { @override Widget build(BuildContext context) { return Container( decoration: ShapeDecoration(shape: RoundedRectangleBorder()), child: Column(children: <Widget>[ Icon(Icons.photo_album), Text('260'), Text('Total posts'), Row(children: <Widget>[ Icon(Icons.trending_up), Text('26.84%') ]), ]), ); } }
63. Les objets BuildContext sont en réalité des objets de type Element. L'interface BuildContext est utilisée pour éviter la manipulation directe d'un Element. “ “
64. Communication
65. BuildContext A BuildContext B BuildContext C BuildContext D BuildContext E BuildContext F BuildContext G
66. BuildContext A BuildContext B BuildContext C BuildContext D BuildContext E BuildContext F BuildContext G
67. BuildContext A BuildContext B BuildContext C BuildContext D BuildContext E BuildContext F BuildContext G
68. L'Inherited Widget
69. Propage des informations d'un père vers ses enfants “ “
70. Les Widgets en Flutter Devfest Lille 2019 Un exemple de InheritedWidget Thème de l'application La recherche se fait grâce au BuildContext “ “ Le père fournit : Le fils appelle : .accentColor Theme.of(context)
71. class FrogColor extends InheritedWidget { const FrogColor({ Key key, @required this.color, @required Widget child, }) : assert(color != null), assert(child != null), super(key: key, child: child); final Color color; static FrogColor of(BuildContext context) { return context.inheritFromWidgetOfExactType(FrogColor) as FrogColor; } @override bool updateShouldNotify(FrogColor old) => color != old.color; }
72. class FrogColor extends InheritedWidget { const FrogColor({ Key key, @required this.color, @required Widget child, }) : assert(color != null), assert(child != null), super(key: key, child: child); final Color color; static FrogColor of(BuildContext context) { return context.inheritFromWidgetOfExactType(FrogColor) as FrogColor; } @override bool updateShouldNotify(FrogColor old) => color != old.color; }
73. class FrogColor extends InheritedWidget { const FrogColor({ Key key, @required this.color, @required Widget child, }) : assert(color != null), assert(child != null), super(key: key, child: child); final Color color; static FrogColor of(BuildContext context) { return context.inheritFromWidgetOfExactType(FrogColor) as FrogColor; } @override bool updateShouldNotify(FrogColor old) => color != old.color; }
74. A FrogColor B D E C FrogColor F G
75. A FrogColor B D E C FrogColor F G FrogColor.of(context)
76. A FrogColor B D E C FrogColor F G
77. A FrogColor B D E C FrogColor F G
78. A FrogColor B D E C FrogColor F G
79. A FrogColor B D E C FrogColor F G FrogColor.of(context)
80. A FrogColor B D E C FrogColor F G
81. Le changement
82. class FrogColor extends InheritedWidget { const FrogColor({ Key key, @required this.color, @required Widget child, }) : assert(color != null), assert(child != null), super(key: key, child: child); final Color color; static FrogColor of(BuildContext context) { return context.inheritFromWidgetOfExactType(FrogColor) as FrogColor; } @override bool updateShouldNotify(FrogColor old) => color != old.color; }
83. A FrogColor B D E C F G
84. A FrogColor B D E C F G
85. Le rendu
86. Les Widgets en Flutter Devfest Lille 2019 Rappel sur les Widgets… Un Widget est immutable Ne connaît pas sa taille Ne connaît pas sa position à l'écran Ne connaît pas ses voisins Ne sait pas dessiner à l'écran
87. Pour qu'un Widget puisse être dessiné, il faut lui attacher un RenderObject “ “
88. Les Widgets en Flutter Devfest Lille 2019 Un RenderObject a trois rôles Gestion de l'agencement et de la taille (layout) Dessin à l'écran Gestion de l'interaction (hit testing)
89. Les Widgets en Flutter Devfest Lille 2019 Non pas deux, mais trois arbres Arbre des éléments Arbre mutable qui fait le lien entre un Widget et son RenderObject Arbre de widgets Arbre immutable qui décrit les composants et leurs valeurs Arbre de rendu Arbre mutable de RenderObjects qui s'occupe de gérer le layout, le dessin et le touch
90. Arbre des widgets Arbre des éléments Arbre de rendu RenderObjectWidget RenderObjectWidget Theme Element Element RenderObject Element RenderObject
91. Les Widgets en Flutter Devfest Lille 2019 Objectif accompli Décrire/déclarer notre UI Gérer l'état des Widgets Gérer le rendu d'un Widget
92. Oui, mais…
93. Que se passe-t-il lors des mises à jour ? “ “
94. Arbre des widgets Arbre des éléments Evénements 1 On affiche un Widget Text('Hello') Element 2 On modifie le texte pour "Hello world" Element Element Text('Hello World') Element Text('Hello World')
95. Arbre des widgets Arbre des éléments Evénements 1 On affiche un texte "Hello" Text('Hello') Element 2 On remplace par un autre Widget Element Element Image() Image() Element Image()
96. Créer une classe avec const renvoie la même instance “ “ new Text("a") new Text("b") new Text("a") new Text("a") const Text("a") const Text("a") const Text("a") const Text("b")
97. Arbre des widgets Arbre des éléments Evénements 1 On affiche un texte const("Hello") const Text('Hello') Element 2 On modifie le texte pour "Hello world" Element Element const Text('Hello')
98. Les Widgets en Flutter Devfest Lille 2019 Cela peut paraître compliqué… Arbre des éléments Arbre mutable qui fait le lien entre un Widget et son RenderObject Arbre de widgets Arbre qui décrit les composants et leurs valeurs Arbre de rendu Arbre mutable de RenderObjects qui s'occupent de gérer le layout, le dessin et le touch
99. Merci ! Questions ? @g123k @FlutterFr