Flutter2起動まで

概要

Flutter2が出たのでインストールからテストアプリ作成まで試してみる
基本公式に沿っているだけなので、たいしたことのないただのメモ書き

環境

Windows10

インストール

Flutter SDKの入手

公式サイトからダウンロード
ファイルを解凍する(C:\src\flutter)

注)C:\Program Files\など権限が必要となるディレクトリにインストールしない

pathの更新

[検索の開始]バーから「env」と入力し、[アカウントの環境変数の編集]を選択します。
パスが通っているか確認
- PathにC:\src\flutterflutter\binを追加
- 解凍した場所からbinまでのパス

flutter doctorの実行

C:\src\flutter>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.0.3, on Microsoft Windows [Version 10.0.19042.804], 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/docs/get-started/install/windows#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[√] Chrome - develop for the web
[!] Android Studio (not installed)
[√] Connected device (2 available)

! Doctor found issues in 2 categories.

↑Andoroid SDKがないため警告が発生

Andoroidのセットアップ

Andoroid Studioのインストール

公式サイトからダウンロード
Android Studioを起動し、「AndroidStudioセットアップウィザード」を実行します。

Android SDK, Android SDK Command-line Tools, and Android SDK Build-Toolsがインストールされます

Andoroidデバイスをセットアップ

AndroidデバイスでFlutterアプリを実行してテストする準備をするには、Android 4.1（APIレベル16）以降を実行しているAndroidデバイスが必要です

デバイスで開発者向けオプションとUSBデバッグを有効にします
GoogleUSBドライバーをインストールします
USBケーブルを使用して、電話をコンピューターに接続します
デバイスでプロンプトが表示されたら、コンピューターにデバイスへのアクセスを許可します
ターミナルでflutter devicesコマンドを実行して、Flutterが接続されているAndroidデバイスを認識することを確認します。

   >flutter devices
   3 connected devices:

   ASUS Z00AD (mobile) • F6AZFG236452 • android-x86    • Android 6.0.1 (API 23)
   Chrome (web)        • chrome       • web-javascript • Google Chrome 89.0.4389.90
   Edge (web)          • edge         • web-javascript • Microsoft Edge 89.0.774.57

デフォルトでは、FlutterはadbツールのベースとなっているバージョンのAndroidSDKを使用します。FlutterでAndroidSDKの別のインストールを使用する場合は、ANDROID_SDK_ROOT環境変数をそのインストールディレクトリに設定する必要があります

Andoroidエミュレータをセットアップ

VM accelerationを有効にする
Android Studioを起動し、ConfigureのAVD Managerアイコンをクリックして、[仮想デバイスの作成... ]を選択します
デバイス定義を選択し、[次へ]を選択します
エミュレートするAndroidバージョンの1つ以上のシステムイメージを選択し、[次へ]を選択します。x86またはx86_64のイメージが推奨されます
[エミュレートされたパフォーマンス]で、Graphics: [Hardware - GLES 2.0]を選択して、ハードウェアアクセラレーションを有効にします。
AVD構成が正しいことを確認し、[完了]を選択します。
1. 上記の手順の詳細については、AVDの管理参照してください。
Your Virtual Device で、アクション欄の[実行]をクリックします。エミュレータが起動し、選択したOSバージョンとデバイスのデフォルトのキャンバスが表示されます。

Webセットアップ

Flutterは、stableチャネルでのWebアプリケーションの構築をサポートしています。

Flutter 2で作成されたアプリはすべて、Web用に自動的にビルドされます。

既存のアプリにWebサポートを追加するには、上記のセットアップが完了したら、Flutterを使用してWebアプリケーションを構築する手順に従います。

エディタの設定

AndroidStudioを起動します
Configure - Marketplaceを選択
MarketplaceでFlutter pluginをインストール

テストアプリのテスト

アプリの作成

AndroidStudioを起動します
Create New Flutter Projectを選択します
プロジェクトタイプとしてFlutter Applicationを選択します
プロジェクト名とFlutter SDKパスがSDKの場所を指定(C:\src\flutter)し、Nextをクリック
パッケージ名を入力してFinish

アプリの実行

プロジェクトを起動
Target selectorで端末を指定 ※USBでスマホと接続時は自動で選択される ※表示がない場合はAVD Managerでエミュレータを起動してからTarget selectorを指定
実行する

アプリの更新

main.dat内の下記を変更する

   'You have pushed the button this many times:'
   ↓
   'You have clickd the button this many times:'

変更を保存すると即時反映される

Flutter Web

FlutterでWeb表示をする

公式サイトでは通常のインストールとは別枠でページが設けられている

$ flutter channel stable
$ flutter upgrade
$ flutter devices
Chrome (web) • chrome • web-javascript • Google Chrome 89.0.4389.90

一応この通り試したが、Chrome (web)はAndoroidデバイスをセットアップの所ですでに確認済でした。

アプリ作成

$ flutter create myapp
$ cd myapp

Android Studioでプロジェクトを作成しても、webディレクトリが作成されないため、コマンドで実行しました。

アプリ実行

$ flutter run -d chrome

作成したプロジェクトをAndroid Studioで開き、Target selectorでChromeを指定し、実行しても同じ動作を確認

Build実行

$ flutter build web

Android StudioではBuild - Flutterの中にWEBが含まれていないので、コマンドで実行しなければならなかった。

疑問

エミュレータ上では動作確認できていたのに、作成されたファイルが白ページだけだったのはなんでなんだろう？
Andoroidデバイスをセットアップは必要だったのか？

Flutter2がとりあえず動くまで