Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Pin-point rebuildable and non-rebuild custom widget

2,322 views

Published on

I will introduce my custom widgets that 'RebuildableWidget' and 'ConstantWidget'.

RebuildableWidget specifies the tree that you want the builder property to display and update.
ConstantWidget specifies a tree that the builder property does not display and update.

GDG meetup in Kyoto 2019/02/10 at Furyu
https://gdgkyoto.connpass.com/event/115000/

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Pin-point rebuildable and non-rebuild custom widget

  1. 1. Pin-point rebuildable and non-rebuild custom widget GDG meetup in Kyoto 2019/02/10 at Furyu robo
  2. 2. Self-introduction Name robo (兼高理恵) Favorite things mobile computer My work From application design to implementation 2
  3. 3. We received Service Partner of the Year - Japan from Google! Building a better cloud with our partners at Next ‘18 https://blog.google/products/google-cloud/building-a-better-cloud-with-our-partners-at-next-18/
  4. 4. Pin-point rebuildable and non-rebuild custom widget ピンポイントで再構築可能と再構築不可なカスタムウィジェット
  5. 5. In this session, I will introduce my custom widgets that 'RebuildableWidget' and 'ConstantWidget'. 自作の 'RebuildableWidget'と 'ConstantWidget'  カスタムウィジェットについて紹介します。
  6. 6. Basics of creating a page display of Flutter In Flutter, everything is a widget. Flutter のページ表示作成の基本  Flutterでは、全てが Widget です。
  7. 7. In Flutter, all UI display and essential functions of the application are defined in Widget's tree structure. and The contents of the page display of Flutter is defined by the tree structure of the UI parts with Widget for page display. Flutterでは、アプリの全ての UI表示および必須機能を Widget のツリー構造で定義します。 ページ表示の内容は、ページ表示用の Widget での UIパーツ のツリー構造で定義します。
  8. 8. To create an updatable page view with Flutter, use the StatefulWidget class. Flutterで、更新可能なページ表示を作成するには、 StatefulWidget クラスを使います。
  9. 9. StatefulWidget has arbitrary invariant information (class field), variable information (class field), and build(BuildContext context) method for building page display contents. StatefulWidget は、任意の不変情報 (クラス フィールド)と可変情報(クラスフィールド)と、 ページ表示内容を構築する build(BuildContext context) メソッドを持っています。
  10. 10. The build(context) method is executed to reflect invariant information and variable information when StatefulWidget is newly created or when the setState(void Function () f) method is executed, and the screen display is re-displayed it. build(context) メソッドは、 StatefulWidget が新規生成されたか、 setState(void Function() f) が実行されると、 不変情報と可変情報を反映するために実行されて、画面表示が再構築されます。
  11. 11. これは、Flutter の代表的なカウンターアプリのメインページの表示です。 ページ表示内容は、 MyHomePage Widget で定義されています。 This is the display of the main page of Flutter's typical counter application. The page display content of the counter application is defined by MyHomePage Widget.
  12. 12. ページ表示内容の UIパーツのツリー構造 の定義は、 左のようになっています。 The definition of the tree structure of the UI parts of the page display content is as shown on the left. build(context) { return  Scaffold(   appBar: AppBar(    Icon,    Text    )   body: Container(    Columen([    Text, // message    Text, // counter    ]),     )   floatingActionButton: FAB(    Icon,    )  ); }
  13. 13. ページ表示用 Widget の setState(f) を実行すると、build(context)が実行され、 ページ表示用の Widget のツリーの 各ノードである  全 UIパーツ Widget が再生成されます。 これによりページ表示の外観は、可変情報である カウンタ値 の  最新の内容が反映された外観に更新されます。 When setState(f) of the page display Widget is executed, build(context) is executed and all the UI parts widget which is each node of Widget's tree for page display are regenerated. As a result, the appearance of the page display is updated to the appearance reflecting the latest contents of the counter value which is variable information.
  14. 14. The thing to note is that when you execute setState(f), all widgets of UI widget for page display will be regenerated. 注意しなくてはならないことは、setState(f) を実行すると、 ページ表示用の 全 UIパーツ Widget が再生成されることです。
  15. 15. The display appearance is updated only for the UI part of the counter value, but all UI widgets of the page display widget are regenerated! 表示外観が更新されるのは、カウンタ値 の UIパーツだけですが、 ページ表示用の全ての UIパーツ Widget が再生成されてしまうのです。
  16. 16. これは、UIパーツのウィジェットの再生成で発生するフローをログ出力させたものです。 This is a log output of the flow generated by the regeneration of the widget of the UI parts.
  17. 17. When you execute setState(f) of MyHomePage, build related processing is executed so much. MyHomePage の setState(f) を実行させると、 こんなにもビルド関連の処理が実行されてしまうのです。
  18. 18. How can we update only the UI part of the counter value? カウンタ値の UIパーツだけを更新するには、どうしたら良いのでしょう。
  19. 19. Pinpoint display update idea Since setState(f) executes all the UI widgets of the page display widget, it is only necessary to create a custom page display widget having only the UI part of the counter value in the tree. ピンポイント表示更新のアイディア setState(f) は、ページ表示用 Widget の 全ての UIパーツ Widget を実行するのだから、 ツリーにカウンタ値 の UIパーツだけを持つカスタムなページ表示用 Widget を作れば  良いことになります。
  20. 20. Then, how can you make sure that the display contents do not change (do not regenerate) the UI parts widget of immutable tree from the initial display? それでは、表示内容が初期表示から不変のツリーの UIパーツ Widget を  変更させない(再生成させない)ようにするには、どうしたら良いのでしょうか。
  21. 21. Pinpoint display no-update idea For 'Performance considerations' in the reference of the StatefulWidget class, there are cases where regeneration of widget does not occur if subtree without display change returns cache value. ピンポイント表示無更新のアイディア StatefulWidget class のリファレンスの Performance considerations には、 キャッシュ値を返すようにすれば Widget の再生成が発生しないとあります。
  22. 22. これが使えそうです。 Reference: StatefulWidget class #Performance considerations https://docs.flutter.io/flutter/widgets/StatefulWidget-class.html#performance-considerations > If a subtree does not change, cache the widget that represents > that subtree and re-use it each time it can be used. > It is massively more efficient for a widget to be re-used > than for a new (but identically-configured) widget to be created. > Factoring out the stateful part into a widget > that takes a child argument is a common way of doing this. This seems to work.
  23. 23. Initial display object cache experiment (I am sorry, but there is no slide for demonstration.) 初期表示オブジェクトのキャッシュ実験 (ごめんなさい実演のためスライドはありません )
  24. 24. So, there is a custom widget here! (Graham Kerr's The Galloping Gourmet method) では、こちらに出来上がったカスタムウィジェットがあります。 (グラハム・カー 世界の料理ショー メソッド)
  25. 25. Pin-point rebuildable and non-rebuild custom widget To redraw RebuildableWidget arbitrarily, set GlobalKey. Then let the event handler execute the rebuild() method. RebuildableWidget specifies the tree that you want the builder property to display and update. ConstantWidget specifies a tree that the builder property does not display and update. RebuildableWidget arbitrarily regenerates (display update) child widgets using rebuild() method. ConstnatWidget is a widget that does not allow rendering of child widgets when regenerated.
  26. 26. これは、UIパーツのウィジェットの再生成で発生するフローをログ出力させたものです。 オリジナルの半分以下のフローで再描画できています。 This is a log output of the flow generated by the regeneration of the widget of the UI parts. Redrawing is possible with less than half of original flow.
  27. 27. The source of the custom widget will be here. カスタムウィジェットのソースは、こちらになります。 https://github.com/cch-robo/basic_strategy_of_state_propagation_in_Flutter/blob/ master/lib/src/base/custom_widgets.dart
  28. 28. In addition, please refer to the session slide and github sample of DroidKaigi 2019 which became the basis of the announcement too. 併せて、発表のもとになった  DroidKaigi 2019 のセッションスライドと github サンプルも参照ください。 Basic Strategy of State Propagation and Access Restriction in Flutter https://www.slideshare.net/cch-robo/flutterwidget-130879555 cch-robo/basic_strategy_of_state_propagation_in_Flutter https://github.com/cch-robo/basic_strategy_of_state_propagation_in_Flutter
  29. 29. thank you for your attention. ご清聴、ありがとうございました。

×