Flutter+VSCodeの環境構築をWindows10で行う手順まとめ。エミュレーター起動が一番辛かった

6 min
flutter
Sponsored Link
himakuro

himakuro

新卒で入社したブラック企業から脱出して超ホワイトな会社に転職。エンジニア歴は7年で普段はウェブサービス作ったりブログを書いたり、オンラインで未経験者の方にプログラミングを指導しています。

FOLLOW

久しぶりにプログラミングに関する記事の投稿です。

今回はGoogleが開発したスクリプト言語であるDart言語のフレームワークFlutterをWindowsパソコンのVSCodeで使えるように環境構築していきたいと思います。

今回の記事で学べること

  • Dart言語の概要
  • WindowsでFlutterの開発環境を構築する手順
  • Flutterコマンドの簡単な使い方
  • Android Studioのインストール手順
  • エミュレーターを使ってFlutterアプリを起動する方法

開発環境&使用バージョン

開発環境&使用バージョン”

  • Windows 10
  • Dart 2.1.0
  • Flutter 1.0.0
  • Android Studio 3.2
  • Android SDK 28.0.3
  • VS Code 1.30.0
Sponsored Link

Dart言語とは

Dart言語は2011年に登場したJavaScriptの次の世代を目指した言語で一時は注目を浴びましたが、GoogleがChromeへのDart標準搭載を見送ったことにより忘れられていた言語です。

しかし、2018年2月にFlutterというスマートフォン向けのフレームワークが登場し、AndroidでもiOSでも同じ様に動作するアプリが作れるようになりました!

そして更に2018年の8月に新しいバージョンDart2の正式版としてリリース!

https://himakuro.com/wp-content/uploads/2018/12/himakuro-happy-reverse.png

2018年になってやっと波に乗ってきたDart言語! 今のうちに使えるようになっておこう!

Flutterの開発環境を構築しよう

https://himakuro.com/wp-content/uploads/2018/12/himakuro-plain-reverse.png

今回の記事では下記の公式サイトに沿って開発環境を構築していくよ!

Flutterの公式サイト

Flutterのインストール手順 (Windows編)

https://himakuro.com/wp-content/uploads/2018/12/himakuro-happy-reverse.png

公式サイトは英語で記述されているから和訳しながら進めていくよ

Sponsored Link

Flutterを導入する前に必要なスペックとツール

必要なスペック&ツール

  • OS: Windows 7 SP1以降(64ビット)
  • PowerShell 5.0 以上
  • Git for Windows
https://himakuro.com/wp-content/uploads/2018/12/himakuro-happy-reverse.png

Windows10だと最初からPowerShellがインストールされているよ

Git for Windowsをインストールしよう

https://himakuro.com/wp-content/uploads/2018/12/himakuro-plain-reverse.png

下のリンクをクリックするとすぐにダウンロードが開始するよ

Git for Windowsをインストールする

ダウンロードが完了したらexeファイルをダブルクリックしてインストールを進めて行きましょう。

git-for-windows

インストール完了時には「Launch Git Bash」にチェックマークを入れておき、黒い画面が出てきたら「git」と入力しましょう。

下記の画像の様に大量に英語が表示されればインストール完了です。

git-for-windows2
Sponsored Link

Flutter SDKをダウンロードしてFlutterコマンドを使えるようにしよう!

https://himakuro.com/wp-content/uploads/2018/12/himakuro-happy-reverse.png

いよいよFlutterを導入していくよ

Flutter SDKのダウンロード

Flutter SDKダウンロード

Flutter SDK の展開

ダウンロード後は「C:\Program Files」、または任意の場所に解凍(展開)作業を行います。ファイルが大きいので解凍作業には5分から10分程度かかります。

Flutter consoleの実行

解答が終わったらflutterフォルダに入っているflutter_console.batファイルをダブルクリックして実行しましょう。

flutter_console

設定によっては下記の画面になりますが気にせず「実行」を押しましょう。

flutter_execute

実行後は下記の画面になればOKです。

flutter_execute2

Flutterのパスを追加してPowerShellで実行できるようにしよう

上記の手順でflutter consoleを使えばflutterが使えるようにはなりました。

しかし今のままだと、まだPowerShellではflutterコマンドは実行出来ません。

