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* “ “
4. None

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 ?

44. None

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