string(4) "blog"

CONTENTS

2021.6.15

Flutterでスマホアプリを開発してみる

written by tn1302
flutter

はじめに

みなさんはスマホアプリ開発の際にどのような環境を使っていますか?

各プラットフォーム毎にiOSはSwift+Xcode、AndroidはKotlin+AndroidStudioの組み合わせでアプリを作成するか、クロスプラットフォームフレームワークを使用して複数のプラットフォームで動作するアプリを作成するか悩ましいところです。
業務要件次第ではあるのですが開発工数の削減という観点ではクロスプラットフォームフレームワークでの開発に分があるのでこちらを選択することも多いのではないでしょうか。

クロスプラットフォームフレームワークにはReact Native、Cordova、Xamarinなど、多数の選択肢がありますが、今回は最近注目されているFlutterについて紹介してみたいと思います。

Flutterとは

FlutterとはGoogleが開発しているクロスプラットフォームのモバイルアプリフレームワークで、2018年に発表され2021/03 にバージョン2.0がリリースされました。
開発言語にDartを使用しているところや、UIをWidgetで構成するところなどが特徴です。

Dart言語について

Googleが開発したマルチパラダイムプログラミング言語で、型安全、型推論、Null安全などの最近のトレンドはカバーされています。
また、Nativeプラットフォームと、Webプラットフォームに対応しており1つのコードからネイティブアプリ、Webアプリのコンパイル&実行が可能です。

開発環境

Windows、Mac、Linux、ChromeOSでの開発が可能で、エディタはAndroid Studio、IntelliJ,、Visual Studio Code(以降、VSCodeと称する)を使用できます。
今回はMac+VSCodeで紹介いたします。

サンプルアプリの起動

環境構築が終わっていることが前提ですが、サンプルアプリの起動は簡単です。

1. コマンドパレットで「Flutter:New Application Project」を実行

2. プロジェクトを作成する親ディレクトリを選択

3. アプリ名を入力

4. プロジェクトが作成される

5. 右下のデバイス名を押下、表示されるデバイスリストからiPhoneを選択

6. iPhoneシミュレータが起動する

7. VSCode上でF5キーを押下するとビルドが開始される

8. サンプルアプリが起動する

画面の作成

FlutterではWidgetという部品を組み合わせて画面を作成します。

サンプルアプリ上では下記のように構造化されていますが、各クラスは全てWidgetクラスを基底に持っています。

MyApp
  build: MaterialApp
    home: MyHomePage
      build: Scaffold
        appBar: AppBar
        body: Center
          child: Column
            children: 
              Text
              Text
        floatingActionButton: FloatingActionButton

デザイン反映

スタイルの指定はWidgetへ直接行う方法と、ThemeDataを使用してアプリ全体のテーマを設定する方法の2種類があります。

例えば下記のようにスタイルを設定したThemeDataクラスをMaterialAppに渡すとアプリ全体に反映されます。

1. primarySwatch: Colors.blue を Colors.red に変更し保存

2. AppBarのColorがblueからredに変わる

サンプルコード


class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.red,  // Colors.blue => Colors.redへ変更
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

今回設定した「primarySwatch」はアプリ全体の配色を設定するプロパティです。

Colors.redは色のセットでソース(colors.dart)上では下記のように記載されています。

static const MaterialColor red = MaterialColor(
    _redPrimaryValue,
    <int, Color>{
       50: Color(0xFFFFEBEE),
      100: Color(0xFFFFCDD2),
      200: Color(0xFFEF9A9A),
      300: Color(0xFFE57373),
      400: Color(0xFFEF5350),
      500: Color(_redPrimaryValue),
      600: Color(0xFFE53935),
      700: Color(0xFFD32F2F),
      800: Color(0xFFC62828),
      900: Color(0xFFB71C1C),
    },
  );
static const int _redPrimaryValue = 0xFFF44336;

primarySwatchは渡された色のセットをThemeDataの各プロパティに展開するようです。

ThemeDataクラスのソースを見る限りでは下記のようになっていました。(抜粋)

primaryColor ??= isDark ? Colors.grey[900]! : primarySwatch;
primaryColorLight ??= isDark ? Colors.grey[500]! : primarySwatch[100]!;
primaryColorDark ??= isDark ? Colors.black : primarySwatch[700]!;
accentColor ??= isDark ? Colors.tealAccent[200]! : primarySwatch[500]!;
secondaryHeaderColor ??= isDark ? Colors.grey[700]! : primarySwatch[50]!;
textSelectionColor ??= isDark ? accentColor : primarySwatch[200]!;
textSelectionHandleColor ??= isDark ? Colors.tealAccent[400]! : primarySwatch[300]!;
backgroundColor ??= isDark ? Colors.grey[700]! : primarySwatch[200]!;
buttonColor ??= isDark ? primarySwatch[600]! : Colors.grey[300]!;

なお、ThemeDataでのstyleの指定はアプリ全体に反映されます。
例えばTextButtonの色をtextButtonThemeで指定すると全てのTextButtonの色は同一となるため、一部ボタンの色を変更したい場合は該当のTextButtonに直接Styleを設定する必要があります。

設計パターン

Flutterの状態管理の手法としていくつかあるようなのですが、BLoCパターンとProviderパターンについて軽く説明します。

BLoCパターン

  • Business Logic Componentの略
  • 状態管理手法の1つ、ビジネスロジックをコンポーネント単位で管理しやすくするためのパターン
  • 以前はGoogleが推奨していた

Providerパターン

  • package:Providerを使用
    • DI (Dependency Injection) 及び状態を管理するためのパッケージ
  • BLoCよりは考え方が簡単
  • 現在のGoogle推奨

終わりに

今回私が触った限りのFlutterのメリット・デメリットは下記となります。

メリット

  • 開発環境構築〜アプリ起動までのステップが少ない
  • コード修正後のリロードが早いので開発がサクサク進む
  • VSCodeの拡張機能が優秀(VSCode+simulatorで完結する)

デメリット

  • Dartの学習コストがかかる
  • 細かくデザイン適用するのであればWidget単位にStyleを指定する必要がある

言語がDartだったりWidgetってなに?と思ったり新しいことを学ばないと使いにくい印象でしたが、実際に触ってみるとVSCodeのFluttter拡張のお陰か思ったより学習コストは高くない印象ですので、

スマホアプリ開発時の選択肢として検討してみても良さそうです。

一覧に戻る
お問合わせ