スポンサーリンク

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

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

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

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

開発環境

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のインストールとプラグイン(2つ)のインストール(不要)

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

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

  • 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)

スポンサーリンク