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 賢帝俊来