目次

はじめに

本書の内容
Flutterとは
表記関係について

第1章 環境構築

1.1 VScodeのインストール
1.2 macOS
1.3 Windowsの環境構築

第2章 とりあえず作ってみる

2.1 プロジェクト作成
2.2 ディレクトリー構成
2.3 プロジェクトの実行
2.4 libディレクトリー

第3章 Todoアプリを作ってみる

3.1 アプリの機能とディレクトリー構成
3.2 アプリを作る

第4章 Reduxを使ってのState管理

4.1 Reduxの用語
4.2 Reduxの実装
4.3 Redux実装のまとめ
4.4 UIの実装
4.5 Reduxまとめ UI編

第5章 Riverpod

5.1 Provider
5.2 Riverpodでの実装
5.3 UIの実装
5.4 Riverpodまとめ

第6章 Firebase FireStoreとの連携

6.1 Firestoreの登録
6.2 Firestoreとの連携をする実装
6.3 UIの変更
6.4 FireStore連携まとめ

第7章 テスト

7.1 テストの種類
7.2 テストの追加
7.3 Todoアプリにテストを追加していく
7.4 テストまとめ

あとがき

はじめに

 本書で使用するDart/Flutterのバージョンは、以下になっています。発売日、ご購入された日によっては最新のバージョンではない可能性もございます。

 ・Dart 2.14.0

 ・Flutter 2.3.0-12

本書の内容

 本書では初めてFlutterを触る人、ちょっとだけ調べて使ってみたことある人向けの入門書です。Todoアプリの作成を通して、Stateの管理と外部サービスへの連携までを解説します。具体的な内容としては、基本的なFlutterの機能を使ったTodoアプリの作成、Reduxを使ったState管理をしたTodoアプリの作成、Riverpodを使ってのState管理をしたTodoアプリの作成、Riverpod + Firebase Cloud Firestore を用いた、外部サービスとの連携、以上の内容を解説しています。気になる内容だけ作っていってもらっても構いません。

 また、本書で作ったサンプルアプリは全てGitHub上で公開していますので、読み進めていくお供に実際のコードも読んで、動かしてみると理解も進むかと思います。

 サンプルアプリ:

 https://github.com/723gt/one_week_flutter

Flutterとは

 Flutterとはそもそもなんぞや、という方もおられるかと思います、知っている方は、この章は読み飛ばしてください。FlutterはGoogleが開発した、マルチプラットフォームのフレームワークです。2018年にFlutter1.0がリリースされ、2021年3月にはFlutter2.0がリリース、Android,iOSだけでなくWebアプリやネイティブアプリの開発もサポートされるようになりました。プログラミング言語Dartを使って開発することができ、Google Playストアにはすでに15万本以上のアプリがFlutterで開発され登録され、トヨタでも車載アプリケーションの開発に採用されています。

 そんなFlutterの特徴として

 ・HotReloadでコードの変更をすぐに反映できる(Fast Development)

 ・少ない差分で各プラットフォームのアプリを開発できる(Native Performance)

 ・Widgetと呼ばれるパーツを組み合わせることでUIを構築していくことができる(Expressive and Flexible UI)

 が挙げられます。

HotReloadでコードの変更をすぐに反映できる(Fast Development)

 エミュレーターや実機を使ってアプリの動作確認をしているときにエラーやバグ、「やっぱこうしたい」などの変更や修正を加えたとき、今までだと再度ビルドして実行する必要がありました。しかし、Flutterでは1度ビルドして実行すると、実行中にコードを書き換えてもリアルタイムでその変更を実行中のアプリに反映することが可能です。

少ない差分で各プラットフォームのアプリを開発できる(Native Performance)

 Android,iOSはもちろん、Webアプリとデスクトップアプリでも基本ひとつのコードを使って開発でき、プラットフォームごとでコードを書き換える必要が可能な限り少ないです(全くないわけではありません)。

Widgetと呼ばれるパーツを組み合わせることでUIを構築していくことができる(Expressive and Flexible UI)

 Googleが提唱するマテリアルデザインとiOSライクなCupertinoを使うそれぞれのWidgetや、アニメーションAPIを組み合わせることで、ハイクオリティなUIを簡単に作成することが可能です。

 その他にも、エディターへの強力なプラグインが提供されていることで開発が容易なことや、様々なOSでも共通の開発環境を構築できる点1などがあり、注目を浴びています。

表記関係について

 本書に記載されている会社名、製品名などは、一般に各社の登録商標または商標、商品名です。会社名、製品名については、本文中では©、®、™マークなどは表示していません。

1. 開発環境は2021 3/22現在でMacOS, Windows, Linux, ChromeOSがサポートされています(iOS向けのビルドにはMacが必要)。

第1章 環境構築

 まずは、Flutterで開発をしていくための環境構築をしていきます。今回は、macOSとWindowsでの環境構築を想定しています。

1.1 VScodeのインストール

 本書での開発には、VSCodeを使って開発していくことを想定してます。なので、まずはVSCodeのダウンロード・インストールを行います。VSCodeを使用しない方は、読み飛ばしていただいで構いません。

 1.VSCodeの公式サイトからインストーラーをダウンロードしてきます。1

 2.ダウンロードしたインストーラーを実行すれば、基本的にインストールは完了です。

 このふたつの手順でVSCodeのインストールはできましたが、Flutterを使う上ではプラグインを使用することが推奨されているので、これも入れていきます。

 3.VScodeを開き、プラグインの項目をクリックします。

