Go to Qiita Advent Calendar 2024 Top
LoginSignup
19
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@kuroyan

WindowsでFlutterの環境をつくろう

Last updated at Posted at 2018-10-28

前置き

  • このページでの環境作りは Visual Studio Code で Flutter の環境を構築する手順となります。
  • IntelliJ IDEA でも環境を作成することが出来ますが、ここで記述はしません。

導入手順

SDKを入手して、設定する

  1. https://flutter.io/ へジャンプ

  2. [GET STARTED] -> [INSTALL ON WINDOWS] の順番にジャンプ

  3. 【Get the Flutter SDK】項目の flutter_windows_(version)-beta.zip をクリック

  4. めんどくさい人はココからどうぞ Download Windows SDK
    (※リンク切れする可能性があります。)

  5. ダウンロードが完了したら C:\sdk に解凍する (解凍場所は任意)

  6. システム環境変数 「Path」に C:\sdk\flutter\bin を設定を追加する

  7. コマンドプロンプトを開いて バージョン確認を行う。

    コマンドプロンプト
    > flutter --version
Flutter 0.9.4 • channel beta • https://github.com/flutter/flutter.git 
Framework • revision f37c235c32 (5 weeks ago) • 2018-09-25 17:45:40 -0400
Engine • revision 74625aed32
Tools • Dart 2.1.0-dev.5.0.flutter-a2eb050044

  8. Flutter以外の必要なものを確認

  9. コマンドプロンプトを開いて 不足しているツールを確認する

    コマンドプロンプト
    > flutter doctor
[√] Flutter (Channel beta, v0.9.4, on Microsoft Windows [Version 10.0.17134.376], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK 28.0.3)
! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[√] Android Studio (version 3.2)
[!] IntelliJ IDEA Community Edition (version 2017.3)
X Flutter plugin not installed; this adds Flutter specific functionality.
X Dart plugin not installed; this adds Dart specific functionality.
[√] VS Code, 64-bit edition (version 1.27.1)
[!] Connected devices
! No devices available
    • √ マークはインストール済み
    • ! マークはインストールがされていない、またはバージョンが古いためサポートされていない
      (※もしくは 最新verでも発生する場合があります)

Android toolchain をインストールしよう！

ありがたいことにコマンドが書かれているので実行するだけっぽいですね

[!] Android toolchain - develop for Android devices (Android SDK 28.0.3)
! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

  1. コマンドプロンプトで flutter コマンドを実行する

    コマンドプロンプト
    > flutter doctor --android-licenses
    • 何度かライセンスに同意してよ (y/N) がでてくるので　すべて y でやっていきましょう
  • flutter doctor コマンドを実行して √ マーク がついているか確認

Android Studio をインストールしよう

  1. https://developer.android.com/studio/ へジャンプしてダウンロードする
  2. インストール手順の詳細なことは割愛するが Android Virtual Device (AVD) に関する項目を見かけたら インストールするようにしましょう
    (Android エミュレータを使わない場合は不要)
  3. Intel x86 Emulator Accelerator (HAXM installer ) が多分必要だったはずなのでインストールしておく
    • [SDK Manager] -> [SDK Tools] タブ
    • Intel x86 Emulator Accelerator を[チェックON]して[OK] してインストールを完了させる
    • コマンドプロンプトで flutter doctor コマンドを実行して √ マーク がついているか確認

Visual Studio Code をインストールしよう

  1. https://code.visualstudio.com/ へジャンプしてダウンロードする
  2. インストール手順は割愛します
  3. Flutter プラグインを追加する
    • Visual Studio Code を開いて CTRL + SHIFT + X キー を入力
    • Flutter Dart と検索して 『Flutter』『Dart』をインストールする
      ※『Flutter Widget Snippets』は必須ではないがインストールしておくといいと思います
    • インストールが完了したら、[再読み込み] するか CTRL + SHIFT + P で Reload Window を入力して選択すれば VSCodeを開き直します
  4. Flutter動作環境ステータスを確認する (あえてコマンドプロンプトでやりません)
    • VSCode上で F1 キーで 入力欄が出現させる
    • Flutter と入力して Run Flutter Doctor を選択する
    • VSCode 上の[出力]タブに flutter doctor の実行結果が表示されるので √ マーク がついているか確認

Flutter プロジェクトを作ってみよう

  1. VSCodeで F1 キーで入力欄を出現させる
  2. Flutter と入力して New Project を選択すると入力欄が出てきます
  3. プロジェクト名なので sample_flutter とでもしときましょう
  4. 作成先のフォルダー選択ダイアログが出現するので 任意の場所を選択しましょう
    (例: C:\project\flutter)

Android エミュレータを作成する

  1. VS Code 右下にある No Devices を選択して Create New を押す。
    ※既にエミュレータを作成済みの場合は Create New しなくていいです。
  2. エミュレータが起動したならココで完了.
    エラーとなるなら↓の作業を試す
  3. Windows Hypervisor Platform (WHPX) や BIOX/UEFI　みたいなエラーが発生した場合、以下の対処法で治るかもしれません。(絶対とは言えません)
    • 対処法1 : Windows ハイパーバイザー プラットフォームをインストールする
      1. [コントロールパネル] -> [プログラムと機能] -> 左ペインから [Windows の機能の有効化または無効化] を選択
      2. Windows ハイパーバイザー プラットフォーム をチェックONしてOKをする
      3. PC再起動(が必要だったか忘れた)
      4. Windows Update を確認し、あればアップデートする
      5. PC再起動する
    • 対処法2：BIOS/UEFI から Intel Vertualization Technology を有効化する
      ※マザーボードのメーカーによって手順が異なります。ココではAsus BIOS/UEFI での手順を記述します。
      1. PC再起動し、Windows起動途中のメーカーロゴ中に F2 キーを押す
      2. UEFI画面が表示され、右下「Advanced Mode」へ移動
      3. [Advanced]タブ -> CPU を選択 -> Intel Virtualization Technology を Enable にする
      4. Save & Exit する
      5. PCを起動する
    • 上記対処法で治らない場合は、エラー内容を確認および調査して解決をしてください。

Flutterプロジェクトをエミュレータでデバッグ実行しよう

  1. エミュレーターを起動しておく

  2. ターミナルから エミュレーターでビルドするコマンドを実行する

    VSCodeターミナル
    > flutter run

    1分くらいかかるのでじっくり待つ

  3. エミューレータでアプリが起動されれば成功

はまりポイント

  1. Flutterの実行(flutter run) したときに↓のエラーが発生したときの対処法

    * Error running Gradle:
Exit code 1 from: E:\Programing\Flutter\sample\android\gradlew.bat app:properties:
Project evaluation failed including an error in afterEvaluate {}. Run with --stacktrace for details of the afterEvaluate {} error.

FAILURE: Build failed with an exception.

* Where:
Build file 'E:\Programing\Flutter\sample\android\app\build.gradle' line: 25

～～ 省略 ～～

    • flutter SDK のパス配下にある build.gradle ファイルを開いて以下のように書き換える

      build.gradle
      buildscript {
    repositories {
        google()    // ← ココ!!   google() の優先度を上げる
        jcenter()
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.2'
    }
}

    対処法 参考 : https://stackoverflow.com/questions/52945041/couldnt-locate-lint-gradle-api-26-1-2-jar-for-flutter-project

19
25
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
19
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?