1.1　Flutterの概要

　Flutterは、Googleが開発したオープンソースのアプリケーションフレームワークです。

　アプリケーション開発は「AndroidであればJavaやKotlin」「iOSであればObjective-CやSwift」「WebアプリであればPHP,Ruby」などのように、動作させるプラットフォーム毎に別の言語を学習する必要があり、開発コストが高くなります。

　しかし、近年において、クロスプラットフォーム開発フレームワークが登場しました。これは、ひとつの言語のみで、複数のプラットフォームに対応したアプリケーションを開発できるツールです。クロスプラットフォーム開発フレームワークのひとつがFlutterです。他には、Facebookが開発したReactNativeやMicrosoftが開発したXamarinなどがあります。

1.2　Flutterの特徴

1.2.1　簡単なUI設計

　マテリアルデザインに沿ったUIを簡単に設計できます。「マテリアル＝物質的な」という意味があるように、マテリアルデザインとは「物理的な法則に沿ったデザイン」を指します。現実世界のルールである光や影、奥行き、重なりを取り入れたデザインとなっており、Googleが発表しているWebサイトやアプリに多く用いられています。

　マテリアルデザインに沿った、Google製のような美しいアプリケーションを簡単に作成できます。

1.2.2　開発言語 Dart

　Googleによって開発されたプログラミング言語です。これは、JavaScriptの替わりとなる言語として作られました。JavaScriptやJavaと記法が似ており、どちらかの言語を使ったことがある方には、始めやすい言語です。

1.2.3　ホットリロード対応

　Flutterにはホットリロードという、アプリの実行中にコードの変更をすばやく反映させる機能があります。

　アプリの実行中にコードを変更した場合、通常は再ビルドする必要があり、反映するのに数十秒から数分かかります。しかしホットリロードを使うと、コードを変更してもアプリを停止することなく反映できるため、格段にアプリの開発効率が向上します。

　次の画像は、「Hello World!」から「Flutter」と文字をプログラム上で変更する例です。文字を変更してプログラムを保存すると、1秒後には、画像にあるようにアプリの表示が更新されました。通常であれば数十秒から数分かかるプログラムの反映が数秒でできるので、効率よくプログラムを作成できます。

FuchsiaとFlutter

　Googleが開発しているOSにFuchsia（フクシア）というものがあります。2016年8月にGitHub上で公開され、その存在が明らかになりました。特徴としては、スマートフォン、タブレット、PCなど、幅広いデバイス上で起動させることができ、Flutterで作成したアプリを動作させることができます。2021年5月に「Nest Hub」向けに配信され、話題になりました。今後の動向に注目が集まりそうですね。

1.2.4　ReactNativeやXamarinとの比較

　他のクロスプラットフォーム開発環境と、Flutterを比較してみます。

表1.1: 他のマルチクロスプラットフォームとの比較

対応プラットフォーム	Flutter/Dart	ReactNative/JavaScript	Xamarin/.NET
Android	○	○	○
iOS	○	○	○
デスクトップ（Win）	○	-	○
デスクトップ（Mac）	○	-	○
Web（フロントエンド）	○	-	○
Web（バックエンド）	-	-	-

　デスクトップアプリも作成できるため、Xamarinと並んで、クロスプラットフォーム開発環境の対応数としては最多です。

1.3　Firebase

　Firebaseは、Googleが運営するBaaS（Backend as a service）です。BaaSとは、サーバーサイドのプログラミングが不要で、データベースや認証機能、プッシュ通知などを行ってくれるサービスです。本書では「Firestore Database」という、クエリと自動スケーリング機能を兼ね備えたリアルタイムデータベースを使用します。

　Flutterで開発するための環境を構築します。インストールするものは次のとおりです。

　・DartSDK（version:2.13.1）

　・FlutterSDK（version:2.2.2）

　・Android Studio（version:4.2.1）

　・Xcode（iOSの開発を行う場合）

2.1　DartSDKとFlutterSDKの入手方法について

　DartSDKの入手方法は3種類あります。

　１．Homebrewなどのパッケージ管理ツールを使用してインストールする。

　２．Zip等で配布されているSDKをダウンロードする。

　３．Flutterに付属されているDartSDKを利用する（Flutter 1.21以降のバージョンのみ可能）。

　また、FlutterSDKの入手方法は2種類あります。

　１．Zip等で配布されているSDKをダウンロードする。

　２．fvmなどのFlutterバージョン管理ツールを利用し、ダウンロードする。

　プロジェクト毎にバージョンを変更できるfvmの利用が便利ですが、少し手順が複雑です。本書では、Zipで配布されているFlutterSDK利用した手順を紹介します。

fvmを使ってみたい方向けに、この章の最後にfvmを利用した導入手順を記載しますので、興味のある方はそちらも参考にしてください。

2.2　環境開発構築手順

　WindowsとMacのインストール手順が異なるので、順に説明します。

2.2.1　Windows版

　公式のFlutterのサイト¹にアクセスします。Flutter SDKのダウンロードリンクをクリックし、ダウンロードします。

※執筆時点では、フォルダー名が「flutter_windows_v2.2.2-stable.zip」となっております。

　ダウンロードしたZipファイルを展開し、中身のFlutterフォルダーを「C:\Users\ユーザーフォルダー」の下などに配置します。

　「コントロールパネル > ユーザーアカウント > ユーザーアカウント > 環境変数の変更」をすると、次のような画面が表示されます。「Path」と書かれた行を選択した上で、編集というボタンを押します。

　先ほど展開したZipフォルダーのパスを設定します。「編集」をクリックします。本書と同じ手順であれば、「C:\Users\ユーザーフォルダー\flutter\bin」となります。設定が完了したらOKをクリックし、画面を閉じます。

　コマンドプロンプトを実行し、ダウンロードしたFlutterのフォルダーに移動します。本書と同じ手順であれば、次のコマンドで移動できます。

  > cd C:¥Users¥ユーザーフォルダー¥flutter¥

　次のコマンドを実行し、Flutterのバージョンを切り替えます。

  > git checkout refs/tags/2.2.2

　Windows版のFlutter SDKの準備は完了です。

2.2.2　Mac版

　公式のFlutterのサイト²にアクセスします。Flutter SDKのダウンロードリンクをクリックし、ダウンロードします。

※執筆時点ではフォルダー名が「flutter_macos_v2.2.2-stable.zip」となっております。

　ホーム直下に「development」フォルダーを作成し、ダウンロードしたzipファイルを展開しましょう。

  $ mkdir ~/development

  $ cd ~/development

  $ unzip ~/Downloads/flutter_macos_v2.2.2-stable.zip

　「~.bashrc」ファイルにパスを書き込みます。※zshを使用している方は「~.zshrc」に読み替えてください。

  $ vim ~/.bashrc

  #ファイルの一番下に書き込む。USERと書かれた部分には実行ユーザー名が入ります。

  export PATH="$PATH:/Users/${USER}/development/flutter/bin"

　pathを定義したファイルを再読み込みします。※zshを使用している方は「~/.zshrc」に読み替えてください。

  $ source ~/.bashrc

　ターミナル上でダウンロードした、Flutterのフォルダーに移動します。本書と同じ手順であれば、次のコマンドで移動できます。

  $ cd ~/development/flutter

　Flutterのバージョンを切り替えます。

  $ git checkout refs/tags/2.2.2

　Mac版のFlutter SDKの準備は完了です。