見出し画像

WindowsでのFlutterアプリ開発環境構築

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

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

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

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

画像1

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

画像2

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

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

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

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

スクリーンショット 2020-06-22 23.51.24

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

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

SDK archiveをクリック

画像35

Flutter beta版の選択

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

画像39

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

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

画像4

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

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

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

画像5

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

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

画像6

画像7

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

画像8

【4】パスの設定

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

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

画像9

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

画像10

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

画像11

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

画像12

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

画像13

画像14

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

【5】Android licenseを許可する

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

画像15

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

画像16

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

画像17

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

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

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

画像18

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

画像19

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

画像20

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

画像21

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

画像22

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

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

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

画像23

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

画像24

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

画像25

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

画像26

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

画像27

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

【8】Emulatorの実装

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

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

画像28

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

画像29

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

画像30

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

画像31

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

画像32

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

画像33

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

画像34

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

画像35

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

画像36

【9】デモアプリの実行

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

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

画像37

環境構築完了!

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

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


この記事が気に入ったらサポートをしてみませんか?