flutter_console2

そこで環境パスを通すことで使えるようにしていきます。

Pathの通し方

  1. 「Windowsキー + Pauseキーを押す」
  2. システム画面が出てくるので「システム詳細」を選択
  3. 上のタブにある「詳細設定」を選択
  4. 下の方にある「環境変数」を選択
  5. Pathの項目を選択して「編集」を選択する
  6. 「新規」を選択して「flutter」フォルダーにあるbinのパスを追加する
  7. PowerShellを起動して「flutter –version」と入力して動作を確認する

⑥の項目のPathは、himakuroの場合は「C:\Program Files」の中に「flutter」を入れ込んだので下記のようなPathを追加しました。

「C:\Program Files\flutter\bin;」

flutter-path

Pathを追加した際にPowerShellを起動済みだった場合は一度PowerShellを閉じて開き直してください。

flutter-path-done

バージョン情報が上記の様に表示されれば設定完了です!

Flutter Doctorで依存関係の確認をしよう

Flultterが使えるようになった所で最後にFlutterを使って開発するために必要なツールなどのインストールを行っていきます。

PowerShell、またはFlutter Consoleを実行して「flutter doctor」と入力しましょう。

flutter-doctor

Flutterが正常にインストールできていれば一番上の項目は上記の画像の様にチェックがついているはずです。そして、大半の方は2つ目の「Android toolchain – develop for Android devices」がXになっているかと思います。

これはAndroidアプリをビルドするために必要なツールチェインがインストールされていないからになります。

https://himakuro.com/wp-content/uploads/2018/12/himakuro-happy-reverse.png

と言うことでAndroid SDKの導入を進めていこう!

Android SDKの導入

Android Studioのダウンロードとインストール

Android Studioのダウンロード

上記にアクセスして「ANDROID STUDIOをダウンロード」を選択してダウンロードしていきましょう。

himakuroがダウンロードした時点(2018-12-15)で容量は923MBインストールする際には2.5GB必要なのでパソコンの容量には注意しておきましょう。

Android SDKのインストール

Android Studioのインストールが完了したら起動しましょう。

すると下記の様な画面になるので「Next」を選択してAndroid SDKをインストールしていきましょう。

android-studio

himakuroダウンロードとインストールには凡そ10分程度かかりました。

Flutter Doctorの再実行

Android SDKのインストールが完了したら再度「flutter doctor」を実行して正常に認識されるようになっているか確認しましょう。

flutter-doctor-after-sdk-install

「Android toolchain」と「Android Studio」が認識されるようになりました。

しかし、Android toolchainのところにXが表示されていると思います。

これはAndroidのライセンスがまだ同意されていませんよというエラーなのでさくっと同意していきましょう。

ライセンスの同意をしよう

ライセンスの同意をするためにはPowerShell上で下記を入力しましょう。

「flutter doctor –android-licenses」

大量の英文が表示されるのでひたすら「y」と入力してEnterを押して同意していきましょう。

android-lisence

Flutter Doctorの再実行

ライセンス同意が終わったら再度「flutter doctor」を再実行。

flutter-doctor-3

Android toolchainの所が「」になっていればAndroid SDKの導入完了です。

Android StudioにDart Pluginを導入しよう

https://himakuro.com/wp-content/uploads/2018/12/himakuro-happy-reverse.png

わかりやすいようにGIFアニメで手順を解説してみたよ!

右下の「Configure」を選び「Plugin」を選択。

検索文字列は「flutter」です。

flutter install

インストール完了後は「flutter doctor」で「」が付いているかを確認しましょう。

flutter-doctor-after-flutter-install

VSコードでFlutterを使えるようにしよう

https://himakuro.com/wp-content/uploads/2018/12/himakuro-happy-reverse.png

環境構築もいよいよ終盤だよ!後もう一息頑張ろう!

VSコードのダウンロード、インストール

VSCodeのダウンロード

上記リンクにアクセスしてVSCodeをダウンロードしましょう。

ダウンロード完了後はインストールを行い「flutter doctor」で認識されているか確認をしましょう。

vs-code-install

ちなみにhimakuroがインストールした時点(2018-12-15)の最新バージョンは1.30.0でした。

VSCodeにFlutterプラグインを導入しよう

