CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2020/12/17 11:00

目次

ライブラリの利用

 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<MyHomePage> {
  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の構造と処理の流れ
図5:StatefulWidgetの構造と処理の流れ

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Flutterで始めるモバイルアプリ開発

もっと読む

著者プロフィール

  • WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。個人紹介主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしど...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5