Flutter入門

【5分でわかる】Widgetとは? | Flutter入門


ども、木村です。本業はデータサイエンティスト、副業でアプリ開発をしています。

本記事は、FlutterにおけるWidgetについて解説していきます。

想定読者

これからFlutterに入門したい方

Widgetについて知りたい方

Widgetとは?

Widgetとは、FlutterにおけるUIを構築する部品です。

FlutterではこのWidgetを組み合わせることによりさまざまなUI表現をすることが可能です。

また、Widgetは親-子の状態でツリー構造で構築されることが特徴です。

ポイント
  • WidgetはFlutterにおけるUI部品
  • Widgetは親-子の状態でツリー構造で構築される

画面を見て理解する

では、上記のポイントを抑えた上で実際にサンプルの画面を見てみましょう。

以下の画面はプロジェクトを作成し、flutter runを実行すると必ず出てくるデフォルトのサンプル画面です。

この画面のウィジェットは以下のような親子関係で構成されています。

ソースコードを見て理解する

それでは親子関係の概念がわかったところで、今度は具体的にソースコードを見て理解してみましょう。

上記のデフォルト画面は以下のソースコードで構成されています。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    // ★Aに該当するWidget群★
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // Bに該当するWidget群★
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      // Cに該当するWidget群★
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          // Dに該当するWidget群★
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      // Eに該当するWidget群★
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

では上記ウィジェット群ごとにどのような設定がされているのか確認してみましょう。

Aに該当するWidget群(MaterialApp)

MaterialAppは、その名の通りアプリにマテリアルデザインを適応します。

また、アプリ全体の状態の管理や、画面遷移などの機能提供をしてくれるWidgetです。

参考:MaterialApp class – material library – Dart API – Flutter

Bに該当するWidget群(Scaffold)

Scaffoldは、一般的なスマートフォンアプリケーションの雛形を提供してくれるWidgetです。

アプリ上部のバーや、右下に配置するボタンなどを決められた引数の設定を行えば勝手にUI上で表現をしてくれます。

参考:Scaffold class – material library – Dart API – Flutter API

Cに該当するWidget群(Center)

Scaffoldの引数であるbodyに対してCenter Widgetが設定されています。

Centerはレイアウトを設定するためのWidgetで、名前の通りCenterの子供に設定されたWidgetを画面中央に設置します。

参考:Center class – widgets library – Flutter API

Dに該当するWidget群(Text)

Text Widgetでは、画面上に文字列などのテキスト情報を表示します。

参考:Text class – widgets library – Dart API – Flutter

Eに該当するWidget群(FloatingActionButton)

FloatingActionButton Widgetでは画面右下にボタンを設置することができます。

今回のサンプルアプリでは、ユーザーがボタンを押した回数をカウントするために設置されているものになります。

参考:FloatingActionButton class – material library – Dart API

Widgetを使いこなすコツ

上記を見てわかる通り、Widgetはどのような機能を提供してくれて、利用する場合どのような引数を設定すべきなのかを理解すればWidgetを扱うことができます。

何よりも重要なのはFlutterの基本的なレイアウト概念である親子関係のツリー構造をしっかりと理解することです。

Widget自体は公式ページなどで使用方法を確認すれば問題なく使えると思いますので、まずはレイアウト構造の理解に勤めることがWidgetを使いこなすコツだと考えています。

ポイント
  • Widget自体は公式ページなどで使用方法を確認すればOK
  • まずはFlutterの基本的なレイアウト概念である親子関係のツリー構造をしっかりと理解することが大事

まとめ

本記事ではFlutterにおけるWidgetについて解説していきました。

レイアウト概念さえわかれば、Widgetを扱うのが簡単に感じでFlutterでのUI作成が非常に楽しくなりますよ。

是非この機会に挑戦してみてください。

最新のFlutterの勉強方法 まとめ

Flutterを入門から実践レベルまで一通り学習できる方法をまとめました。

Flutterの勉強方法を知る

Flutterを動画で学習する

Flutterを書籍で学習する