Flutter：エディタの設定とテスト実行

2022-02-22技術

前回、FlutterのGetting Startedの1番目、Installをやったので、今回は2のSetup an editorと3のTest driveを見ていきます。普段使っているのがVSCodeなので、それで進めます。

エディタの設定

VSCodeのプラグイン導入

手順と言っても以下の4つしかありません。

Start VS Code.
Invoke View > Command Palette….
Type “install”, and select Extensions: Install Extensions.
Type “flutter” in the extensions search field, select Flutter in the list, and click Install. This also installs the required Dart plugin.

VSCodeを起動して、コマンドパレットでインストール、という手順になっていますが、面倒なので左下の歯車アイコンの設定ボタンから拡張機能を呼び出し、左上の検索欄に"flutter"と入力します。

おそらく以下のように一番上にFlutterプラグインが出てくるので、右にあるインストールボタンを押すだけです。

インストールすると以下のような画面になるはずです。

Flutterプラグインの確認

以下の手順で確認します。

Invoke View > Command Palette….
Type “doctor”, and select the Flutter: Run Flutter Doctor.
Review the output in the OUTPUT pane for any issues. Make sure to select Flutter from the dropdown in the different Output Options.

例によってコマンドパレットで「doctor」とか打つと適当に補完されるので、”Run Flutter Doctor”をクリック。

コマンドパレットからflutter doctorを実行

すると以下のようにエラーが出てしまいました。flutter SDKが見つからないと言っています。でも、PATHは通してますけど。VSCodeでTerminalを立ち上げてPATHを確認してみましたが、flutterのパスは入っています。

試しにTerminal内でflutter doctorを実行すると正常に動作します。

まあ、Locate SDKというボタンがあるので、素直にこれをクリックして、Flutter SDKを入れたフォルダを指定します。

すると、無事に実行あれて、出力のところに以下のように出てきました。

[flutter] flutter doctor -v
[✓] Flutter (Channel stable, 2.10.2, on macOS 12.2.1 21D62 darwin-arm, locale ja-JP)
    • Flutter version 2.10.2 at /Users/woinary/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 097d3313d8 (3 days ago), 2022-02-18 19:33:08 -0600
    • Engine revision a83ed0e5e3
    • Dart version 2.16.1
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /Users/woinary/Library/Android/sdk
    • Platform android-32, build-tools 32.1.0-rc1
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)

[✓] VS Code (version 1.64.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.34.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 12.2.1 21D62 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Google Chrome 98.0.4758.102
    ! Device emulator-5554 is offline.

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!
exit code 0

特に問題はないようです。

テスト実行

アプリの作成

続いて、テスト実行のためにアプリを作成します。手順は以下です。

Invoke View > Command Palette.
Type “flutter”, and select the Flutter: New Project.
Select Application.
Create or select the parent directory for the new project folder.
Enter a project name, such as , and press Enter.myapp
Wait for project creation to complete and the file to appear.main.dart

例によって、コマンドパレットでプロジェクトを作成します。適当に"new pr"あたりまで入れれば補完してくれるので簡単です。

すると何を作るか聞いてくるので、手順にある通りApplicationを選択します。

続いて、プロジェクトを作成するフォルダを聞いてきますので、適当に選んで手順通り"myapp"にします。最初のインストールの時点でお試しで"my_app"を作っているので紛らわしいのですが、気にしないことにします。

さらにプロジェクト名を聞いてくるので"myapp"と入力します。

いつもの「このフォルダを信用するか？」みたいな確認があるので、Yesを入力すると、プロジェクトを作成し、以下のように"main.dart"を開いてくれます。

とりあえず、プロジェクトの作成は成功したようです。出力タブには以下のように出ていました。

[myapp] flutter create --template app --overwrite .
Waiting for another flutter command to release the startup lock...
Signing iOS app for device deployment using developer identity: "XXXXXXXXXXX"
Creating project ....
Running "flutter pub get" in myapp...                               6.3s
Wrote 123 files.

All done!
In order to run your application, type:

  $ cd .
  $ flutter run

Your application code is in ./lib/main.dart.

exit code 0