【Flutter入門】Widget(ウィジェット)の役割と使い方

所有時間3分

今回はFlutterの基本中の基本である「Widget」の役割と基本的な使い方について紹介します。

目次

Widgetとはパーツの一部

Widget1

Widgetとは、結論から言うとFlutterアプリのUIを構築しているパーツの一部です。FlutterのUIは上図のようにいくつものWidgetがツリー状に組み合わさって構築されていることからWidget全体を「Widgetツリー」と呼びます。

全てのWidgetは親子関係でつながっている

全てのWidgetは一つのWidgetから枝分かれしてつながっており、あるWidgetの1つ下位に位置するWidgetを「child Widget(子ウィジェット)」、1つ上位に位置するWidgetを「parent Widget(親ウィジェット)」と呼びます。

この図の場合「Widget A」の子ウィジェットに当たるのが「Widget B」で、「Widget B」の親ウィジェットに当たるのが「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'),
        ),
      ),
    ),
  );
}

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

widget2

それでは上記のコードを使いながらWdgetの扱い方に慣れていきましょう。

Widgetツリーを把握する

widget-Tree

今回は計6つのWidgetが使われており、上図のような親子関係でUIが構築されています。

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

開発に必須な「main関数」と「runApp関数」

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

先ほど紹介したコードにはWidget以外にも「main()」「runApp()」がありました。これらはFlutterアプリを開発する上で必須だと思っておきましょう。

main関数とは?

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

runApp関数とは?

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

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

material library

FlutterでWidgetを使用するには、Widgetのパッケージをインポートする必要があります。Flutterではコアとなるパッケージに「material library」があり、パッケージをインポートすることでmaterial libraryで提供されている様々なWidgetが使用できます。

Googleのデザインが使える「material library」

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

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

Appleのデザインが使える「cupertino library」

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

Flutterでは「cupertino library」をインポートすることでiOSのデザインと性能をもったWidgetをFlutterで使用できます。

他にも様々な外部パッケージを使用できる

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

Widgetの扱いは「Dart言語」のクラスと同じ

class

FlutterではDart言語が使用されており、WidgetはDart言語のクラス同様に扱えます。よって、Widgetはプロパティ、メソッド、コンストラクタを持ち合わせているのでDart言語の理解が必要になってきます。

まとめ

WidgetはFlutterアプリのUIを構築しているパーツの一部で、パッケージをインポートすることで使用できます。また、WidgetはDart言語のクラスと扱いが同じなのでまずはDartの基本を理解するのがおすすめです。

URLをコピーする
URLをコピーしました!
目次
閉じる