Windows10でFlutterの開発環境を整える

2018/08/21

Flutterはモバイルアプリ向けのクロスプラットフォーム開発SDKです。iOS/Androidに対応しています。

ちょっと入門してみようと思って環境をセットアップ。公式サイトが充実しているので躓くところはありませんでした。Get Started: Installを参考に進めればOKです。

環境はAndroid Studio 3.1.3がインストール済みのWindows10です。まっさらなところからではありません。悪しからず。

Flutter SDKのダウンロード

まずはFlutter SDKをダウンロードします。500MB強あるので気長に待ちます。

ちなみに、Flutterは絶賛開発中なのでstableな正式版はありません。master, dev, betaの3種類が用意されています。masterは開発ビルドなので普通はdevとbetaのどちらかを選ぶことになります。

release channelsについての説明を読む限り、比較的安定しているdevをピックアップしてbetaとしてリリースする、という感じらしい。

作業時点では

  • dev: v0.5.7 (2018/7/17)
  • beta: v0.5.1 (2018/6/20)

となっていました。今回は始めの一歩ということで安定性を重視してbetaをチョイスします。

ダウンロードしたzipファイルを任意のディレクトリに展開したらセットアップ完了です。今回はD:\flutterに展開しました。

doctorコマンドによる診断

flutterにはdoctorというセットアップ状況を診断してくれるコマンドがあります。セットアップが終わったらこいつを実行しましょう。

コマンドラインでflutterを実行する場合は以下のどちらでもいいみたいです。

  • 展開したディレクトリ内にある flutter_console.bat を実行する
  • 環境変数PATHに D:\flutter\bin を追加しておく

本格的に開発するならPATHを通しておくのが無難ですかね。

PATHを通したらコマンドプロンプトからdoctorコマンドを実行してみます。

F:\>flutter doctor
Updating flutter tool...
  ╔════════════════════════════════════════════════════════════════════════════╗
  ║ WARNING: your installation of Flutter is 61 days old.                      ║
  ║                                                                            ║
  ║ To update to the latest version, run "flutter upgrade".                    ║
  ╚════════════════════════════════════════════════════════════════════════════╝



  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.io                   ║
  ║                                                                            ║
  ║ The Flutter tool anonymously reports feature usage statistics and crash    ║
  ║ reports to Google in order to help Google contribute improvements to       ║
  ║ Flutter over time.                                                         ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://github.com/flutter/flutter/wiki/Flutter-CLI-crash-reporting        ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://www.google.com/intl/en/policies/privacy/                           ║
  ║                                                                            ║
  ║ Use "flutter config --no-analytics" to disable analytics and crash         ║
  ║ reporting.                                                                 ║
  ╚════════════════════════════════════════════════════════════════════════════╝

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel beta, v0.5.1, on Microsoft Windows [Version 10.0.17134.165], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK 27.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[√] Android Studio (version 3.1)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[!] Connected devices
    ! No devices available

! Doctor found issues in 2 categories.

F:\>

診断状況はDoctor summaryに表示されます。

  • Flutterはインストール済み
  • Android toolchain (SDKのことですね) は検知できたが、一部のライセンスが同意未了
  • Android Studioは検知できたが、FlutterとDartのpluginがインストールされていない
  • 接続済みデバイスが見つからない

となっていますね。

デバイスはつないでない&エミュレータを起動していないのでいったん無視するとして、Android toolchainのライセンス問題を片付けます。doctorが提示してくれている通り、flutter doctor --android-licensesコマンドを実行します。

F:\>flutter doctor --android-licenses
3 of 6 SDK package licenses not accepted. 100% Computing updates...
Review licenses that have not been accepted (y/N)? y
【中略】
All SDK package licenses accepted


F:\>

これでOK。 doctorコマンドの指摘を一つずつ潰していけば環境が整う、という仕組みになっています。

Android Studioの設定

Android Studio自体はインストール済みなのでプラグインのインストールから。

FlutterDartの2つのプラグインを導入してAndroid Studioを再起動するとStart a new Flutter projectというメニューが追加されます。これを選択して、ウィザードに従っていけば新規プロジェクトが作成できます。

Flutterアプリの実行

適当なエミュレータを起動するか実機をUSBで接続するかしてから Run > Run を選択します。

初回はgradleの初期化が走るので結構時間がかかることがあります。気長に待ちましょう。

デモアプリが起動したら成功です。

この状態でhot reloadが有効になっています。main.dartを適当に書き換えて保存するとアプリに即座に反映されます。便利!




おススメ