2
2

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 3 years have passed since last update.

Flutterの導入(1) ~for Windows10~ Android Studio と Flutter をインストールしよう

Last updated at Posted at 2020-08-06

今回は Windows 環境でのインストールの話をしておく。


Flutterを扱うには、以下のものをインストールしておく必要がある。

  • Android Studio
    • 最新のものでいいです。
  • PowerShell
    • Windows10 で WindowsUpdate してれば、1909 以降なので入ってるはず
    • なければOSのVersionを確認するか、最新を確認してインストールする
  • 何でもいいから Git を扱えるソフト

Android Studio のインストール

これは多分説明要らないと思う。
最新から、
ダウンロードしてきて、インストールするだけ。

PowerShell の準備

これも説明不要かな。
ウィンドウズボタンを右クリックすると、こんなのがあれば、インストール済み。
image.png
無いのであれば、インストールか設定が必要。

コマンドプロンプトがリストにあるなら、
ココを確認した上でPowerShellが表示されるようにしておくといいかも。
コマンドプロンプトに powershell と入力して実行しても、
powershell が実行されないなら、インストールが必要。
Windows10なら、WindowsUpdateをするだけで済むはず。

何でもいいからGitを扱えるソフトをインストールする

これは好みの話になるので、好きなのをインストールしたらいいと思う。
個人的には、GitKrakenか、SourceTreeがお気に入り。

Android Studio の設定をする

Android Studio で色々インストールする。

SDK Manager で 各Android の SDK をインストールする

Projectを作成してた場合は、Tools にある、SDK Manager を起動。
Projectを作成してない or 開いていない場合は、歯車のマークをクリックした、
サブメニュー画面から起動できる。赤枠の↓ココね。
image.png

  1. SDK Manager を起動。
  2. インストール先を変更する場合は、SDK Manager の上の方に、Android SDK Location というのがあるので、その右側の方にある Edit を押下して、変更する。
  3. SDK Platform にある、自分が必要そうな Android の Version の SDK を、Nameから選んでチェックを付けていき、 Apply か OK を押下してインストールする。

SDK Manager で Tool をインストールする

  1. SDK Manager を起動。
  2. SDK Tools というタブをクリックする。
  3. Toolが並んでるので、以下をインストールする
  • Android SDK Build-Tools
  • GPU Debugging tools
  • NDK (Side by side)
  • Android SDK Command-line Tools(latest)
  • CMake
  • Android Emulator
  • Android SDK Platform-Tools
  • Android SDK Tools
  • Google Play services
  • Google USB Driver
  • Google Web Driver(コレは要らないかも)
  • Intel x86 Emulator Accelerator (HAXM installer) ※

※ これは Intel CPU の HAXM という機能を使って、Emulatorの処理を速くする機能。Emulator使わないなら無くていい。VT-x機能とかが要る。メモリも16GB以上推奨。有効にできないけど有効にしたい場合は、このサイトを確認してみて。

環境変数 ANDROID_HOME を追加する

ANDROID_HOME という、環境変数が必要になるので、
Android SDK をインストールした先のパスを設定しておく。

  1. 適当なExplorerを起動して、PCを右クリックし、プロパティを起動。
  2. システムの詳細設定にある、環境変数をクリック。
  3. 上段の「ユーザーの環境変数」にある「新規」をクリック。
  4. 「新しいユーザー変数」の「変数名」に ANDROID_HOME を入力する。
  5. 「新しいユーザー変数」の「変数値」に Android Studio で、Android SDK Location に選んだ場所を追加して入力する。
    (なので、 ~\AppData\Local\Android\Sdk を追加する事になるはず)
  6. OKをクリックして、画面を閉じる。

(必要なら)開発時に使うAndroid端末の準備をする

エミュレータではなく実機デバッグがしたいなら、その準備もする。
Flutterは、Android4.1以降でないと使えない。
Android端末の「開発者オプション」にある、「USBデバッグ」機能を有効にする必要がある。
常に有効にしてると、一部アプリが使えなかったりするので注意。
(たぶん、セキュリティ的に良くないからじゃないかなー)

「開発者向けオプション」は、最初は非表示になっている。
表示させるには、「端末情報」の「ビルド番号」を連続でタップする。
「開発者向けオプション」を非表示に戻したい場合は、
スマホのストレージのデータをほぼ全削除してリセットしない限り戻らない。

「USBデバッグ」機能を有効にすることで、実機でデバッグ確認が出来るようになる。

Flutterのインストール

安定版か最新版を選んでインストールする。

C:\src>git clone https://github.com/flutter/flutter.git -b stable
※git cloneする場所はどこでもいいので、C:\srcじゃなくてもいい

環境変数をPATHに追加する

環境変数のPATHに、flutter\binまでのフルパスを追加する。

  1. 適当なExplorerを起動して、PCを右クリックし、プロパティを起動。
  2. システムの詳細設定にある、環境変数をクリック。
  3. 上段の「ユーザーの環境変数」にある「Path」をクリックしてから、「編集」をクリック。
  4. その画面で「参照」をクリックし、Flutterをインストールしたフォルダのbinフォルダを指定してOKをクリック。
  5. 一番下にflutter\binまでのフルパスが追加されたら、OKをクリックして、画面を閉じる。

Flutterが正しくインストールされたか確認する

  1. コマンドプロンプトを起動する
  2. Flutter診断コマンドを実行する
C:\src\flutter>flutter doctor
※診断コマンドを実行するのはどこでもいいので、C:\src\flutterじゃなくてもいい

診断コマンドを実行することで、「何がやってないのか」が表示される。英語だけど。
Google翻訳にコピペするだけでも分かるレベルだと思うので確認してみて。

(実機なら)adbがちゃんと機能しているか確認する

Android Debug Bridge(ADB) が使えるか確認する。
Android Studio が起動してれば使えるはず。
だけど、基本的には Visual Studio Code で開発したいので、
PathにAndroid\sdk\platform-toolsを追加する。

  1. 適当なExplorerを起動して、PCを右クリックし、プロパティを起動。
  2. システムの詳細設定にある、環境変数をクリック。
  3. 上段の「ユーザーの環境変数」にある「Path」をクリックしてから、「編集」をクリック。
  4. その画面で「新規」をクリックし、一番下に入力できるようにする。
  5. Android Studio で、Android SDK Location に選んだ場所に、\platform-tools を追加して入力する。
    (なので、 ~\AppData\Local\Android\Sdk\platform-tools を追加する事になるはず)
  6. OKをクリックして、画面を閉じる。
  7. USBデバッグが有効なAndroid端末を、USB接続して、コマンドプロンプトを起動する。
  8. 以下のコマンドを入力すると、Android端末のデバイスの一覧が表示される。
C:\src>adb devices
※C:\srcじゃなくてもいい

↓こんな感じに表示されるはず。
(device_ip_address:5555 device の部分は、自分の端末の情報が表示される)

C:\src>adb devices
List of devices attached
    device_ip_address:5555 device

↓USBデバッグが有効なAndroid端末が接続されてなかった場合はこうなる。
(何もリストの内容が表示されないってやつ)

C:\src>adb devices
List of devices attached

まずはここまで。

次は Visual Studio Code のインストールとかをしていく。

参考

2
2
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
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?