Windows + VSCodeでFlutter環境作成

会社で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です。

>systeminfo
・・・
Hyper-V の要件:         ハイパーバイザーが検出されました。Hyper-V に必要な機能は表示されません。
・・・

>systeminfo

・・・

Hyper-V の要件: ハイパーバイザーが検出されました。Hyper-V に必要な機能は表示されません。

・・・

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

Hyper-V の要件:         VM モニター モード拡張機能: はい
ファームウェアで仮想化が有効になっています: いいえ
第 2 レベルのアドレス変換: はい
データ実行防止が使用できます: はい

Hyper-V の要件: VM モニターモード拡張機能: はい

ファームウェアで仮想化が有効になっています: いいえ

第 2 レベルのアドレス変換: はい

データ実行防止が使用できます: はい

Flutter SDKインストール

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

ダウンロード

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

Pathを通す

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

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

>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.12.13+hotfix.8, on Microsoft Windows [Version 10.0.18362.720], locale ja-JP)
[X] Android toolchain - develop for Android devices
X Unable to locate Android SDK.
Install Android Studio from: https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK components.
(or visit https://flutter.dev/setup/#android-setup for detailed instructions).
If the Android SDK has been installed to a custom location, set ANDROID_HOME to that location.
You may also want to add it to your PATH environment variable.
[!] Android Studio (not installed)
[!] VS Code (version 1.42.1)
X Flutter extension not installed; install from
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
! No devices available
! Doctor found issues in 4 categories.

>flutter doctor

Doctor summary (to see all details, run flutter doctor -v):

[√] Flutter (Channel stable, v1.12.13+hotfix.8, on Microsoft Windows [Version 10.0.18362.720], locale ja-JP)

[X] Android toolchain - develop for Android devices

X Unable to locate Android SDK.

Install Android Studio from: https://developer.android.com/studio/index.html

On first launch it will assist you in installing the Android SDK components.

(or visit https://flutter.dev/setup/#android-setup for detailed instructions).

If the Android SDK has been installed to a custom location, set ANDROID_HOME to that location.

You may also want to add it to your PATH environment variable.

[!] Android Studio (not installed)

[!] VS Code (version 1.42.1)

X Flutter extension not installed; install from

https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[!] Connected device

! No devices available

! Doctor found issues in 4 categories.

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をかけてみます。

>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.12.13+hotfix.8, on Microsoft Windows [Version 10.0.18362.720], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
X Android license status unknown.
Try re-installing or updating your Android SDK Manager.
See https://developer.android.com/studio/#downloads or visit https://flutter.dev/setup/#android-setup for detailed instructions.
[√] Android Studio (version 3.6)
[√] VS Code (version 1.42.1)
[!] Connected device
! No devices available
! Doctor found issues in 2 categories.

>flutter doctor

Doctor summary (to see all details, run flutter doctor -v):

[√] Flutter (Channel stable, v1.12.13+hotfix.8, on Microsoft Windows [Version 10.0.18362.720], locale ja-JP)

[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)

X Android license status unknown.

Try re-installing or updating your Android SDK Manager.

See https://developer.android.com/studio/#downloads or visit https://flutter.dev/setup/#android-setup for detailed instructions.

[√] Android Studio (version 3.6)

[√] VS Code (version 1.42.1)

[!] Connected device

! No devices available

! Doctor found issues in 2 categories.

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

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

>flutter doctor --android-licenses
Android sdkmanager tool not found (C:\Users\hazhikko\AppData\Local\Android\sdk\tools\bin\sdkmanager).
Try re-installing or updating your Android SDK,
visit https://flutter.dev/setup/#android-setup for detailed instructions.

>flutter doctor --android-licenses

Android sdkmanager tool not found (C:\Users\hazhikko\AppData\Local\Android\sdk\tools\bin\sdkmanager).

Try re-installing or updating your Android SDK,

visit https://flutter.dev/setup/#android-setup for detailed instructions.

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

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

>flutter doctor --android-licenses
Warning: File C:\Users\hazhikko\.android\repositories.cfg could not be loaded.
7 of 7 SDK package licenses not accepted. 100% Computing updates...
Review licenses that have not been accepted (y/N)?

>flutter doctor --android-licenses

Warning: File C:\Users\hazhikko\.android\repositories.cfg could not be loaded.

7 of 7 SDK package licenses not accepted. 100% Computing updates...

Review licenses that have not been accepted (y/N)?

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

All SDK package licenses accepted

1	All SDK package licenses accepted

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

>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.12.13+hotfix.8, on Microsoft Windows [Version 10.0.18362.720], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[√] Android Studio (version 3.6)
[√] VS Code (version 1.42.1)
[!] Connected device
! No devices available
! Doctor found issues in 1 category.

>flutter doctor

Doctor summary (to see all details, run flutter doctor -v):

[√] Flutter (Channel stable, v1.12.13+hotfix.8, on Microsoft Windows [Version 10.0.18362.720], locale ja-JP)

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)

[√] Android Studio (version 3.6)

[√] VS Code (version 1.42.1)

[!] Connected device

! No devices available

! Doctor found issues in 1 category.

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

Flutterを動かしてみる

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

プロジェクトの作成

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

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

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

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

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

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

実行

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

>flutter run
Using hardware rendering with device Android SDK built for x86. If you get graphics
artifacts, consider enabling software rendering with "--enable-software-rendering".
Launching lib\main.dart on Android SDK built for x86 in debug mode...
Running Gradle task 'assembleDebug'...                                 \

>flutter run

Using hardware rendering with device Android SDK built for x86. If you get graphics

artifacts, consider enabling software rendering with "--enable-software-rendering".

Launching lib\main.dart on Android SDK built for x86 in debug mode...

Running Gradle task 'assembleDebug'... \

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

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

hot reload

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

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

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

void _incrementCounter() {
setState(() {
// _counter++; 5ずつアップに変更
_counter+=5;
});
}

void _incrementCounter() {

setState(() {

// _counter++; 5ずつアップに変更

_counter+=5;

});

}

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

�🔥  To hot reload changes while running, press "r". To hot restart (and rebuild state)
press "R".
An Observatory debugger and profiler on Android SDK built for x86 is available at:      
http://127.0.0.1:55345/ERqZ1a7Tfs8=/
For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".

�🔥 To hot reload changes while running, press "r". To hot restart (and rebuild state)

press "R".

An Observatory debugger and profiler on Android SDK built for x86 is available at:

http://127.0.0.1:55345/ERqZ1a7Tfs8=/

For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".

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

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

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

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

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

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ListView.builder(
itemBuilder: (BuildContext context, int index) {
if (index >= _issues.length) {
return null;
}
final issue = _issues[index];
return ListTile(
leading: ClipOval(
child: Image.network(issue.avatarUrl),
),
title: Text(issue.title),
);
},
),
);
}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(widget.title),

body: ListView.builder(

itemBuilder: (BuildContext context, int index) {

if (index >= _issues.length) {

return null;

}

final issue = _issues[index];

return ListTile(

leading: ClipOval(

child: Image.network(issue.avatarUrl),

title: Text(issue.title),

);

}

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

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

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