FlutterのUIウィジェットを理解するための基本を知ろう！

Flutterで始めるモバイルアプリ開発 第3回

ライブラリの利用

　Flutterに限らず、アプリを開発する際には、既存のさまざまなライブラリを使ってコードを記述していきます。Flutterでは、ライブラリはpubspec.yamlで管理します。そして、Flutterの基本ライブラリであっても例外ではなく、リスト1のようにsdkに定義します。

［リスト1］pubspec.yamlでの利用ライブラリの宣言（pubspec.yamlからの抜粋）

dependencies:
  flutter:
    sdk: flutter

　自分で定義したライブラリをコード内で利用する場合には、リスト2のようにimportを使って宣言します。

［リスト2］ライブラリを使う時のimport宣言（lib/main.dartからの抜粋）

import 'package:flutter/material.dart';

　今回は、pubspec.yamlの記述方法やライブラリの宣言方法については詳しく説明しませんが、次回以降のDart言語の説明で合わせて説明します。

アプリケーションのプログラム構造について

　Flutterの基本がわかったところで、続いてプログラム構造を見ていきます。

プログラム構造

　前回作成したサンプルアプリケーションはFlutterでの基本的なプログラム構造を理解するための要素がつまっています。そのソースコード（リスト3）を使って解説していきます。

［リスト3］Flutterのサンプルプログラムのコード（lib/main.dartからの抜粋）

import 'package:flutter/material.dart';

//  （1） プログラムの開始
void main() {
  runApp(MyApp());
}

//  （2） アプリケーションを定義
class MyApp extends StatelessWidget {

  // （3） アプリケーション全体の作成
  Widget build(BuildContext context) {
    return MaterialApp(
      // （4） 初期画面のウィジェット
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
// （5） 画面の定義
class MyHomePage extends StatefulWidget {
  // （省略）
}
// （省略）

　Flutterでは（1）のようにプログラムを開始するにはmain()を定義する必要があります。そして、runAppで指定するアプリケーションを起動します。アプリケーションとして指定するMyAppも、（2）のようにウィジェットとして定義する必要があります。そして、その中で前述したMaterialAppは（3）のようにさらに子ウィジェットとして作成しています。

　また、StatelessWidgetの継承クラスなので、buildメソッドで画面作成を定義しています。先ほどアプリケーション全体がMaterialAppであると説明しましたが、Flutterではアプリケーション全体であっても、1つのウィジェットとして管理する仕組みになっています。

　そして、（4）のようにデフォルトの画面を定義するMaterialAppのhomeプロパティに（5）で定義するMyHomePageウィジェットを指定しています。MyHomePageはStatefulWidgetを継承したクラスとして作成しているためにステートを管理するクラスになります。ステートを管理するには、リスト4のようにします。

［リスト4］StatefulWidgetを定義するコード（lib/main.dartからの抜粋）

// （省略）
class MyHomePage extends StatefulWidget {
  // （省略）
  // （1） ステートを管理する部品の定義
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
// （2） 更新が必要なことを通知する
class _MyHomePageState extends State {
  int _counter = 0;

  void _incrementCounter() {
    // （3） 更新が必要なことを通知する
    setState(() {
      _counter++;
    });
  }

  @override
  // （4） 更新されるウィジェットの作成
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(
            // （省略）
          ),
          body: Center(
            // （省略）
          ),
          floatingActionButton: FloatingActionButton(
            // （5） ボタンを押した時の処理
            onPressed: _incrementCounter,
            // （省略）
          ),
        );
  }
}

　StatefulWidgetでは、buildメソッドで直接ウィジェットを作成しないかわりに、（1）のようにcreateStateメソッドを使って、状態の管理とその状態に依存する表示を定義するStateというクラスを継承したクラスを作成します（2）。

　StatefulWidgetはStatelessWidgetに比べて多少面倒な処理が必要になります。StatefulWidgetではわざわざ2つのクラスに分けて管理するにはFlutter内部での管理構造に理由があるのですが、ここではStatefulWidgetを継承してクラスを作る場合の流れだけ理解してもらえればまずは問題ありません。

　Stateを継承したクラスでは、変数の値を変更する際には、（3）のようにsetStateメソッド内で処理を行います。このようにすることで、画面更新が必要になることをフレームワーク側に通知します。そして、フレームワーク側では画面更新を行うためにbuildメソッド（4）を実行します。

　そして、FloatingActionButtonというウィジェットが押された時には、_incrementCounterメソッドが実行され、（3）setStateを実行します。すると再度buildメソッドが実行され、ウィジェットの作成から更新までがおこなれます。この構造と流れを図で示したものが図5です。

図5：StatefulWidgetの構造と処理の流れ