プログラミング初心者が Flutter で簡単な iOS・Android 向けのモバイルアプリをひとつ完成させることができるようになることを目的としています。

※環境構築とFlutter開発の入門の学習動画を『Flutterラボ』でも公開しているのでぜひこちらも合わせてご覧ください。

【1】Git for Windowsダウンロード＆インストール

公式サイトからダウンロードします。

ダウンロードしたファイルを実行します。

特にこだわりがなければすべてデフォルトのまま「Next」をクリックし、インストールを完了してください。

【2】Flutter SDKのダウンロード

:注) 『【Flutter】【Dart】環境構築 〜Flutter For Web編〜』から来られた方は【2'】にお進みください

下記リンクよりWindowsのVersion1.17.3をダウンロードします。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

【2’】Flutter SDK(Beta版)のダウンロード

SDK archiveをクリック

Flutter beta版の選択

version 1.20.2をインストールしてください。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ダウンロードしたZIPファイルをユーザーディレクトリ直下にフォルダを作成し、解凍してください。(注：ユーザー直下にしないでください。)
「develop」というユーザーを使用しておりますので、「develop」の部分をご自身のアカウント名に変更する必要があります。

【3】Android Studioのダウンロード&インストール

公式サイトからダウンロードします。

https://developer.android.com/studio/?hl=ja

ダウンロードしたファイルを実行します。

すべて「Next」で進み、「Finish」で完了してください。
途中の「Select UI Theme」では著者の好みで「Darcula」を選択していますが、どちらでも構いません。

この画面になれば完了です。

【4】パスの設定

まず始めに左下の検索窓で「環境変数」と検索してください。
初めてパスを設定される方と、以前に設定したことのある方で作業内容が少し変わります。
自分に合った工程を進めてください。

①初めてパスを通す方
ユーザー環境変数に「Path」を追加します。(変数名はPathで行います。)
変数値の「develop」の部分をご自身のアカウント名に変更して追加してください。

②以前にパスを通したことがある方
環境変数「Path」が既に設定されていると思います。

その「Path」を選択し、編集ボタンをクリックすると、以下の画面が表示されます。

右にある新規ボタンからflutterのbinフォルダのパスを設定します。

ここからは①②の方共通
コマンドプロンプトを起動し、「flutter doctor」を実行し、以下のようになれば完了です。

すべて緑色のマークになれば、Flutterを正しく動かすことのできる環境が整ったということになります。
上の画像を例に挙げると、一番の上の項目以外はまだ問題があるのでFlutterを正しく動かすことはできません。
ほとんどの場合、赤色の×マークの後に理由や解決方法が出力されているのでそれを見ながら解決していきましょう。

【5】Android licenseを許可する

一番上にある赤色の×マークは「To resolve this. run: 」以降のコマンドを実行すれば解決できます。

ライセンス承認は、「y」を入力して Enterを押すと行うことができます。

すべてのライセンス承認が完了した後に、再度「flutter doctor」を実行してください

一番の上にあった赤色の「×」マークが緑色のマークに変わりました。

【6】Android StudioにFlutterプラグインをインストール

他の2つある赤色「×」マークはAndroid Studio の設定でFlutterとDartのプラグインを追加することで解決することができます。
まずは、Android Studioを起動し、右下の「Configure」から「Plugins」をクリックしてください。

「Flutter」と検索してプラグインを見つけ、「Install」ボタンをクリックします。

「Yes」でDartプラグインも同時にインストールします。

「Restart IDE」でAndroid Studioを再起動します。

再度「flutter doctor」を実行してください。
「Connected device」以外は緑色のマークになりました。

「Connected device」を緑色のマークにするには、アプリの実行を確認するために実機を接続するか、エミュレータを起動すると解決します。
本書ではエミュレータにて実行確認を行いますので、後にその起動を行います。

【7】新規Flutterプロジェクトの作成

Android Studioから「Start a new Flutter project」をクリックします。

「Flutter Application」を選択したまま、「Next」をクリックします。

「Flutter SDK path」にFlutterSDKを解凍したパスを入力し、「Next」をクリックします。

そのままで「Finish」をクリックします。

デモアプリが作成されました。

注::)【Flutter】【Dart】環境構築 〜Flutter For Web編〜 から来られた方はここで下の記事に戻ってください。

【8】Emulatorの実装

アプリの実行のために必要なデバイスを用意します。
実機を接続しても構いませんが、本書ではエミュレータを使用しますので、その起動を行います。

Android Studioのタブ内にあるToolsを開き、「AVD Manager」ボタンをクリックします。

「Create Virtual Device...」をクリックします。

どのデバイスを選択しても構いませんが、今回は「Pixel 2」を選択し「Next」をクリックします。

「Pie」ダウンロードし、選択した状態で「Next」をクリックします。

「Finish」をクリックします。

エミュレータが用意できたので、実行します。

実行ボタンをクリックします。(右向きの三角形ボタンで実行。)

エミュレータが起動できれば完了です。

「flutter doctor」を実行すると、「Connected device」も緑色のマークになり、すべての準備が完了しました。

【9】デモアプリの実行

最後に、Android Studioの実行ボタン(右上にある緑色の三角ボタン)をクリックして、デモアプリが実行できれば完了です。

最初の実行は時間がかかる場合があるのでご注意ください。

環境構築完了！

これにてWindowsに置ける環境構築は完了です。
お疲れ様でした！

それでは早速アプリ開発に取り掛かっていきましょう