Flutter – Widget（ ウィジェット）

今回は、Flutterのwidget（ウィジェット）についてまとめてみようと思います。

widget（ウィジェット）とは

widgetは画面に見える全てのことを指します。Flutterはwidget基盤のフレームワークです。

簡単なテキストからイメージ、リスト画面までFlutterアプリ内の全てがwidgetで、画面にwidgetを並べて欲しい画面（UI）を構築できます。

widgetの特徴及び構築できる機能

• 一つの機能を担当（ボタンなど）
• スタイル的な要素設定（フォント、カラーなど）
• 下位widgetの並び方を設定（縦並び、横並びなど）
• 余白や間隔の設定（Paddingなど）

widgetはwidgetオブジェクトを返すbuild()メソッドを基本的に持っていて、ここにコードを作成して見せたい画面を作成します。

widgetは基本的に「変わらない」特徴を持っているので、性能的に軽いです。

StateFulWidget / StateLessWidget

ユーザーの行動によって画面更新（リロード）が必要なwidgetもあります。（CheckBoxのOn/Offによる文字色変更など）でも、widgetの特徴の中で「変わらない」特徴があるので、widgetの内容を勝手に変更できません。

Flutterではwidgetの現状態を変更できるようにするためにState概念を作り、State有無によってwidgetをStateFulWidget、StateLessWidgetを継承して動的、静的のwidgetを作ることができます。

StatelessWidget：1回のみ、「build()」を実行して表示されている画面をずっと維持します。

StatefulWidget：基本的にstate値（状態管理のための値）を持っていて「setState()」を実行するたびに「build()」を実行させてwidgetを更新します。

build()

build()の内で使われるwidgetは「MaterialApp」「Scaffold」「Appbar」「Center」「Text」があります。

• Appbar：アプリ内の上部のwidgetを指します。
• Center：子widgetを現widgetのセンターに配置するwidgetです。
• Text：画面に文字列を表示するwidgetです。

終わりに

今回は、widgetについてまとめてみましたが、「MaterialApp」「Scaffold」については次回、調べてみようと思います。