図1.1: vscode

 4.プラグインの検索で「Flutter」と入力してプラグインを検索します。

図1.2: vscode_plugin

 5.インストールをクリックして、プラグインのインストールは完了です。

1.2 macOS

 macOSでのFlutter環境構築を進めていきます。

Flutterのインストール

 Flutterの本体をインストールしていきます。

 1.公式サイトからFlutterのSDKのzipファイルをダウンロードしてきます。2

 2.1でダウンロードしたzipファイルを展開します。

 このとき展開した場所がFlutterのpathになりますので、今回はユーザーの直下(/User/ユーザー名)に展開しました。

 3.展開ができたらFlutterのパスを通します。

 .bashrcや.zshrcなど、お使いのシェルの設定ファイルに、以下のFlutterのパスを記述します。

export PATH=$PATH:/Users/ユーザー名/flutter/bin

 このとき、flutterフォルダーにあるbinフォルダーを指定することを注意してください。その後 source ~/.bashrcsource ~/.zshrc を実行すればパスが通ったはずですので、確認してみましょう。

 ターミナル上でflutterのコマンドが使えればパスが通っているので、flutter doctor コマンドを実行してみましょう。このコマンドはflutterを使っていく上で環境構築ができているかを確認するコマンドなので、この章ではよく使っていきます。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter
(Channel stable, 2.2.3,
 on macOS 11.5.2 20G95 darwin-x64, locale ja-JP)
[!] Android toolchain
- develop for Android devices (Android SDK version 30.0.2)
× Cannot execute
/Library/Java/JavaVirtualMachines/1.6.0.jdk/Contents/Home/bin/java
to determine the version
[!] Xcode - develop for iOS and macOS
× Xcode installation is incomplete;
 a full installation is necessary for iOS development.
Download at: https://developer.apple.com/xcode/download/
Or install Xcode via the App Store.
Once installed, run:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.54.3)
[✓] Connected device (1 available)

! Doctor found issues in 3 categories.

 このようなメッセージが表示されれば、flutterのインストールとパスの通しは完了です!上のメッセージではXCodeとAndroid Studioの構築ができていないので、進めていきましょう。

XCode

 iOSのアプリを作っていく上では、XCodeのインストールが必須になりますので進めていきます。XCodeの構築はそこまで難しくないので、サクッと進めます。

 1.AppStoreで「XCode」と検索するとXCodeが出てきますので、インストールボタンをクリックします。

 2.ダウンロードとインスールが完了したら、1度XCodeを起動します。

 3.パッケージ管理システムのcocoapodsをインストール

 iOSのパッケージ管理をするcocoapodsをrubyのgemをインストールします。

gem install cocoapods

 これでXCodeの構築が完了しました。flutter doctorコマンドで確認してみましょう。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter
(Channel stable, 2.2.3,
on macOS 11.5.2 20G95 darwin-x64, locale ja-JP)
[!] Android toolchain
- develop for Android devices (Android SDK version 30.0.2)
× Cannot execute
/Library/Java/JavaVirtualMachines/1.6.0.jdk/Contents/Home/bin/java
to determine the version
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.54.3)
[✓] Connected device (1 available)

! Doctor found issues in 2 categories.

 これで残りはAndroid Studioだけになりました、

Android Studioのインストール

 残りは、Androidでの開発を進めていくために必要なAndroid Studioのインストールです。

 1.公式サイトからAndroid Studioのインストーラーをダウンロードしてきます。3

 2.ダウンロードができたらインストーラーを起動して、手順に沿ってインストールを進めます。

 3.インストールが完了したらAndroid Studioを起動します。

 4.起動ができたらwelcome画面からMore Actionをクリックした「SDK Manager」を選択します。

図1.3: mac_welcome

 5.SDK Manager画面に移動したら「SDK Tools」タブに移動して、以下のSDKを選択します。

図1.4: mac_sdk

 ・Android SDK Build-Tools

 ・Android SDK Command-line Tools(latest)

 ・Android Emulator

 ・Android SDK Platform-Tools

 ・Android SDK Tools (Obsolete)

 これらを選択してOKをクリックして、インストールが進みます。

 6.Android StudioとJavaのパスを通す

 flutterのパスを通したファイル(.bashrcや.zshrc)を開いて、以下を記述します。

export PATH=$PATH:/Applications/"Android Studio.app"/\
Contents/jre/jdk/Contents/Home/bin
export JAVA_HOME=/Applications/"Android Studio.app"/\
Contents/jre/jdk/Contents/Home/

 これを追記して保存したら、source ~/.bashrcsource ~/.zshrc を実行して完了です。

 それでは、flutter doctorを実行してみましょう。

$ flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter
(Channel stable, 2.2.3,
on macOS 11.5.2 20G95 darwin-x64, locale ja-JP)
[✓] Android toolchain
- develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] VS Code (version 1.54.3)
[✓] Connected device (1 available)

• No issues found!

 もし [✓] Android Studio (version 2020.3) の項目がチェックになっていなかったら、Androidのライセンスを承認します。といってもコマンドをひとつ実行して、質問に答えていくだけです。

$ flutter doctor --android-licenses

 コマンドを実行したらいくつか質問が出てくるので、 y を押していくと完了です。

試し読みはここまでです。
この続きは、製品版でお楽しみください。