Help us understand the problem. What is going on with this article?

Flutter学習2日目前編 -公式を読む 2. エディターの設定編-

※自分の学習記録のメモとしてこの記事を書いています。

前回の記事に引き続き、公式ドキュメントをまたやっていきます!
今回はSet up an editorページです。

add an editor plugin for Android Studio, IntelliJ, VS Code, or Emacs.

(翻訳:Android Studio、IntelliJ、VS Code、またはEmacs用のエディタープラグインを追加します)
と公式に書いてあるのですが、私の場合はおそらく実際に触ることになるであろう、Android StudioとVS Codeの設定をしていきます🏃‍♀️

Android Studioをインストールする

既にインストール済みだったのでスキップ。

FlutterとDartプラグインをインストールする

この辺もしかしたら公式の情報古いかも…?なのでアレンジした内容になります。

  1. Android Studioを起動します
  2. ツールバーの「Android Studio」>「Preference」を選択

スクリーンショット 2020-07-30 15.53.58.png
3. Pluginsを選択
スクリーンショット 2020-07-30 15.56.53.png
4. Flutterプラグインをインストール
スクリーンショット 2020-07-30 15.57.27.png
5. Dartプラグインをインストール(私の場合は既にインストールされていました)
スクリーンショット 2020-07-30 15.58.19.png
6. インストールが完了したら再起動してプラグインをONにします

VS Codeのインストール

既にインストール済みだったのでこちらもスキップ。

FlutterとDartプラグインをインストールする

  1. VS Codeを起動
  2. ツールバーから「View」>「Command Palette」を選択

スクリーンショット 2020-07-30 17.42.39.png
3. 「install」と入力して「Extensions: Install Extensions」 を選択
スクリーンショット 2020-07-30 19.19.16.png
4. 検索に「flutter」と入力し、Flutterをインストールします(このとき同時にDartもインストールされるそうです)

flutter doctorで設定を検証する

  1. 再びツールバーから「View」>「Command Palette」を選択
  2. 「doctor」と入力して「Flutter:Run Flutter Doctor」を選択 スクリーンショット 2020-07-30 19.43.55.png
  3. 本来ならば下記のようにOUTPUTタブに結果が表示されるんですが、ここでDartから「flutterSDKのパスが通ってない」とお叱りのエラーを受けました👻 公式のパスの通し方だとどうやら不完全のようでした…。(※前の記事の内容は修正済み)パスを修正して改めて実行して無事OUTPUTに表示ができました。 スクリーンショット 2020-07-30 23.55.05.png

感想

ちょっとずつ公式ドキュメントで間違ってたり足りない情報が出てきて、Qiitaにメモしておいてよかった〜と思えるようになりました😂

後編ではホットリロードをやっていきます🔥🔥🔥

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away