プログラミング

Windows + VSCodeでFlutter環境作成

2020-03-18




会社でSwiftUIがなんちゃらと言ってるんですけど、私のところにmacはない。
じゃあ自宅にmac買う?
とググってみると、好きでもないのに誰が買うかぁー!!というお値段。
ほんとmacって高いですよねぇ。。。
LinuxでiOS開発できるようにならないかな。。。

んで、それだったらFlutterやってみようかな?と思い立ち。
会社のPCにFlutter環境作って遊ぼうとしたらちょっとハマったのでメモリます。

環境

こんな感じ。
PCの構成詳細はこちら

PC Windows10(CPU:AMD Ryzen5 2400G)
Flutter SDK v1.12.13 + hotfix.8
Android Studio v3.6.1
Android SDK Tools v26.1.1
Visual Studio Code v1.42.1

VSCodeは各自インストールしてください。
※開発はAndroid Studioでもできます
※今回の説明はVSCodeについてのみ

AMD CPUの場合

Ryzen以前のCPUはエミュレーターが使えません。
実際に動かすにはAndroid端末実機が必要になります。

WHPXのインストール

AMDでエミュレーターを使うためのツールが必要です。
Windowsで「機能の有効化」を検索。
Windows ハイパーバイザープラットフォームにチェックを入れてインストールします。

インストール完了したら、CMDでsysteminfoを実行。
こんなメッセージが出ればOKです。

もしこんな表示が出たら、BIOSで「ファームウェアで仮想化」のところを有効に設定する必要があります。
BIOSはマザーボードによって異なるのでググってみてください。

Flutter SDKインストール

フォルダごと置いてPathを通すだけ。

ダウンロード

公式サイトからSKDをダウンロードします。

Pathを通す

zipを解凍したら、flutterフォルダを任意の場所に置いてPathを通します。
今回はここに置きました。

flutterにはdoctorという環境チェックをしてくれるコマンドがあります。
実行してみると…

Xや!マークがついている箇所は問題あり。
上から順番に解決していきます。

Android Studioインストール

開発をVSCodeで行う場合もインストールします。

ダウンロード

公式からダウンロード。

インストール

ダウンロードしたexeを実行します。
そのまま素直にインストールすればOKです。

初期設定

初めて起動するとこんな画面が。
Nextをクリック。

Customを選択します。

そのままNextをクリック。

好きなテーマを選択。

Android Virtual Deviceにチェックを入れます。
CPUがIntelの人はHAXMもチェックしてください。

エミュレータに割り当てるRAM。
たぶん4GB~8GBくらいあれば十分です。
※適当に設定しすぎた

もろもろインストールが始まるので待ちましょう。

問題なく完了すると、Android Studioが起動します。

AVBの設定

右下のConfigure>AVB Managerをクリックします。

デフォルトでDeviceが用意されていると思うので、△マークをクリック。
※でない場合はCreate…で作成します

エミュレーターが起動すればOKです。
確認できたらエミュレーターは閉じておきます。

エミュレーターが起動しない場合

Intel CPU

Configure>SDK Manager>SDK ToolsでHAXMがインストールされているか確認してください。

AMD CPU

先述「AMD CPUの場合」を参照。

プラグイン追加

Configure>pluginsを選択します。
左上の検索ボックスに「Flutter」と入力してインストール。

こんなのが出たらYes。

Dartは自動でインストールされます。

VSCodeの設定

本体はインストール済みとします。

プラグイン追加

Flutterをインストール。
Dartも一緒に入ります。

Flutter Widget Snippetsも追加します。

Android Toolsの追加

ここまで終わったら、もう一度flutter doctorをかけてみます。

Android license status unknownと出てますね。
これを解消するには以下のコマンドを実行。
なのですが。

これだとエラーになります。。。

Android\sdk\toolsがないと言われてますが、Android Studio v3.6以降はtoolsが廃止されたとのこと。
じゃーどうすんのか。

Googleによると、toolsの最新は26.1.1
なので、v26.1.1を落としてきます。

zipを解凍するとtoolsというフォルダがあるので、こいつを先ほどのエラーに書いてあった場所に置きます。
私の場合はC:\Users\hazhikko\AppData\Local\Android\sdk\tools

そしてもう一度実行してみると…?
今度は通りました。

全部yを押して承認します。
たぶん7回。
以下のメッセージが出たら完了です。

んで、さらにdoctorをかけると…

エラーはほとんどなくなりました。
Connected deviceと出てますが、これは後回しでOK。

Flutterを動かしてみる

サンプルコードがあるのでそのまま実行できます。

プロジェクトの作成

VSCodeでFlutterのプロジェクトを作成します。

F1を押して、Flutterと入力>New Projectを選択。

プロジェクトの名前を入力。

作成場所を選ぶと、自動でプロジェクトが開きます。
最初はエラーが出ますが、そのうち収まるのでしばらく待ちます。

右下のNo Deviceをクリックします。

作成済みのエミュレーターを選択します。

実行

すでにサンプルコードが記載されているので、このまま起動してみます。

こんな感じで処理が始まります。
初回はめちゃくちゃ時間かかるのでしばらく待ちます。
私の環境だと10分かかりました。

エミュレーターでアプリが起動しました。
+ボタンを押すと1ずつカウントアップします。

 

hot reload

先ほどの動画。
何もしてないのに、途中から5ずつカウントアップになりましたね。

Flutterですごいのが、hot reloadとhot restart機能。
なんと、エミュレーターを起動したままでコードの更新を反映できるんです。

コードを書き換えて保存。

ターミナルで以下の表示になっているはずなので、rを入力すると画面が更新されます。
アプリの再起動が必要な場合は大文字Rを入力。

エミュレーターって起動に時間がかかるので、再起動なしだとサクサク開発できそう。

コードはちょっと…だけど

この手のアプリって何かしらレイアウト用ファイル作るもんだと思ってましたが、Fulutterは全部コードで書くようです。
へぇへぇへぇー。

ただ、このコードが。。。
Python書く人間からしたらカッコ地獄で。。。

ここのを書いてみたんですけど

どんだけカッコ入れ子になってんだよ!
数合わない時に調べるのめんどくさいわ!!

Python好きなのってカッコから解放されるからなんですよね。。。

ただ、hot reloadは便利そうだし、iOSもこれで作れたら便利だし。
とりあえず何か動くもの作ってみようと思いますー。

-プログラミング
-,

© 2024 そんなこと猫でもできる Powered by AFFINGER5