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/

1. Pin-point rebuildable and
non-rebuild custom widget
GDG meetup in Kyoto
2019/02/10 at Furyu
robo

2. Self-introduction
Name
robo （兼高理恵）
Favorite things
mobile computer
My work
From application design to implementation
2

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. Pin-point rebuildable
and non-rebuild custom widget
ピンポイントで再構築可能と再構築不可なカスタムウィジェット

5. In this session, I will introduce my custom widgets
that 'RebuildableWidget' and 'ConstantWidget'.
自作の 'RebuildableWidget'と 'ConstantWidget'
カスタムウィジェットについて紹介します。

6. Basics of creating a page display of Flutter
In Flutter, everything is a widget.
Flutter のページ表示作成の基本
Flutterでは、全てが Widget です。

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. To create an updatable page view with Flutter,
use the StatefulWidget class.
Flutterで、更新可能なページ表示を作成するには、 StatefulWidget クラスを使います。

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. 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. これは、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. ページ表示内容の 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. ページ表示用 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. 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. 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. これは、UIパーツのウィジェットの再生成で発生するフローをログ出力させたものです。
This is a log output of the flow generated
by the regeneration of the widget of the UI parts.

17. When you execute setState(f) of MyHomePage,
build related processing is executed so much.
MyHomePage の setState(f) を実行させると、
こんなにもビルド関連の処理が実行されてしまうのです。

18. How can we update only the UI part of the counter value?
カウンタ値の UIパーツだけを更新するには、どうしたら良いのでしょう。

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. 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. 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. これが使えそうです。
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. Initial display object cache experiment
(I am sorry, but there is no slide for demonstration.)
初期表示オブジェクトのキャッシュ実験
(ごめんなさい実演のためスライドはありません )

24. So, there is a custom widget here!
(Graham Kerr's The Galloping Gourmet method)
では、こちらに出来上がったカスタムウィジェットがあります。
（グラハム・カー 世界の料理ショー メソッド）

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. これは、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. 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. 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. thank you for your attention.
ご清聴、ありがとうございました。