【Flutter】Widgetとは|ウィジェットツリーでUIを構築

今回はFlutterで使用されるWidget(ウィジェット)とは何かについて紹介します。

初心者向けに順を追って分かりやすく解説していきます。

\ 世界最大級のオンライン学習サービス /

目次

Widgetのイメージ|ツリー状に組み合わったパーツの一部

Widgetを一言でまとめると「アプリを構築するパーツ」です。

FlutterアプリのUI(ユーザーインターフェイス)はいくつものWidgetがツリー状に組み合わさって構築されており、Widgetがツリー状に組み合わさっていることを「ウィジェットツリー」と呼びます。

コードを見て理解を深める

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

上記コードでは次の7つのWidgetが使用されています。(イメージ画像は上)

  • MyApp:自作したWidget
  • MaterialApp:マテリアルコンポーネントを使用する上でで必須
  • Scaffold:基本レイアウトを決めるWidget
  • AppBar:アプリバーを作るWidget
  • Text×2:テキスト表示するWidget
  • Center:中央表示させるWidgetリスト

このようにFlutterでは様々なWidgetを組み合わせてアプリ開発を進めていきます。

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

Widgetを使用するにはdartファイルにパッケージを導入する必要があります。

import 'package:flutter/material.dart';

Android StudioやVSCodeでFlutterプロジェクトを作成するとmain.dartに上記のようなコードが書かれていますが、これはmaterialライブラリのWidgetを使用するためのパッケージです。

パッケージとライブラリの違い

パッケージの中には1つまたは複数のライブラリが含まれており、導入したパッケージから好きなライブラリのWidgetを使用できます。

イメージとしては「パッケージ > ライブラリ > Widget」です。

pub.devでパッケージが手に入る

Flutterでは様々なパッケージが用意されており、外部パッケージは「pub.dev」から手に入ります。

Widgetを使用するには?

void main() => runApp(MyApp());

Flutterではmain.dartmainで書かれた処理から順に実行されます。

ウィジェットツリーの始め(先祖)にあたるWidgetをUIに反映させるにはmain.dartrunAppを使用します。上記コードではMyAppがウィジェットツリーの先祖になります。

Widgetは自作できる

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

Flutterではパッケージから導入したWidgetを組み合わせて自分でWidgetを自作できます。

上記コードではStatelessWidgetをクラスで継承して自作のMyAppウィジェットを作っています。Widgetの自作方法については下の解説記事をお読みください。

一緒に読みたい

  • URLをコピーしました!
目次