Flutterを体験しよう1 ~インストール~

 

前提記事

kenteiblog.hatenablog.com

 

ということで、公式のドキュメントを参考にしながら、手順通り進めていきたいと思います。まずはWindowsへのflutterインストールからですね。

Get Started: Install on Windows - Flutter

 

なお、私が文章をそのまま意訳した結果については最後のほうに「続きから」の形で隠しておきます。(説明上、余計な文もあるので)

 

では、以下からスタート。

 

WindowsにFlutterをインストールしよう

0. システム要求

Flutterをインストールする環境は最低でも以下の条件を満たす必要があります。

  • OS・・・Windows7またはそれ以上の64bit
  • ディスク容量・・・400MB (Android Studioの容量は含まない)
  • ツール・・・Gitコマンドをたたくことができるターミナル

 

1. Flutter SDKの入手

(0)始める前に注意

一応、今後の作業を進めていく中で、flutterツールを使うことになるので先に注意から。(公式ドキュメントから直訳)

flutterツールは、Google Analyticsを利用して、機能の使用統計情報と基本的なクラッシュレポートを匿名で報告する。このデータはflutterツールの改善に利用される。Analyticsは最初の実行やflutter設定が含まれる実行については送信されないため、データが送信される前にAnalyticsの送信を停止することができる。報告を無効にするには、flutter config --no-analytics と入力し、現在の設定を表示するにはflutter configと入力する。Googleのプライバシーポリシー(www.google.com/intl/ja/policies/privacy)を参照のこと。

とのことなので、気になる方は注意してください。

 

(1)レポジトリのクローン

githubからFlutterのクローンを生成します。コマンドは以下のとおりです。

git clone -b beta https://github.com/flutter/flutter.git

※すでに入手済みの場合、アップデートする方法もあるらしい(まだ読んでない)

Upgrading Flutter - Flutter

 

(2)パスを追加する

ターミナルでflutterコマンドをたたけるように、環境変数にパスを追加します。

「ユーザー環境変数」のPath変数に「flutter/bin」への完全パスを追加しましょう。

 

