【Flutter】Widget（ウィジェット）とは？

「そもそもFlutterで使用されるWidget(ウィジェット)って何？」

今回はFlutterでアプリ開発を行なっていく上で必須なWidgetとは何かについて初心者向けに分かりやすく解説していきます。

Widget（ウィジェット）とは？

Widgetを一言でまとめると「UIを構築するためのパーツ」です。

FlutterアプリはこのWidgetが複数組み合わさり作られています。

Widgetはツリー状に組み合う（ウィジェットツリー）

Widgetは次の図のようにツリー状に組み合わさることからFlutterではこの関係性を「ウィジェットツリー」と呼びます。

またWidgetには親子関係がありウィジェットツリーの根元に近い方が親ウィジェットになります。右図を例にするとMyAppがMaterialAppに対して「親」、MaterialAppがMyAppに対して「子」になります。

Widgetはクラスである

Flutter公式でドキュメントを見るとわかりますが全てのWidgetはクラスです。

よってWidgetの基本構成はDart言語のクラス同様に、コンストラクタ、プロパティ、メソッドの3つからなります。

初心者の方はWidgetを使用する前にクラスについて先に学習しておくのがオススメです。

WidgetをUI（スクリーン）に反映するには？

WidgetをUIに反映するにはrunApp関数を使用します。

runApp関数の引数に渡されたWidgetをウィジェットツリーの根元（ルート）としてアプリが構築されます。次のコードではMyApp()がウィジェットツリーのルートとなります。

//全体のコードから一部抜粋
...

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

...

//全体のコード
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter'),
        ),
        body: Center(
          child: const Text('Hello World'),
        ),
      ),
    );
  }
}

まとめ

今回はWidgetとは何かについて解説しました。

Widgetを使いこなすためにまずはDart言語のクラスについて学習してみるのがオススメです！