🔨

Flutter そもそもWidgetとはなんなのか

2021/06/22に公開

Flutterを学び始めると、Widgetという言葉を耳にします。
Widgetはアプリを構成する要素だとどこかで読みましたが、しっくりこないので調べました。

Widgetはアプリを構成する要素で間違いない

しっかりと公式に

Flutter emphasizes widgets as a unit of composition. Widgets are the building blocks of a Flutter app’s user interface, and each widget is an immutable declaration of part of the user interface.
→ DeepL先生の訳:Flutterは、構成単位としてのウィジェットを重視しています。ウィジェットは、Flutterアプリのユーザーインターフェイスの構成要素であり、各ウィジェットはユーザーインターフェイスの一部を不変的に宣言したものです。

ということでwidgetはFlutterアプリ構成要素で間違いありません!!
しかし、FlutterがなぜこんなにもWidgetを推しているのかがわかりそうなものを見つけました。
それは、画面全体の構成もWidgetだということです。

画面全体の構成もWidget

これまでの認識から少しずれていたと感じたのは、「それぞれの部品以外もWidget」という点です。
他のフレームワークでは、画面の見た目を作る要素と、画面全体の構成は別のものとして作られています。
しかしFlutterでは、画面の全体の構成すらもWidgetとして、画面を作る要素の一部として捉えます。

これが、Flutterが他のフレームワークと一線を隠している部分だといって良いと思います。

ここで終わるのもいいですが、もう少し、公式を読んでみます。

StatefulWidgetとStatelessWidget

Widgetには代表的なものが2つあり、StatelessWidgetとStatefulWidgetです。
StatelessWidget : 不変的(immutable)なウィジェット。ほとんどのウィジェットはこれに当たります。ボタンや毎回同じ表示をする部分はこれを使います。

StatefulWidget : 可変な(mutable)ウィジェット。ユーザーのアクションによって状態を変化するウィジェットに使う。
StatefulWidgetを使う際には、不変であるStatelessWidgetの箱の中にサブクラスとしてStatehulWidgetを入れることで使うようです。

Discussion