[Flutter] WindowsでのAndroid 開発環境設定




Flutter

 
FlutterはGoogleが提供するものでクロスプラットフォーム開発が可能です。Android以外にもiOSアプリやWebアプリ開発もできます。

Google Trendでのクロスプラットフォームの動向は、

1x1.trans - [Flutter] WindowsでのAndroid 開発環境設定

Flutterに注目が集まっていて日本も2019年から関心が高いようです。

ここではFlutterのAndroid開発環境をWindowsで作ってみたいと思います。iOSアプリではMacが必要になります。
 

 

Flutter SDK

 
Flutter SDKを以下よりOSに合わせてダウンロードします。(ここではWindows OSとして進めていきます)
Install Flutter

1x1.trans - [Flutter] WindowsでのAndroid 開発環境設定

Windowsのケース:開発環境に必要とされる条件

  • OS: Windows 7 SP1 or later (64-bit)
  • Disk Space: 1.32 GB (does not include disk space for IDE/tools)
    • これはflutterでのことですが、Android Studioでエミュレータを使う場合は数十GBの空きが必要です
  • Tools: Flutter depends on these tools being available in your environment.
    • Windows 10であれば比較的楽ですが、とりあえずはケースバイケースで揃えます
    • Windows PowerShell 5.0 or newer (this is pre-installed with Windows 10)
    • Git for Windows 2.x, with the Use Git from the Windows Command Prompt option.If Git for Windows is already installed, make sure you can run git commands from the command prompt or PowerShell.
 

ダウンロード

以下は公式の Windows install に沿って進めていきます。

flutter_windows_xxx.zip のzipファイルをダウンロード

1x1.trans - [Flutter] WindowsでのAndroid 開発環境設定

過去の古いSDKはこちら Flutter SDK releases にあります。

flutter_windows_xxx.zip のzipファイルを解凍し、例えばC:\src\flutter 以下にフォルダをコピペします。

C:\Program Files\ 以下に通常のソフトのようにインストールすると管理者権限がうるさいので推奨していないようです。

 

環境変数PATHの設定: Flutter SDK

このflutter sdkにPATHを通してどこからでも実行させられるように環境変数のPATHに追加します。

Windowsの「スタート」から「Windows システムツール」にある「コントロールパネル」を開きます。
 
1x1.trans - [Flutter] WindowsでのAndroid 開発環境設定

「システムとセキュリティ」「システム」「システムの詳細設定」から
「システムのプロパティ」の「詳細設定」タグの下に「環境変数(N)…」があります。

環境変数には、ユーザー環境変数と、システム環境変数がありユーザー側を選びます。
Pathの変数には値としてローカルパスが割り当てられています。なければ新規で作成

編集から、fluetter SDKのbinを設定します。

1x1.trans - [Flutter] WindowsでのAndroid 開発環境設定

例えば c\_Flutter\src\flutter\bin のパスを新規で追加

1x1.trans - [Flutter] WindowsでのAndroid 開発環境設定

 

Android Studio

 
Android Studioを設定します。これを使うとAndroidのエミュレータが使用できます。またDartのエディタとしても使えます。

 

インストール

 
Android Studio をWindowsにインストールするには以下を参考にしてください。
 

ccf1639bf2a87341a46fd52c9da41b46 s 100x100 - [Flutter] WindowsでのAndroid 開発環境設定
Androidアプリを作るためには開発環境が必要で、Googleの推奨環境は Android Studio (アンドロイド スタジオ) で...

 
注意点として、flutterとは違ってインストール場所の変更はお勧めできないのでそのまま設定していきます。結果として

C:\Program Files\Android
C:\Users\「ユーザー名」\AppData\Local\Android

以下にファイルが格納されます。(これ以外にもありますが)、また「ユーザー名」を日本語にすると問題が起きますのでアルファベットのユーザー名を作って再インストールしないと後々面倒な事になります。

エミュレータ:
Android Studioがインストールできたなら、以下を参考にエミュレータを設定します。
 

avd a00 100x100 - [Flutter] WindowsでのAndroid 開発環境設定
アプリが動作するか確認するためには、Android Studio のエミュレータが便利です。エミュレータの設定には Device Manag...

 
USBドライバー:
またUSBドライバーを設定して実機上でテストできるようにもできます。
 
cat27 00b 100x100 - [Flutter] WindowsでのAndroid 開発環境設定
Androidの開発環境を設定した後は、実機でデバッグできるように実機とUSBで接続し、ドラドライバーのインストールと設定が必要です。

 

 

環境変数PATHの設定: Android Studio

 
flutterと同じようにAndroid StudioのPATHを設定します。
PATHは先ほどのAndroidフォルダ以下にあるSdkです。
C:\Users\「ユーザー名」\AppData\Local\Android\Sdk

環境変数のPathに設定します。

1x1.trans - [Flutter] WindowsでのAndroid 開発環境設定

 

Flutter doctor

 
flutter doctorを使って環境がセットアップされているか確認します。
コマンドプロンプトを起動して以下コマンドを入力します。

コマンドプロンプトは前出のコントロールパネルの近くにあります。

1x1.trans - [Flutter] WindowsでのAndroid 開発環境設定

診断結果が表示されるのでそれぞれ対処していきます。

Flutterは問題ないようです。VS Codeはたまたま使っていたのでFlutter extensionが入っていないということですが、これは必須ではありません。

  1. Android licenses not accepted
  2. Flutter plugin not installed
  3. Dart plugin not installed

1. Android Licensesが許可されていないようですが対処方法が書いてあります。

To resolve this, run: flutter doctor –android-licenses

 
以下コマンドを入力して規約に了承する意味のyを入力

2. FutterとDartのプラグインがインストールされていない件はFlutterのプラグインを入れるとDartも一緒に入ります。

Android Studio のTop画面の下から「Configure」「SDK Manager」を起動します

1x1.trans - [Flutter] WindowsでのAndroid 開発環境設定

「Plugins」タグから、「flutter」を検索してインストールします。

1x1.trans - [Flutter] WindowsでのAndroid 開発環境設定

インストールが終わると「Restart IDE」と表示されるのでクリックしてAndroid Studioを再起動させます。

再度doctorを走らせてみると

これで環境設定がある程度できました。次は実際のアプリを作っていきましょう

References:
Flutter
Flutter architectural overview
Flutter Install
Set up an editor – Flutter







アプリ開発が上達するお勧め

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンラインのプログラミングスクールがいいでしょう。

TECH ACADEMY
オンライン説明会



Code Camp
現役エンジニアによるオンラインプログラミングスクール【CodeCamp】


直接(ネットで)誰か分かる人に聞いた方が早く解決して、上達も早いと思います。



侍エンジニア塾
侍エンジニア塾 無料体験レッスン


とても簡単なことなのに本やネットの画像だけでは分かりにくいことはあります。実際に質問してピンポイントで教えてもらうと、なんだそんなこと、と言うのがけっこうあります。


シェアする

  • このエントリーをはてなブックマークに追加

フォローする