LoginSignup
0
1

More than 3 years have passed since last update.

Flutter入門メモー開発環境設定Windows/Mac

Last updated at Posted at 2020-05-24

Flutterの環境を作りました。
若干つまづいたところを除いて簡単にできたのでメモ。

Flutter環境設定

開発環境手順
インストールからセットアップ手順まで載っています。

MacでもWindowsでも簡単にセットアップができました。
私はVSCodeを利用しています。
その他のエディタに関しては、すみませんがわかりません。

①インストールします

ファイルダウンロードして、
Zipを展開します。

②flutterファイルを展開して、プログラム系のどこかのフォルダ内に[flutter]のフォルダを置きます。

WindowsならProgram Filesなどに展開した[flutter]のフォルダを置きます。

Windowsなら環境変数のPATHに[flutter]フォルダの[bin]フォルダまでのパスを設定します。

Macもコマンドで
export PATH="$PATH:`pwd`/flutter/bin"
を入れるか
export PATH="$PATH:[ルートから~/flutter/bin]
binファイルまでのパスを入れます。
すると環境変数が設定されます。

③VSCodeに拡張機能追加

FlutterプラグインとDartプラグインを追加します。
拡張機能検索窓に入れるとすぐ出てくるのでインストール。

インストール後、Control + Shift + P (MacはControlじゃなくてCommand)でコマンドパレットを開き、
[Flutter: Run Flutter Doctor]と入れます。
他にもAndroidのlicenseが〜と言われます。

今までやったプラグインなどで怒られている場合は確認してください。

④flutter doctorを入れるとターミナルに結果が表示されます。

そこで[×]とか[✔︎][!]が表示されるので、準備ができていない物を確認します。

[×][!]だと準備ができていません。[×]は必須項目です。
多分Android Studioが準備できてないよなどと怒られます。

他、インストールプラグインなどは◯であればとりあえずスルーで。

⑤Android Studio、iPhoneでの確認準備

Androidの動きをデバックで確認したい場合は以下を設定してください。
iPhoneだけなら少し下にスクロール。

■ Android Studioのインストールは手順通りにやればOKです。
インストール後、起動すると設定マーク(Configure)とあるので、それをクリックで編集。
SDK Managerを選択して設定を変更します。
参照リンク

リンクページの下半分に設定の変更について書かれています。
[Android SDK Tools (Obsolete)]の項目にチェックを入れます。
そして設定のAVD ManagerからAndroidのエミュレーターを選びます。

ここで選択したAndroidでデバック時に確認ができます。
 

 
■ iPhoneで実機確認するためにはXcodeのダウンロードが必要です。
デフォルトのプロジェクトから一般[general]の設定に関して編集します。

※iPhoneの実機がないと確認ができないので注意。
参考リンク

⑥flutter doctorで再度確認

VSCodeのコマンドパレット、ターミナルで
flutter doctorを入力して再度結果を確認します。

開発環境に足りない物を教えてくれるので、
[×]になったままの物を確認しましょう。

✗ Android licenses not accepted.というのが出てくると思います。

その場合は、ターミナルに
flutter doctor --android-licensesと入力して実行します。

そのあとに Y/Nでlicensesに同意するかどうかを聞かれるのでY=Yesで応答します。
すると、licensesに同意したことになり、再度確認すると✔︎マークになっていると思います。

最終確認

もう一度[flutter doctor]で最終確認してください。
すべて✔︎が入ればOKです。

※Androidを確認しない場合は[!]が残っていてもOK。

もともとFlutterはサンプルファイルがダウンロードされているので、
実行できるか試しましょう。

VSCodeでまずは右下のフレームにAndroidエミュレーターなど、確認できるデバイスがあるか確認しましょう。
何も選択できる物が無ければ[No Device]となっています。

Androidなら、でAVD Managerの設定をし、エミュレーターを起動すると使えます。
iPhoneは接続して、デバイス標示をクリックして選んでおきましょう。

 

F5を押すと実行できます。
エミュレーターか実機に表示ができたら開発環境の設定が成功しました。

詰まったところ

私が設定時に詰まったところは特に
・Androidのエミュレーター設定
・Android licensesのチェックが付かない ことでした。

エミュレーターはデバイスを選択して、設定をダウンロードする必要があります。
デバイス名横に青文字のリンクがあると思うので、それを押して設定をダウンロードします。

Android licenseは上記記載の通りです。
ダウンロードからの設定時に設定できるのかはよくわかりませんが、ターミナルで実行すればできました。

0
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1