※念のためですが、環境変数変えたら、ターミナルは再起動しましょう。(しないと更新されないよ(´・ω・`))

 

flutterとコマンドを打つと、Dart SDKのインストールなどが開始され、すべて終了後に以下の表示が出ればOKなはず。

f:id:kentei0715:20180303113709p:plain

 

(3)flutter doctorの起動

意訳すると「Flutterのお医者さん」ですが、さすがにここは英語のまま「Flutter Doctor」と呼びます(笑)


要は、これを起動すると、Flutterのセットアップ完了までに必要な依存関係が足りているか検査してくれるようです。

以下のコマンドをたたきます。(※なお、2018/3/2現在、Git Bashのようなサードパティシェルはサポートしていないらしいので注意です)

flutter doctor

 

私の場合は、以下の表示が出ました。

f:id:kentei0715:20180303114148p:plain

 

私の環境の問題は、

・VS Codeが古い + Dart Code拡張機能が入ってない。

・デバイスが接続されていない?

後者はエミュレーターを起動すればなくなる。

前者は開発ではVSCode使うので、バージョン上げたほうがよさそうですね。Dart Code拡張も必要です。
次章でエディタの設定があるようなので、そこで見ていきましょう。

 

 

上の絵をみてもわかると思いますが、Flutter独自の依存関係がダウンロードされています。(Material fontとかGradle Wrapperとか。) 

Flutterのお医者さん…伊達ではないですね(笑)

 

2. Android セットアップ

(1)Android Studioをインストール

もちろん、私は開発はVS Codeで実施する予定です。
が、Androidエミュレータを動かす手前、ADVの設定などをしないといけません。

昔はコマンドからもできたのですが、今は非推奨(できなくなってたような気もする)のため、Android Studioからの操作を余儀なくされます。

 

コマンドからパパっとできたほうが早いしミスも少ないし(かっこいいし(笑))でいいことずくめだと思うのですが、まぁ世の流れに合わせましょう。


ということで以下の手順です。

Android Studioをダウンロードしインストールする。

Android Studioを起動し、「Android Studio Setup Wizard」を実行する。Android用に開発する際にFlutterが必要とする最新のAndroid SDKAndroid SDKプラットフォームツール、Android SDKビルドツールがインストールされる。

 

 

(2)Androidバイスのセットアップ(ここは実機を使うとき)

※実機を利用する際はここを参照です。

1. デバイスの開発者オプションとUSBデバッグを有効にします。(詳細な手順はAndroidのドキュメントを参照)
2. USBケーブルを用いて、デバイスとPCをつなぐ。デバイス上にプロンプトが表示されたら、デバイスへのアクセスできるようにPCを認証します。
3. ターミナルでflutter deviceコマンドを実行し、接続されているAndroidバイスをFlutterが確認します。
4. fulutter runコマンドをたたいてアプリを起動します。

※もちろんflutterアプリを作っていない状態なので4.は実施できません。あとの章で使うことになるので頭の片隅に入れておきます。

 


(3)Androidエミュレーターのセットアップ(こっちはエミュレータ)


Androidエミュレーター上でFlutterアプリをテストするときは、以下の手順で実施する。

1. マシンのVMアクセラレーションを有効にする。
2. 「Android Studio > Tools > Android > AVD Manager」を起動し、「Create Virtual Device」を選択する。(下図の左下ボタン)

f:id:kentei0715:20180303144745p:plain


3. 「a device definition(デバイス定義)」を選択し、「Next」を選択する。(今回はとりあえずPixelで作ります)

f:id:kentei0715:20180303144850p:plain


4. エミュレートするAndroidバージョンのイメージを1つ以上選択し、「Next」を選択する。(x86またはx86_64イメージ推奨) 今回はとりあえずAndroid7.1.1で。

f:id:kentei0715:20180303145005p:plain


5. 「Emulated Perfomance」 で 「Hardware - GLES 2.0」を選択し、ハードウェアアクセラレーションを有効にする。

f:id:kentei0715:20180303145205p:plain


6. AVDの構成が正しいことを確認して、「Finish」を選択する。

なお、ここまでの流れの詳細は、Create and Manage Virtual Devices | Android Studioを参照しましょう。

 

7. 「Android Virtual Device Manager」で、ツールバーの「Run」をクリックする。エミュレータが起動し、選択したOSバージョンとデバイス用のキャンバスが表示される。

8. flutter runコマンドを起動しアプリを起動する。接続されたデバイス名は<platform>ように構築されたAndroid SDKである。(platformはx86のようなチップファミリ)

 

※もちろんflutterアプリを作っていない状態なので8.は実施できません。あとの章で使うことになるので頭の片隅に入れておきます。

 

なお、デフォルトでは、FlutterはadbツールにおけるAndroid SDKバージョンを使用します。別のAndroid SDKを利用したい場合は、ANDROID_HOME環境変数をそのSDKのインストールディレクトリに設定する必要があります。

 

 

と、ここまでが今日の説明。次回はエディタの設定を見ていきます。

最初に述べた通り、私が訳した結果については、続きからの形で隠しておきます。

 

以上です。

2018/3/4 賢帝俊来

 

以下、日本語訳です。(間違っていても責任はとれませんのでご容赦) 

◆システム要求
Flutterをインストールして動かすには、開発環境が以下の最小要件を満たさなければならない。

・OS: Windows7またはそれ以上の64bit
・ディスク容量: 400MB (Android Studioの容量は含まない)
・ツール: Flutterは自身の環境で利用できる以下のコマンドラインツールに依存する
(1)Git for Windows(コマンドプロンプトからgitを利用している場合も含む)
すでにGit for Windowsがインストールされているなら、コマンドプロンプトPowerShellからgitコマンドが叩けることを確認しなさい。

 

◆Flutter SDKの入手
Flutterを入手するため、レポジトリをクローンし、flutterツールをパスに追加しなさい。動作中のFlutter Doctor(?)はインストールが必要な残りの依存関係をすべて表示する。

  

(1)レポジトリのクローン
始めてFlutterをインストールする場合は、レポジトリをクローンする。(コマンドは以下)

git clone -b beta https://github.com/flutter/flutter.git

※既に存在するFlutterのバージョンアップをする場合は、「Upgrading Flutter」を参照すること。


(2)パスを更新する
ターミナルでflutterコマンドが打てるように、環境変数パスを追加する必要がある。

・「コントロールパネル」→「ユーザーアカウント」→「ユーザーアカウント」→「環境変数の変更」に移動する。
・「ユーザー環境変数」の下にPathという変数があるかどうかを確認する。
→存在する場合は、「flutter/bin」フォルダへの完全パスを追加する。(既存の値とは";"で分ける)
→存在しない場合は、「Path」という名前の変数を追加し、「flutter/bin」フォルダへの完全パスを追加する。

上記のパス更新を適用する際は、ターミナルウィンドウ(コマンドプロンプトPowerShellなど)を再起動すること。

(3)flutter doctorの起動

新しいコマンドプロンプトまたはPowerShellウィンドウを開いて、以下のコマンドを実行する。これにより、セットアップを完了するためにインストールする必要がある依存関係があるかどうかを確認することができる。

flutter doctor

コマンドプロンプトまたはPowerShellのいずれかで上記コマンドを実行する。(現状、FlutterはGit Bashのようなサードパーティのシェルをサポートしていない。)

このコマンドは環境をチェックし、ターミナルウィンドウに詳細を出力する。FlutterにはDart SDKが組み込まれているため、個別にDartをインストールする必要はありません。インストールが必須のソフトウェアや実行するさらなるタスクに対する出力をチェックする。

以下は例である。

✗ Minimum supported Android SDK version is 25 but this system has 23. Please upgrade.
(サポートされているAndroid SDKの最小バージョンは25だが、このシステムでは23が利用されている。アップグレードしなさい)

初めてflutterコマンドを動かしたとき、独自の依存関係がダウンロードされ、コンパイルされる。その後の実行ははるかに高速となるだろう。

以下のセクションでは、これらのタスクを実行しセットアッププロセスを完了する方法を説明する。
IDEを使用する場合、IntelliJ IDEA、Android Studio、およびVS Code用のプラグインが利用可能であることをflutterが出力する。 FlutterおよびDartプラグインをインストールする手順については、「エディタの設定」を参照すること。

不足している依存関係をインストールしたら、再びflutter doctorコマンドを実行し、すべてを正しく設定していることを確認する。

flutterツールは、Google Analyticsを利用して、機能の使用統計情報と基本的なクラッシュレポートを匿名で報告する。このデータはflutterツールの改善に利用される。Analyticsは最初の実行やflutter設定が含まれる実行については送信されないため、データが送信される前にAnalyticsの送信を停止することができる。報告を無効にするには、flutter config --no-analytics と入力し、現在の設定を表示するにはflutter configと入力する。Googleのプライバシーポリシー(www.google.com/intl/ja/policies/privacy)を参照のこと。

 

 

◆エディタのセットアップ
flutterコマンドラインツールを使用すると、任意のエディタでFlutterアプリケーションを開発できるようになる。コマンドプロンプトでflutter helpを入力すると、利用可能なツールが表示される。

私たちはFlutterアプリケーションの編集や実行、デバッグをサポートしているRich IDE experience用のプラグインを使用することを推奨する。詳しい手順はConfigure editor(次章)を参照のこと。


Android セットアップ

(1)Android Studioをインストール

Android用のFlutterアプリケーションを開発するため、MacWindowsまたはLinux(64bit)マシンを利用することができる。

Flutterは以下の手順でAndroid Studioをインストールし設定を実施する必要がある。

1. Android Studioをダウンロードしインストールする。

2. Android Studioを起動し、「Android Studio Setup Wizard」を実行する。Android用に開発する際にFlutterが必要とする最新のAndroid SDKAndroid SDKプラットフォームツール、Android SDKビルドツールがインストールされる。

 

Androidバイスのセットアップ
Androidバイスで作成したFlutterアプリを動かしたりテストしたりしたいなら、Android4.1以上のデバイスが必要となる。

1. デバイスの開発者オプションとUSBデバッグを有効にすること。(詳細な手順はAndroidのドキュメントを参照)
2. USBケーブルを用いて、デバイスとPCをつなぐ。デバイス上にプロンプトが表示されたら、デバイスへのアクセスできるようにPCを認証する。
3. ターミナルでflutter deviceコマンドを実行し、接続されているAndroidバイスをFlutterが確認する。
4. fulutter runコマンドをたたいてアプリを起動する

デフォルトでは、FlutterはadbツールにおけるAndroid SDKバージョンを使用する。別のAndroid SDKを利用したい場合は、ANDROID_HOME環境変数をそのSDKのインストールディレクトリに設定する必要がある。

 

Androidエミュレーターのセットアップ
Androidエミュレーター上でFlutterアプリをテストするときは、以下の手順で実施する。

1. マシンのVMアクセラレーションを有効にする。
2. 「Android Studio > Tools > Android > AVD Manager」を起動し、「Create Virtual Device」を選択する。
3. 「a device definition(デバイス定義)」を選択し、「Next」を選択する。
4. エミュレートするAndroidバージョンのイメージを1つ以上選択し、「Next」を選択する。(x86またはx86_64イメージ推奨)
5. 「Emulated Perfomance」 で 「Hardware - GLES 2.0」を選択し、ハードウェアアクセラレーションを有効にする。
6. AVDの構成が正しいことを確認して、「Finish」を選択する。

上記の詳細についてはManaging AVDs(https://developer.android.com/studio/run/managing-avds.html)を参照する。

7. 「Android Virtual Device Manager」で、ツールバーの「Run」をクリックする。エミュレータが起動し、選択したOSバージョンとデバイス用のキャンバスが表示される。

8. flutter runコマンドを起動しアプリを起動する。接続されたデバイス名は<platform>ように構築されたAndroid SDKである。(platformはx86のようなチップファミリ)

次の章へ