【Flutter/Dart④】Flutterのウィジェットについて

さあ今回はFlutterのウィジェットについて学んでいこう!!

前回まではDartの文法についてまとめてきました👇

【Flutter/Dart③】Dart文法をチェックしていこう

この基礎を押さえた上で、ウィジェットの概念と書き方について学んでいきます。
Flutterはこのウィジェットを組み合わせていくことによりアプリを完成させていくので、基礎をしっかり理解していきたいですね。


では早速やっていこう✊

本記事の対象者

○Flutter/Dartを勉強していきたい方

○アプリ開発に興味がある方

○筆者と一緒に勉強をしていこうって思っていただける方

Widget(ウィジェット)について

✅ Flutterアプリの見た目に関わる部分を構成するパーツ
✅ 単純なウィジェットをツリー構造で組み合わせることで、複雑なUIを構築できる
✅ Widgetクラスは必ず他のWidgetを返すbuildメソッドを持つ
✅ buildメソッドはWidgetの代わりにTextを返すこともできる
✅ Widgetの入れ子でFlutterは構成される
✅ 表示、アクション、バックグラウンド、CSSはWidgetの入れ子で表現する

Widgetの基本構成

Widgetで構成されたFlutterの基本構造は以下のようにイメージすればいいかなと思います(一例です)

StatelessWidget

✅ State(状態)を持たない、値が固定されたウィジェット(静的なWidget)
✅ StatelessWidgetを継承した一つのクラスで構成される
✅ 変数を定義しても、親Widgetから渡されるのみで、自分でその値を更新することはできない
✅ buildメソッドを持ち、”Widget“もしくは”Text“を返す
✅ 返すWidgetはStatefulWidget(MaterialApp ..etc)でもOK

👇以下が”Hello World”を表示するだけの簡単なサンプルコードになります。

外部パッケージのimport

✅ 外部パッケージを利用する場合、importしてあげる
✅ pubspec.yamlファイルに追加したいパッケージを記述する
✅ ターミナルで”flutter packages get”を実行

StatefulWidget

✅ ユーザーの操作、通信などによって動的に状態が変わるウィジェット
✅ Widgetにstate概念を入れて拡張したもの
✅ stateが変化した時に再描画を指示するメソッドが組み込まれている
StateクラスWidgetクラスの2つのクラスで構成されている
✅ buildメソッドを持たないが、createStateメソッドを持つためこれがStateクラスを返す
✅ StatefulWidget自体はシンプルな構造で、複雑な処理等はStateクラスで持つ
✅ Stateクラスで機能的なメソッドを実装する
✅ Stateクラスはbuildクラスを持ち、Widgetを返す時に定義したメソッドを

👇StatefulWidgetの使用例になります

StatefulWidgetのメソッド構成
Widgetクラス
createState():ビルド後に呼ばれるメソッドで必須 (型はState)
Stateクラス
initState():最初に一度呼ばれる Widgetツリーの初期化を実行
didChangeDependencies():initState()呼び出し直後に呼ばれる Widgetツリーの変更要素に通知する
build():didChangeDependenciesの呼出し後にしか呼ばれない 複数回呼ばれる Widgetツリーを置き換える
didUpdateWidget(Widget oldWidget):リビルド時のinitState()的な位置づけ
setState():任意で呼べるメソッド Widgetツリーを再構成して、変更を反映させる 簡単な変数の代入だけでなく非同期処理でも使える
dispose():Stateを永続的に削除する 画面を落とすときやストリーム停止で使用

Material Design

✅ Googleが提唱したデザインシステム
✅ 『マテリアル=物理的』⇨『現実世界の物理的な法則に則ったデザイン』
  直感的に理解しやすいメリット有

✅ Flutterではマテリアルデザイン用のウィジェットが数多く用意されている
 ⇨https://meterial.io/

ListView

✅ スクロール可能な画面の実装(テーブルビュー)

👇ListViewを使った実装例になります(先ほど学んだStatefulWidgetの応用)

“【Flutter/Dart④】Flutterのウィジェットについて”は以上になります、いかがだったでしょうか?
Widgetは他にも本当に無数にあるので、少しずつ書きながら覚えていくのがいいんじゃないかなと思います。

次回は”Layout”の作り方について説明していきます、楽しみにしてて下さいね✊

今回はこの辺で、バイバイ👋