『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる（１）Windows10でFlutterをインストールしてAndroid実機で開発画面を表示

2019年12月31日2020年1月5日

前から欲しかったのですが、買ってしまいました。

この本は、Flutter初めての人が、Firebaseを利用したAndroidアプリ（iOSアプリも可能）である『貸し借りメモアプリ』を作成する手順が記載されています。この本を理解できれば、以下のことができるようになるらしいです。少しお高いですが、ページ数も少なく読みやすいです！

FlutterによるAndroidアプリ作成
FlutterでFirebaseを利用する方法
CRUD（Create, Read, Update, Delete）
ラジオボタン
日付選択画面
複数の人数でデータを共有
多言語化
アプリのアイコン
スプラッシュ画面

上記の本は、Androidアプリの作り方が記載されているのですが、少しだけ改変して、WEBアプリ版を作成して、Netlifyにデプロイしてみたいと思います。できるかな？

Contents

1. 『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる目次
2. 注意点：最初はエミュレータの設定が超難しいので、Android実機を接続して開発するのがお勧めです
3. 開発環境
4. Flutter SDKのダウンロード
5. Windowsの環境変数にflutterのPATHを通す
6. VisualStudioCodeでflutter doctor コマンドを実行して環境チェック
7. AndroidStudioのインストールとプラグイン（２つ）のインストール（不要）
8. VisualStudioCodeに拡張機能Flutterをインストール
9. 開発用画面チェック用としてAndroid実機（SH-M07）を設定（最初はエミュレータより実機がお勧め！）
10. 新規Flutterアプリを作成
11. 次は、Flutter for WebでNetlifyにデプロイしてみたい

『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる目次

注意点：最初はエミュレータの設定が超難しいので、Android実機を接続して開発するのがお勧めです

2019年9月に、Windows10で、Flutterのインストールの設定を行ったのが以下の記事ですが、エミュレータを動かすまでの設定がとにかく大変でしたので、最初は、Android実機をつなげて設定（開発者オプションを有効にする→USBデバッグを有効にする）するのが一番お勧めです。

Windows10でFlutterでHelloWorld(2019年9月)

開発環境

Panasonic CF-RZ6
Windows10 Pro (1803)
git version 2.20.1.windows.1
VisualStudioCode 1.41.1
AndroidStudio 3.5

gitのインストールについては、こちらのサイトが分かりやすいです。

今回構築した環境

Flutter v1.12.13+hotfix.5

Flutter SDKのダウンロード

以下のサイトへ行き、SDKをインストールするためのZIPファイル（約650MB）をダウンロードして展開し、中身のflutter/ フォルダを、C:/ 直下にコピーします。
https://flutter.dev/docs/get-started/install/windows

ダウンロード時間中に、System requirementsのところを見てみると、以下が必要と書いてあります。

Windows PowerShell 5.0以降
Git for Windows 2.x (Use Git from the Windows Command Promptオプション)

1分くらいでダウンロードが終了するので、ZIPファイルをダブルクリックして開き、中のflutter/ フォルダを、そのまま、C:/直下にドラッグ＆ドロップします。

なんと1.54 GBもあります。コピーするだけで1時間くらいかかりそうです。他のことをします。恐ろしや、、、

コピーが終了したら、C:/flutter/　フォルダを開き、flutter_console.bat をダブルクリックして実行します。

Windows Defenderの警告画面が出ますが、『詳細情報』＞『実行』の順にクリックして実行します。

以下のような画面が出てきます。この画面を表示する意味はよくわかりません。次に進みます。

Windowsの環境変数にflutterのPATHを通す

Windowsの左下の検索ボタンをクリックして、『env』と入力し、『環境変数を編集』をクリック

『環境変数』ウィンドウが開くので、上の方の『xxxのユーザー環境変数(U)』の中の、『Path』をクリックして選択状態にしてから、『編集』をクリック

『環境変数名の編集』ウィンドウが開くので、『新規』をクリック

C:\flutter\bin と記載して、OK　をクリック。その後、もう1回、OK　をクリック。

結構疲れましたが、これで、cmd.exeやPowershellでflutter コマンドが使用できるようになるそうです。（ここら辺を自動でやってくれると助かるのですが、、、）

VisualStudioCodeでflutter doctor コマンドを実行して環境チェック

AndroidStudioでFlutterアプリを作成する方法が一般的らしいのですが、個人的にVisualStudioCodeが好きなので、VisualStudioCode内でcmd.exeを使用する方法でやってみます。

C:/flutter/ をVisualStudioCodeで開き、Ctrl+@でターミナル画面を開き、以下を入力します。

flutter doctor

Android licensesに同意してくださいとか、いろいろ言われるので、指示通りに進めていきます。

flutter doctor --android-licenses
// 何か聞かれたら、y + Enter

なんか、全部で5回くらい、 y + Enter を繰り返した気がします。

AndroidStudioのインストールとプラグイン（２つ）のインストール（不要）

https://developer.android.com/studio/ へ行き、AndroidStudioのインストーラーをダウンロードして、手順に従ってインストールします。

私の場合は、過去に、AndroidStudio 3.5 をインストールしていましたので、AndroidStudioを起動し、以下の画面で２つのプラグインをインストールします。

Flutterプラグイン
Dartプラグイン

ちなみに、VisualStudioCodeで開発を行う場合は、AndroidStudioのプラグインをインストールしなくてよいそうです（参考サイト）。

一応、 https://i-doctor.sakura.ne.jp/font/?p=41098 にAndroiStudioのプラグインのインストール方法を記載しておきましたので、もしよろしければご覧ください。

VisualStudioCodeに拡張機能Flutterをインストール

VisualStudioCodeの画面左側の上から4番目のアイコン”Extensions”をクリック

検索画面に flutter と入力して、Flutter拡張機能をクリックしてインストール

この時点で、 flutter doctor を入力すると、以下のようになっています。

開発用画面チェック用としてAndroid実機（SH-M07）を設定（最初はエミュレータより実機がお勧め！）

私の手元に、

があったので、それを使うことにしました。

エミュレータは設定が非常に面倒なので、最初はAndroid実機を用いて開発するのがお勧めです。

手順は以下のようになります。

Androidスマホの【設定】アプリを開いて下部にスクロールし、（【システム】＞）【端末情報】をタップして開きます。
【ビルド番号】を数回タップすると【これでデベロッパーになりました！】と表示が出ます。これで【設定】アプリに【開発者向けオプション】が表示されるようになります。
『設定』＞『システム』＞『開発者向けオプション』で、『USBデバッグ』のところを『ON』にします。
AndroidスマホをUSBケーブルでパソコンに接続。
Androidスマホに、『USBデバッグを許可しますか？』の画面が出てくるので、再度、OK　を押す。