『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にデプロイしてみたいと思います。できるかな？

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

1. 『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる（１）Windows10でFlutterをインストールしてAndroid実機で開発画面を表示
2. 『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる（２）Flutter on the webの設定（beta版）を行いNetlifyにデプロイ
3. 『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる（３）Firebaseの設定と一覧画面
4. 『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる（４）入力画面
5. 『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる（５）編集機能の実装
6. 『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実機を用いて開発するのがお勧めです。

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

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

参考： https://enjoypclife.net/2016/11/26/android-6-0-developer-options-usb-mtp-ptp/

この時点で flutter doctor すると、以下のようになります。

もし、deviceが見つからないよ、、、と言われたら、VisualStudioCodeの右下の方の、

No Device

となっているところをクリックして、SH-M07 を選択すると、上のように画面が変化します。

新規Flutterアプリを作成

今回、C:/flutter/　フォルダにFlutter SDKを保存しているため、それ以外の場所で”flutter create” を行う必要があります。

C:/f/ フォルダを作成し、VisualStudioCodeで開き、Ctrl+@でターミナル画面を開き、以下を入力します。

flutter create myapp

10秒くらいで作成できたようです。言われたとおりに、以下を入力します。

cd myapp
flutter run

しかし、この時点では、”No supporterd devices connected”　というエラーが出てしまい、Android実機でアプリが起動しません。

とりあえず、VisualStudioCodeをいったん閉じて、C:/f/myapp/ をVisualStudioCodeで開いて、さらに、

lib/main.dart

を開いてみてみます。

画面右下が、No Device　になっているので、Android実機（今回はSH-M07）からのUSBコネクタを一度外して、つけたりした後、そこをクリックして、"SH-M07″になるようにします。

“Ctrl+@"　でターミナル画面を開き、以下を入力します。

flutter run

2分くらい待つと、以下のような画面になります。

また、スリープしているAndroid実機（今回はSH-M07）を開くと、以下のような画面（ アプリの開発モード画面 ）が出ています。これでやっとHello Worldができたことになります。

以後は、

1. パソコンの方で、コードを変更して
2. 保存（"Ctrl + S"）し、
3. ターミナル画面で、『r』を押すと、
4. ホットリロードされ、Android実機の開発画面が自動で更新されます

これは一瞬でした！一瞬のリロードで本当にびっくりしました！また、

• 開発サーバを止めるときは、ターミナル画面で、『q』を押す

となります。

次は、Flutter for WebでNetlifyにデプロイしてみたい

2019年12月現在、Flutter for Webはbeta版だそうですが、とりあえず、デフォルトのアプリをWebアプリにして、Netlifyにデプロイしてみたいと思います。以下に記載してみました。

02.FlutterでWebアプリを作成（Flutter for Web）