【Flutter】Widget・Widgetツリーの基本的な仕組み | FlutterアプリのUI構造

UIの構造を知る
この記事がおすすめな人!
  • FlutterアプリのUI構造が知りたい
  • Widget・Widgetツリーが何か知りたい

Flutterアプリ開発をする上でまず初めに知っておきたい「Widget」とFlutterアプリのUI構造(Widgetツリー)について紹介していきます。

スポンサーリンク

Widget・Widgetツリーとは?

Widget ツリー
チェックポイント!
  • Widgetとは、FlutterアプリのUIを構築しているパーツ
  • Widgetツリーとは、FlutterアプリのUIの構造スタイル
  • Widgetツリーの根元を「root(ルート)」と呼ぶ
  • child Widgetとは、あるWidgetの下位に位置するWidget
  • parent Widgetとは、あるWidgetの上位に位置するWidget

Widgetとは、FlutterアプリのUIを構築しているパーツのことを呼びます。そしてFlutterのUIは上の図のように、いくつものWidgetが組み合わさって構築されています。

このツリー状に組み合わさった構造スタイルを「Widgetツリー」と呼び、Widgetツリーの根元となるWidget(Widget A)をroot(ルート)と呼びます。また、Widgetツリー上で、あるWidgetの1つ下位に位置するWidgetを「child(子) Widget」と呼び、1つ上位に位置するWidgetを「parent(親) Widget」と呼びます。

この図の場合「Widget A」のchild Widgetに当たるのが「Widget B」で、「Widget B」のparent Widgetに当たるのが「Widget A」です。

コードを使ってWidgetの理解を深める

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter 入門 アカデミー'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    ),
  );
}
このコードで理解したいポイント
  • main()とrunApp()
  • material libraryとMaterialAppを理解
  • 使用されているWidgetとWidgetツリーを把握
  • Widgetの使い方

コードを実際に使いながら、さらにWidgetの解説をしていきます。また、今回は各Widgetの特徴の説明をあえてせず、もっと重要なFlutterアプリの構造の理解だけに焦点を当てていきます。

ちなみに、上記のコードを実行するとモバイルスクリーンで次のようなUIが反映されます。

learn more widget

main()・runApp()とは?

void main() {
  runApp(MyWidget());
}

main関数とrunApp関数は、Flutterアプリを開発する上で最重要な関数です

main関数とは、Dartのプログラムを実行した際に最初に呼び出される関数で、全てのプログラムはこのmain関数を通して実行されます。

runApp関数とは、引数として代入されたWidgetをWidgetツリーのrootとしてプログラムを実行する関数です。

Widgetを使用するにはパッケージが必要

material-library
引用元:Flutter
チェックポイント!
  • Widgetを使用するにはパッケージのインポートが必要
  • FlutterでコアとなるWidgetのパッケージは「material library」と「cupertino library」
  • material libraryのWidgetを使うには「materialApp Widget」が必要
  • material library以外のWidgetも外部パッケージをインポートすれば使用できる

今までWidgetについて軽く触れてきましたが、Widgetを使用するにはパッケージをインポートする必要があります。また、Flutterで新規プロジェクトを作成するとデフォルトでコアのパッケージとなる「material library」がインポートされています。

material library

//material libraryのインポート
import 'package:flutter/material.dart';

material libraryでは、Flutterのアプリ開発で頻繁に使われる、Scaffold、Column、 Center Widgetなどを使用できます。

cupertino library

//cupertino libraryのインポート
import 'package:flutter/cupertino.dart';

FlutterではiOSアプリで使用されているデザインのWidgetを「cupertino library」をインポートすることで使用できます。cupertino libraryもFlutterではコアのパッケージとして扱われています。

外部パッケージも使える

また「material library」「cupertino library」以外にも外部のパッケージをインストールすることで、様々なWidgetをFlutterで使用できます。

使用されている「Widget」と「Widgetツリー」を把握する

Widget ツリー2
使用されているWidget
  • Scaffold
  • AppBar
  • Center
  • Text × 2

このコードでは5つのWidgetが使われており、上図のようなWidgetツリーでUIが構築されています。また、Material libraryのWidgetを使用するには、パッケージのインポート以外にもMaterialAppクラスをインスタンス化する必要があります。

Widgetはクラスと同じように扱う

widget
チェックポイント!
  • WidgetはDart言語によるクラスをインスタンス化したオブジェクト
  • Widgetはクラス同様プロパティ、メソッド、コンストラクタで構成される
  • Flutterでアプリ開発をするにはDart言語の基本をマスターする必要がある

FlutterではDart言語が使用されており、FlutterのUIを構築しているWidgetはDart言語で作られたクラスによってインスタンス化されたオブジェクトです。つまり、Widgetはクラス同様にプロパティ、メソッド、コンストラクタを持ち合わせています。

よって、Flutterで使用されているWidgetはDart言語のクラスのオブジェクトと同じように扱えるので、Flutterでアプリ開発をするには、Dartの基本をマスターする必要があります。

Widgetは「キーワード引数」を使うクラスのオブジェクト

キーワード引数
チェックポイント!
  • Widgetはコンストラクタにキーワード引数を使う
//Widgetのコンストラクタ
MyWidget(
  パラメータ: 引数,
),

Widgetのコンストラクタでは「キーワード引数」を使います。キーワード引数を用いることで、Widgetで使用したいプロパティだけを指定することができます。また、コンストラクタで使用しなかったプロパティはデフォルト値のプログラムを実行します。

タイトルとURLをコピーしました