はじめに
本ページでは、Flutter 上でのアプリを開発するために、チュートリアルの内容に従った開発の方法についてご紹介します。
Dart
今回は Flutter のインストールで勝手にいろいろと入るので、
環境構築中に行うことは特になしです。
Flutter
チュートリアルページ
-
https://dartpad.dev
- Web 上で Dart を書きながらいろいろと実験ができる。本ページでは割愛。
-
https://docs.flutter.dev/get-started/install
- インストールに関するページ。
-
https://docs.flutter.dev/get-started/editor
- エディターのセットアップのページ。本ページでは Visual Studio Codeを中心に解説。
このページでの環境について
環境は Windows 10 を想定しています。
また、実際に Andorid 端末の実機をパソコンに繋げて使います。
インストール
1. Git for Windows
事前に必要なのでインストールします。
すでに入っている場合は不要です。
2. Flutter のインストール
下記のページから ZIP ファイルをダウンロードしてインストールします。
(このページの記載時点では、 flutter_windows_3.3.9-stable.zip)
落として来たら ZIP ファイルを解凍し、作成されたフォルダを C:\flutter などに移動します。
※インストールページの注釈で、特殊文字やスペースがあるパスに展開しない、とあるので、それ以外のパスを指定する。
C:\Program Files 以下とかには置かない方がいい。
3. 環境変数の設定
インストールをしたら、下記手順に従ってパスを通します。
- Windows の検索(スタートボタン横の虫眼鏡マーク)を開き、
envと入力する。 - 出てきた
システム環境変数の編集をクリックする。 - 下にある
環境変数のボタンをクリックする。 - ユーザー環境変数の方の
Pathを選択し、編集ボタンをクリックする。 -
新規ボタンを押して、先ほどのFlutterのインストール先のパス +\binを記載してOKボタンを押す。
4. flutter doctor の実行
flutter をインストールしたパスのところで flutter doctor を実行します。
Git Bash を新たに立ち上げて下記のコマンドを実行してください。
(環境変数追加前の Git Bash を使うと環境変数の追加が有効になっていない)
$ cd /c/flutter
$ flutter doctor
5. Android Studio のインストール
下記から Android Studio をダウンロードしてインストールします。
終わったら flutter doctor を実行して、Android Studio が読み込めているか確認します。
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
(中略)
[√] Android Studio (version 2021.3)
読み込めていなかったら、下記コマンドを実行して、Android Stdio のパスを で指定してください。
$ flutter config --android-studio-dir <directory>
6. Android デバイスのセットアップ
Android 端末の開発者オプションを設定します。
USB Debuggingを有効にします。詳細は下記のサイトに書いてあります。
また、 Google USB Driver をインストールしてください。
- Android Studio を起動する。
- メニューから、
SDK Tools>SDK Managerを選択する。 -
SDK Toolsタブを開く。 -
Google USB Driverのチェックを入れて、OKを押してインストールする。
これについても、下記のページに詳しく書いてあります。
実際に Android 端末をつなげて flutter devices を実行し、 Android 端末と接続できているか確認してください。
$ flutter devices
4 connected devices:
** ** (mobile) • ********** • android-arm64 • Android ** (API **)
(以下略)
7. Android エミュレータの設定
まずはPCの VM アクセラレーションを有効にしてください。
VM アクセラレーションの方法は環境によって変わるので、下記のページを読んで方法を確認してください。
今回の手順は以下の通りです。
- Windows の
設定から、アプリと機能を選択する。 - 右側の
プログラムと機能を選択する。 -
Windows の機能の有効化または無効化を選択する。 -
Windows ハイパーバイザー プラットフォームをチェックしてOKを押す。 - OS を再起動する。
次に、 Android Emulator のデバイスを作成します。
- Android Studio を起動する。
- メニューから、
SDK Tools>Device Managerを選択する。 -
Create deviceを選択する。 -
Choose device definitionから利用したいハードウェアの設定を選択する。 -
Nextを押す。 -
Select System Imageの中にあるOSのイメージから、使いたいOSをダウンロードする。
(ダウロードマークを押す) - ダウンロードできたら、そのイメージを選択して
Nextを押す。 - 確認画面で構築するエミュレータの内容を確認して
Finishを押す。
動作確認は、 Device Manager から作成したデバイスの起動ボタン(右向き三角)を押して起動できるか確認します。
8. 各種ライセンスの同意
まず、cmdline-tools をインストールします。
$ cd (Android SDK のフォルダ)
$ ./tools/bin/sdkmanager.bat --install "cmdline-tools;latest"
JAVA_HOME が設定されていないと、sdkmanager.bat が動かないので、
その場合は環境変数から設定してください。
その後、flutter doctor --android-licenses を実行して、ライセンスの認証となります。
$ flutter doctor --android-licenses
各ライセンスについて、ライセンスに同意する場合はyを押して承認してください。
その後、flutter doctor を実行し、環境に問題がないことを確認してください。
$ flutter doctor
9. VS Code のインストール
VS Code をインストールします。
10. Flutter と Dart のプラグインをインストール
VS Code を起動し、下記の手順で Flutter のプラグインをインストールします。
- 左側の Extention のマークをクリック、または、 Ctrl + Shift + X を押す。
- 検索ボックスに Flutter と入力して Flutter を選択してインストール。
Dart のプラグインは勝手に入ります。
終わったら VS Code は再起動(閉じて開く)しておいた方がお勧めです。
デモアプリケーションの作成
基本に忠実に、下記のページに記載されている内容を実行。
1. プロジェクトの作成
- VS Code を開く
- View > Commmand または Ctrl + Shift + P を押す。
-
Flutter: New Projectと入力する。(打っている途中で下に候補が出てくるのでクリック) -
Applicationを選択する。 - 適当なフォルダ(ここでは
my_app)作成する。 - プロジェクト名を聞かれるので、
my_appと入力してEnterを押す。
成功すれば main.dart というファイルが開かれているはずです。
2. アプリの実行
基本的に、メニューのRun > Start Debugging を選べば動くはず。
しばらくすると Android エミュレーター上でDemoアプリが動きます。
