スポンサーリンク

【Flutter入門】スマホアプリを作って公開するまでの軌跡! ①開発環境を作ろう!

Flutter

Flutter(フラッター)とは、Googleが開発したUIフレームワークです。

存在は知っていたものの、業務ではまったく扱う機会が巡ってこないので、自分で勉強してみることにしました。

最終的には、モバイルアプリを開発して公開したいと考えています。

何はともあれ、まずは開発環境を構築してみたいと思います。

Flutterのダウンロード

まずは公式サイトを開いてください。

Flutter - Build apps for any screen
Flutter transforms the entire app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase.

右上の『Get started』をクリックします。

私は、Windows環境なので「Windows」を選択します。

Flutter SDKをダウンロードします。

Flutter SDKを解凍しよう

先ほどダウンロードしたZIPファイルを解凍してください。

場所は任意の場所で構いません。
ちなみに、公式サイトには、例として
C:\Users\<your-user-name>\Documents
と書かれています。

ただし、C:\Program Files\ のように管理者権限を必要とする場所にはインストールしないようにしてください。

flutter doctorでシステムチェックしよう

解凍したflutterフォルダにある flutter_console.bat を起動してください。
コンソール画面が起動します。

Flutter開発で必要なツールがパソコンにインストールされているか flutter doctor を実行してみます。


        ######## ##       ##     ## ######## ######## ######## ########
        ##       ##       ##     ##    ##       ##    ##       ##     ##
        ##       ##       ##     ##    ##       ##    ##       ##     ##
        ######   ##       ##     ##    ##       ##    ######   ########
        ##       ##       ##     ##    ##       ##    ##       ##   ##
        ##       ##       ##     ##    ##       ##    ##       ##    ##
        ##       ########  #######     ##       ##    ######## ##     ##


 WELCOME to the Flutter Console.
 ===============================================================================

 Use the console below this message to interact with the "flutter" command.
 Run "flutter doctor" to check if your system is ready to run Flutter apps.
 Run "flutter create <app_name>" to create a new Flutter project.

 Run "flutter help" to see all available commands.

 Want to use an IDE to interact with Flutter? https://flutter.dev/ide-setup/

 Want to run the "flutter" command from any Command Prompt or PowerShell window?
 Add Flutter to your PATH: https://flutter.dev/setup-windows/#update-your-path

 ===============================================================================

F:\flutter>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.8.1, on Microsoft Windows [Version
    10.0.19042.1466], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    X cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for
      more details.
[√] Chrome - develop for the web
[√] Android Studio (version 2020.3)
[√] VS Code (version 1.57.1)
[√] Connected device (2 available)

! Doctor found issues in 1 category.

F:\flutter>

“Android toolchain” に [!] マークが付きました。

“cmdline-tools component is missing”(cmdline-toolsコンポーネントがありません)

と書かれています。

Android toolchain って何?

私の場合、Android Studio はインストール済みです。
でも、Android toolchain は無いらしい。。。

『Android toolchain』って何?

どうやら Android SDK Tools の一部らしいです。

さっそく追加しよう

まずは、Android Studio を起動してください。

メニューバーから「Tools」⇒「SDK Manager」を選択します。

「SDK Tools」のタブを開いて、『Android SDK Command-line Tools (latest)』にチェックが付いているか確認してください。私は、下図のとおりチェックが付いていませんでした。

と、いうわけでチェックを付けて「OK」ボタンをクリックします。

確認メッセージが表示されるので、「OK」ボタンをクリックします。

あとは、インストールが終わるのを待ってください。

再び、flutterのコマンドラインで “flutter doctor” コマンドを実行します。

ただし、下記は先に乗せていたログの抜粋ですが、2個目のバツに
“Android license status unknown.”
となっています。

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    X cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for
      more details.

“flutter doctor –android-licenses”を実行してライセンス認証しろと言っているので言われるがままに実行します。

F:\flutter>flutter doctor --android-licenses

何回か「Accept? (y/N): 」と聞かれるので、”y”を入力していってください。

全ての認証が完了したら、再度 flutter doctor を実行して下記のようになっていたら完了です。

F:\flutter>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.8.1, on Microsoft Windows [Version
    10.0.19042.1466], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[√] Chrome - develop for the web
[√] Android Studio (version 2021.1)
[√] VS Code (version 1.57.1)
[√] Connected device (2 available)

• No issues found!

F:\flutter>

Visual Studio Code に Flutter をインストール

VSCode の拡張機能を開いて、検索窓に「flutter」と入力します。

flutter関連のプラグインがたくさん表示されますが、まずは一番に表示されている「Flutter」をインストールしていきます。青色の「インストール」ボタンをクリックします。

インストールが完了すると下図のような表示になります。

最後に

とりあえず、flutter開発環境の準備は出来ました。

次回は、Androidアプリの開発を目指していきます。

コメント

タイトルとURLをコピーしました