Flutterのファースト・ステップのバックアップ(No.4)

// ユーザーの環境変数に設定する例
$path =[System.Environment]::GetEnvironmentVariable('PATH','User')
$path +=";" + "C:\prog\dev\flutter\bin";
[System.Environment]::SetEnvironmentVariable('PATH',$path,'User')

↑

チェック（１） †

以下のCommandを実行し、TODOを確認する。

>flutter doctor

↑

Android Studioのインストール †

既定値でインストール（Android Virtual Device（AVD）もインストール）。

最後に、ライセンス条項に同意する。
```
flutter doctor --android-licenses
```

初期設定
- 必要に応じて、Android Targetをインストール
- 日本語化したら問題が出るらしい（現時点で解決しているか不明）。

PATH環境変数

ツール類

%USERPROFILE%\AppData\Local\Android\Sdk\tools
%USERPROFILE%\AppData\Local\Android\Sdk\tools\bin
%USERPROFILE%\AppData\Local\Android\Sdk\platform-tools

gradleのbin

%USERPROFILE%\.gradle\wrapper\dists\gradle-6.7-all\cuy9mc7upwgwgeb72wkcrupxe\gradle-6.7\bin

※ 前述のPowerShell?だと、%USERPROFILE%が展開されねぇんだけど...。

↑

プラグインのインストール †

「File」メニュー -> 「Settings..」 -> 「Plugins」

Flutterプラグインの「Install」ボタンを押下
Dartプラグインの「Install」ボタンを押下

↑

チェック（２） †

以下のCommandを実行し、問題が無いことを確認する。

>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.0.3, on Microsoft Windows [Version 
10.0.19041.867], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[√] Chrome - develop for the web
[√] Android Studio (version 4.1.0)
[√] VS Code, 64-bit edition (version 1.47.2)
[√] Connected device (2 available)

• No issues found!

>

↑

余談：SDKのパス変更 †

SDKのパスを変更する場合、以下の手順に従って変更する。

Flutter SDKのPathを変えた時にやること【Flutter】 - Qiita
https://qiita.com/umi_mori/items/46073f5bfb88348efd16

↑

サンプルの生成と実行 †

↑

新規作成プロジェクト的な。 †

Android Studioで、新規作成プロジェクトする。

「Start Flutter New Project」
or 「File -> New -> New Flutter Project..」

「Flutter Application」を選択

プロジェクトタイプ	概要
Flutter Application	アプリケーション用
Flutter Plugin Android	ネイティブAPI用ライブラリ用
Flutter Package	画面部品用
Flutter Module	Dartライブラリ用

以下を入力する。

入力項目	概要
Project Name	プロジェクト名
Flutter SDK path Project location	Flutter SDKをインストールしたフォルダを指定。
Description	プロジェクト、アプリの説明
Package Name	通常、ドメインを反対にした値を入力

デバッグ実行を行う。
- 実行するデバイスを選択し、
- 緑三角（実行）、虫（デバッグ）ボタンを押すと実行。

↑

プロジェクトの開発 †

手順２で説明する。

↑

デバッグ実行 †

↑

エミュレータを登録して実行 †

必要に応じて、Windows ハイパーバイザープラットフォームを有効化しておく。

コチラの新し目の手順になる。

エミュレータの登録
- 「Tools」メニュー -> 「AVD Manager」
- （「Create Virtual Device ..」でデバイスを選択し「Next」ボタンを押下）
- （API Levelを選択（最新に近いモノを選択する））
- 「Actions」から三角ボタンを押して、エミュレータを起動

エミュレータでデバッグ実行
- 実行するデバイスを選択し、
- 緑三角（実行）、虫（デバッグ）ボタンを押すと実行。

↑

実機でデバッグ実行する場合 †

Android Studioで1GB、エミュレータで6GB程、メモリを消費するので、
開発機のメモリが16GB程度では少々、スペック不足、故に実機でのデバッグを行うことになる。

「Build」メニュー -> 「Flutter」 -> 「Build ÀPK」を実行して、apkファイルをプロジェクト出力。

コチラの手順を参考にして、以下のフォルダのapkファイルを送り込む。
```
%%\AndroidStudioProjects\flutter_app\build\app\outputs\flutter-apk\app-release.apk
```
※ コマンドの実行に、PATH環境変数の設定は必須。

↑

Flutter Inspector †

「Tools」メニュー -> 「Flutter」 -> 「Open Flutter Devtools」を実行して、
デバッグ実行中に、Flutter Inspectorのペインを開くとUI要素のツリーが表示される。

↑

その他のツール †

その他にも、様々なツールを使用できる。

外部デザイナとして、Flutter Studioがある。
- AppBuilder? 2
  https://flutterstudio.app/

加えて、
- Flutter Inspectorと、
- Widget等の追加、削除＋Hot Reload

を併用すると、RAD風にできる。

参考
- 開発効率が上がるFlutter x Android StudioのTips集 - Qiita
  https://qiita.com/akatsuki174/items/d66fa84fe51aa2d9a1a6

↑

手順２ †

↑

Flutterのファースト・ステップ のバックアップ(No.4)

目次 †

概要 †

手順１ †

インストール †

ダウンロード †

解凍＆パス指定 †

チェック（１） †

Android Studioのインストール †

プラグインのインストール †

チェック（２） †

余談：SDKのパス変更 †

サンプルの生成と実行 †

新規作成プロジェクト的な。 †

プロジェクトの開発 †

デバッグ実行 †

エミュレータを登録して実行 †

実機でデバッグ実行する場合 †

Flutter Inspector †

その他のツール †

手順２ †

参考 †

Flutterのファースト・ステップのバックアップ(No.4)