https://himakuro.com/wp-content/uploads/2018/12/himakuro-happy-reverse.png

プラグインのインストール手順はAndroid Studioとほぼ同じでとっても簡単!

プラグイン導入方法

  1. 「View」を選択
  2. 「Command and Pallete」を選択
  3. 「install」と入力
  4. 「Install Extensions」を選択
  5. 「flutter」と入力
  6. 「Flutter」を選択して「Install」を押す

vs-code-flutter

VSCodeでFlutter Doctorを実行しよう

Flutter Doctor実行方法

  1. 「View」を選択
  2. 「Command and Pallete」を選択
  3. 「doctor」と入力
  4. 「Run Flutter Doctor」を選択
vs-code-flutter-doctor

VSCodeをメインで使っていく方はこれからVSCode内でDoctorの実行が可能です。

VSCodeでFlutterを動かしてみよう!

https://himakuro.com/wp-content/uploads/2018/12/himakuro-happy-reverse.png

ついにFlutterを実際に動かしていくよ!

Flutterプロジェクトの作成

プロジェクトの作成方法

  1. 「Ctrl」+「Shift」+「p」をおして「Command and Pallete」を開く
  2. 「flutter」と入力
  3. 「Flutter New Project」を選択
  4. 「hello_world」、または任意のプロジェクト名を入力する
  5. 「任意の場所に保存する」

Android Studioでエミュレーターの作成をしよう

エミュレーターの作成手順

  1. Android Studioを起動する
  2. 「Start a new Flutter project」を選択
  3. 「Flutter Application」を選択
  4. 「Next」を押し続けて、「Finish」を選択
  5. 「Tool」=>「AVD Manager」を選択
  6. 「Create Virtual Device」を選択
  7. 「Phone」=>「Pixel2」を選択
  8. 「API Level 26」の「Oreo」を選択してダウンロード
  9. 「Next」を押してAVD Nameに「Flutter」と入力
  10. 「Show Advanced Setting」を選択して「Finish」を選択
android-studio-system-image
android-studio-virtual-device-flutter
https://himakuro.com/wp-content/uploads/2018/12/himakuro-happy-reverse.png

右の方にある再生ボタンをおしてエミュレーターが起動出来るか確認しよう

エミュレーターが起動出来ない場合

上記の手順で行った場合にエミュレーターが正常に起動しない場合があります。

下記のサイトが詳しく書いてあるので参考にしてみてください。

AVDが起動しないときに確認する箇所

Intel Hardware Accelerated Execution Manager (HAXM)の入手

https://himakuro.com/wp-content/uploads/2018/12/himakuro-thinking-reverse.png

僕のパソコンはHAXMをインストールしたら正常にエミュレーターが起動出来るようになったよ

Flutterプロジェクトを実行してみよう

https://himakuro.com/wp-content/uploads/2018/12/himakuro-happy-reverse.png

ついにFlutterを実行だー!!

実行手順

  1. 「Ctrl」+「Shift」+「D」をおして「debug」を開く
  2. 画面左上の「再生ボタン」の右にある「No Configuration」を選択する
  3. 「Add Configuration」を選択
  4. 「再生ボタン」の右に「Flutter」と表示されるようになる
  5. 「再生ボタン」を選択する
  6. 「Pixel2_Flutter」を選択する
emulator
https://himakuro.com/wp-content/uploads/2018/12/himakuro-happy-reverse.png

これでやっとVSCodeでFlutterを使って開発する準備が出来たよ!おつかれさま!

まとめ

Windowsパソコンで開発環境を構築するのは改めて大変だなというのを痛感しました。

しかし、これでWindowsでAndroidアプリを開発出来るようになったので気が向いたら何か作ってみたいと思います。

https://himakuro.com/wp-content/uploads/2018/12/himakuro-surprise-reverse.png

記事を書きながら色々と躓きながらやったから環境構築だけで6時間ぐらいかかってた・・・

Sponsored Link
himakuro

himakuro

新卒で入社したブラック企業から脱出して超ホワイトな会社に転職。エンジニア歴は7年で普段はウェブサービス作ったりブログを書いたり、オンラインで未経験者の方にプログラミングを指導しています。

FOLLOW

カテゴリー:
タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です