【 Flutter 】Flutter を 基礎 から 学習 ( スタートガイド編 ) part16 Flutterプロジェクト概要(ウィジェット)

基礎 から 学ぶ Flutter 」という書籍で  学習 したことを ブログでアウトプットしていこうと思います。今回は スタートガイド編 ( part16 )です。

前回までのお話

【 Flutter 】Flutter を 基礎 から 学習 ( スタートガイド編 ) part15 Flutterプロジェクト概要(main.dart)

今回もmain.dartについて学習していきます。

ウィジェットという概念

FlutterのUIはすべてウィジェットで構成されています。
本書ではウィジェットを以下のように定義しています。

  • アプリに表示される部品(テキストフィールドやラベルやスクロールバーやボタンなどの目に見えるもの、コントロールできるもの)

  • レイアウトに関するもの(中央に配置したり、パディングを指定したり、マージンを指定したりなど)

  • 目に見えないもの(必要なデータを取得するなど、画面上だけでは存在に気づけない便利なものなど)

画面上に表示される部品やレイアウトに使う部品はウィジェットとして認識しやすいですが、目に見えないもというのが難しいですね。

Dartに存在するのかわかりませんがクラスウィジェットのことなんでしょうかね?

インポート

この一行目は大事らしいです。

import 'package:flutter/material.dart';

これからメインで利用するウィジェットというものと使えるようにするライブラリのようです。

 

ウィジェットツリー

ウィジェットはウィジェットを保持し、階層構造を形成できます。
これをウィジェットツリーといいます。

ウィジェットツリーを形成することで複雑な画面にも対応できるようです。
ウィジェットツリーの王様(トップ)をルートウィジェットと呼んでいます。

.Net Formsでも似たような構成でしたね。

部品の中に部品があるというイメージでしょうか。

main.dartのウィジェットツリーはMyAppがルートウィジェットとして存在し、MaterialAppウィジェット、MyHomePageウィジェットとツリーを形成しています。

StatelessWidget

MyAppウィジェットの定義がmain.dartファイルにあります。

このウィジェットはStatelessWidgetを継承しています。
一度インスタンス化したら変わることがない、変える必要があるなら再度インスタンス化しなければならない類のウィジェットとのことです。

はて?変える必要があるときというのはどんな時なのか?

もう少し具体的な説明が以下のサイトにありました。
【Flutter入門】StatelessWidgetとStatefulWidgetの違い | TECHRISE (tech-rise.net)

変数を定義しても、その変数は親Widgetより渡されるのみで、自分でその値を更新することはできません。

なるほど。わかった気になりました(笑

StatelessWidgetはbuildというメソッドを必ずオーバーライドする必要があり、ここにウィジェットツリーを記述するそうです。
名前付き引数(?)にtitletheme,homeなんていう項目がありますね。他にもたくさんありそうです。
どうやって自分が希望する項目を見つけ出すのでしょう。慣れなんでしょうかね🤔

終わり

今日はここまで!