FlutterのUIを構築するWidgetとは? Widgetの役割・基本的な使い方を分かりやすく解説

FlutterのUIを構築するWidgetとは? Widgetの役割・基本的な使い方を分かりやすく解説

Flutterに使用される「Widget」って何?

FlutterアプリのUIはどうやって構築されているの?

このような疑問にお答えします。

結論

WidgetとはFlutterアプリのUIを構築しているパーツのことを呼び、UIはWidgetがツリー状に組み合わさって構築されています。また、WidgetはクラスのオブジェクトであることからDart言語のクラス同様に扱うことができます。

Flutterは「Widgetに始まり、Widgetに終わる」と言われるほど、FlutterにおいてWidgetは重要な存在です。本記事ではWidgetにおけるUI構造、特徴、使い方について簡単に紹介していくのでWidgetの大まかなイメージできるようになるはずです。

ティファ

それではWidgetについて分かりやすく解説していくよ!

目次

Flutterアプリにおける「Widget」とUI構造を理解する

Widget1
  • Widgetとは、FlutterアプリのUIを構築しているパーツ
  • Widgetツリーとは、Widgetがツリー状に組み合わさってできたUI構造
  • Widgetツリーの根元を「root(ルート)」と呼ぶ
  • child Widgetとは、あるWidgetの1つ下位に位置するWidget
  • parent Widgetとは、あるWidgetの1つ上位に位置するWidget

Widgetとは?

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

Widgetツリーとは?

FlutterアプリのUIはWidgetがツリー状に組み合わさって構築されており、この構造スタイルを「Widgetツリー」と呼びます。また、Widgetツリーの根元となるWidget(Widget A)をroot(ルート)と呼び、ある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の基本的な使い方

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

widget2
ティファ

それでは、上記のコードを使いながらWidgetの理解を深めていくよ。また、本記事ではコードで使用されている各Widgetの役割の説明を省いて、Widgetとは何かイメージできるように解説しているよ!

Widgetを理解その1:main関数・runApp関数とは?

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

main関数とrunApp関数はFlutterアプリを開発する上で必要不可欠な関数なのでまず初めに理解しておきましょう。

main関数/main()とは?

main関数とは、プログラムを実行した際に最初に呼び出される関数で、全てのプログラムはこのmain関数を通して実行されます。よってmain関数は1つのプロジェクトに1つしか使用できません。

runApp関数/runApp()とは?

runApp関数とは、引数として代入されたWidgetをWidgetツリーのrootとしてプログラムを実行する関数です。このコードの場合「MyWidget()」がWidgetツリーのrootとしてプログラムが実行されます。

Widgetを理解その2:Widgetを使用するにはパッケージが必要

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

パッケージとは?

FlutterでWidgetを使用するには、使用するWidgetのパッケージをインポートする必要があります。Flutterでコアとなるパッケージは「material library」と「cupertitno library」の2つですが、外部パッケージをインポートすることで様々なWidgetが使用できます。

ティファ

Flutterではプロジェクトを作成した時にデフォルトで「material library」というパッケージがインポートされているよ!

material libraryとは?

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

material libraryをインポートすれば、Googleが推奨しているマテリアルデザインを実装したWidgetが使用できます。material libraryのWidgetにはFlutterアプリ開発で頻繁に使われる、Scaffold、Column、Center Widgetなどがあります。

material libraryのWidgetを使用するには、先にMaterialApp Widgetを生成しておく必要があります。

cupertino libraryとは?

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

cupertino libraryをインポートすればiOSのデザインと性能をもったWidgetをFlutterで使用できます。

外部パッケージも使える

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

Widgetを理解その3:使用されている「Widget」を把握する

widget-Tree
本記事のコードで使用されているWidget
  • MaterialApp
  • Scaffold
  • AppBar
  • Center
  • Text × 2

本記事で紹介しているコードでは5つのWidgetが使われており、上図のようなWidgetツリーでUIが構築されています。

ティファ

Widgetツリーのrootは先ほど紹介した「runApp関数」で指定できるよ!

Widgetを理解その4:Widgetはクラスをインスタンス化したオブジェクト

class
  • WidgetはDart言語で作られたクラスをインスタンス化したオブジェクト
  • WidgetはDart言語で作られたクラスであるからプロパティ、メソッド、コンストラクタをもつ
  • FlutterでWidgetを理解するにはDart言語の基本をマスターする必要がある

FlutterではDart言語が使用されており、FlutterのUIを構築しているWidgetはDart言語で作られたクラスをインスタンス化したオブジェクトです。

ティファ

WidgetはDart言語で作られたクラスだからプロパティ、メソッド、コンストラクタを持ち合わせているよって、Widgetを理解するにはクラスの使い方を理解しておく必要があるよ。

Widgetを理解その5:Widgetはコンストラクタでキーワード引数を使用する

キーワード引数

Widgetはコンストラクタにキーワード引数を使う

//Widgetのコンストラクタ
MyWidget(
  パラメータ: 引数,
),

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

ティファ

キーワード引数が何か分からない人はこちらの記事でクラスを理解しておこう!

よかったらシェアしてね!
目次
閉じる