松山事務所の岩名です。
モバイルアプリ開発がやりたくて、個人的に興味があったFlutterを勉強し始めました。
今回は入門ということで、Windows10への環境構築について書いていこうと思います。

Flutterとは

Googleが開発したオープンソースのモバイルUIフレームワークで、
Dartという言語を使って開発していきます。

「Hot Reload」という仕組みによって、
コードの変更をアプリへ即時反映してくれるので、開発効率が良いです。
また、全て独自のUIを使用する為、
プラットフォーム間で差異が少ないなど、
他にはない特徴を持っており、最近注目を集めているようです。

Flutterの開発では、AndroidStudioまたはIntelliJまたはVSCodeを使用します。
私のPCにはAndroidStudioとVSCodeがインストールされてました。
もしインストールされていない方は事前に入れておいてください。

構築手順

１．Flutter SDKのダウンロード

Flutterの公式サイトから下記のzipファイルをダウンロードし、好きな場所に解凍します。
flutter_windows_v0.7.3-beta.zip

※Flutterのリポジトリからcloneでも可。

２．PATHを通す

環境変数(Path変数)にflutter/binまでのパスを追加します。
⇒ 解凍したフォルダ内にあるflutter_console.batを実行することで、Pathが通った状態でコンソールが立ち上がるので、
ちょっと触ってみる程度なら、環境変数に追加しなくても良いかもしれません。

３．依存関係のチェック

下記コマンドを実行することで、
flutterを使うにあたって必要な環境が整っているかどうかをチェックし、レポートを表示くれるようです。

実行した結果、私の環境では下記のようになりました。

「!」「X」が出ているものを一つずつ解決していきます。

■ライセンスの警告

上記はライセンスの問題で、メッセージに書かれている下記コマンドを実行します。

色々と聞かれるかと思いますが、全て「y」を入力します。

※ちょっと調べてみたところ、下記のコマンドでも大丈夫みたいです。

■プラグインの警告

上記はAndroidStudioに「Flutter」と「Dart」のプラグインがインストールされていないと言っているので、
プラグインを入れれば問題ありません。

プラグインはAndroidStudioを起動し、
File > Settings… > Pluginsから「Flutter」を検索し、インストールしてください。
FlutterをインストールするとDartは自動的にインストールされます。

■デバイスの警告

デバイスが接続されていないという警告なので、
実機を繋ぐか、エミュレータを起動することで解決できます。

エミュレータの設定については、下記を参考にしてもらえればと思います。
Androidエミュレータの設定

これで全て解決したので環境構築は終わりです。

Hello Worldを表示してみる

最初に解凍したフォルダに、examplesというフォルダがあり、
いくつかサンプルが用意されています。
今回はその中の「hello_world」を動かしてみます。

実行したいプロジェクトフォルダまで移動し、runコマンドを実行するだけです。

起動できました！

とりあえず、無事に環境構築と動作確認が完了したので、
これから実際にプログラムを書いていこうと思います。

TOP
TOP