【Flutter】Flutterのはじめかた

Flutter

2021/09/09

Flutter とは

Flutterは、Google が開発したフリーの SDK（Software Development Kit）です。 iOS や Android、Web など様々なプラットフォームのアプリケーションを 1 つのソースで開発することができます。

UI として Google が提唱しているマテリアルデザインのものが提供されているため、アプリのデザインも比較的やりやすいのではないかと思います。

Flutter の開発にはDart 言語を使用します。こちらも Google が開発したものですが、Java や C 系など他の言語の開発経験があれば問題なく習得できるかと思います。

環境構築

環境構築については別の記事にまとめてありますので、こちらを参考にしてください。このブログでは Visual Studio Code で開発を行う想定での説明となります。

プロジェクトの作成

以下のコマンドでプロジェクトを作成します。

$ flutter create [project-name]

プロジェクトは以下のディレクト、ファイルで構成されます。

ディレクト・ファイル	説明
.idea/	IntelliJ IDEA 開発ツールの設定情報
android/	Android アプリの生成に必要なファイル類
build/	ビルド結果
ios/	iOS アプリの生成に必要なファイル類
lib/	ここにアプリケーションのファイルを作成
lib/main.dart	メインとなるアプリケーションファイル
test/	ユニットテスト用
web/	Web アプリケーションのビルド結果
.metadata	Flutter プロジェクトの設定ファイル
.packages	パッケージ情報
pubspec.lock	Pub（Dart のパッケージマネージャー）が利用するファイル
pubspec.yaml	Pub が利用するファイル

アプリケーションのソースは、libフォルダに作成していきます。初期作成時は、main.dartの内容がアプリケーションとして起動します。

アプリケーションの起動

以下のコマンドでアプリケーションを起動します。起動前にデバイスを起動する必要があります。

$ flutter run

アプリケーションの起動後は、ターミナルに特定のキーを入力することで例えばホットリロードといった処理を実行できます。キーの説明についてはターミナルに表示されますのでそちらを参考にしてください。

ウィジェット

Flutter の UI パーツはウィジェットと呼ばれ、これらを組み合わせることでアプリケーションを構築します。

まずはmain.dartを以下のようにしてみます。

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'My Application',
          ),
        ),
        body: Center(
          child: Text(
            'はじめてのFlutterアプリ',
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(
            Icons.favorite,
          ),
          onPressed: () => {},
        ),
      ),
    ));

Flutter のアプリケーションは、以下のようなツリー構造になります。

上記の例では、親としてMaterialAppを指定しています。マテリアルデザインのアプリを開発する場合は、このウィジェットを使用します。 MaterialAppにはhomeというプロパティがあり、アプリ起動時にどの画面（ウィジェット）を表示するかを設定します。今回指定しているのはScaffoldです。つまり、Scaffoldは、MaterialAppの子となります。

Scaffoldは、appBar、body、floatingActionButtonをプロパティに持つ、レイアウト用のウィジェットです。 CodePen のサンプルで見ていただくと、Scaffoldがどのようなレイアウトかわかっていただけると思います。 Scaffoldの各プロパティにはそれぞれ、AppBar、Center、FloatingActionButtonというウィジェットを設定しています。つまり、これらはScaffoldの子となります。

以降も考え方は同じのため説明は割愛します。ここでは Flutter はウィジェットをツリー構造として組み合わせていくということが分かればよいかと思います。

どのようなウィジェットがあるかはこちらを参考にしてください。

StatelessWidget

Flutter では、ウィジェットをまとめて 1 つのウィジェットとすることができます。言い換えると、ウィジェットを組み合わせることで別のウィジェットを作ることができます。

試しに、上記のScaffold以下をMyHomeとしてまとめてみます。

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: MyHome(),
    ));

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'My Application',
        ),
      ),
      body: Center(
        child: Text(
          'はじめてのFlutterアプリ',
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(
          Icons.favorite,
        ),
        onPressed: () => {},
      ),
    );
  }
}

ウィジェットを定義するには、今回使用しているStatelessWidgetか後述するStatefulWidgetを継承したクラスを作成します。 StatelessWidgetは Stateless とあるように状態を持たないウィジェットの定義に使用します。

StatelessWidgetではbuildメソッドをオーバーライドする必要があり、構成するウィジェットを戻り値として設定します。

class Widgetクラス extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

buildメソッドはBuildContextを引数に持ちます。

StatefulWidget

StatefulWidgetは状態を持ったウィジェットを定義する際に使用します。

class Widgetクラス extends StatefulWidget {
  @override
  Stateクラス createState() => Stateクラス()
}

class Stateクラス extends State<Widgetクラス> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

StatefulWidgetでは、Widget クラスと State クラスを定義します。 Widget クラスのcreateStateメソッドで State クラスのインスタンスを作成し、State クラスのbuildメソッドで構成するウィジェットを設定します。

以下はボタンを押すことにより、ボタンの色を変化させる例です。

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: MyHome(),
    ));

class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  Color _color = Colors.blue;
  void _changeColor() {
    setState(() {
      _color = Colors.red;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'My Application',
        ),
      ),
      body: Center(
        child: Text(
          'はじめてのFlutterアプリ',
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(
          Icons.favorite,
        ),
        backgroundColor: _color,
        onPressed: _changeColor,
      ),
    );
  }
}