Flutterを体験しよう2 ~エディタの設定~

 前提記事

kenteiblog.hatenablog.com


 

ということで、公式のドキュメントを参考にしながら、手順通り進めていきたいと思います。今回は、エディタの設定ですね。

Get Started: Configure Editor - Flutter

 

では、以下からスタート。

 

Flutter用にエディタを設定しよう

※私はVisual Studio Code(VS Code)を利用します。

1. VS Codeのインストール

以下からインストールしましょう。

code.visualstudio.com

 

なお、Flutter推奨バージョンは「1.20.1またはそれ以降」とのことです。

 

2. Dart Codeプラグインをインストール

(0)VS Codeを起動します。

(1)「表示 > コマンドパレット」を呼び出し、「install」入力します。
 「拡張機能のインストール(Extensions: Install Extension)」というものがあるので、
 それを選択します。(スクロールしないと出ないかも)

f:id:kentei0715:20180303172142p:plain

 

 

(2) 検索窓に「dart code」と入力して、拡張機能一覧からDart Codeを選択してインストールします。

f:id:kentei0715:20180303172521p:plain

 

 

(3) 再読み込みボタンを押すと、インストールが反映されます。 

 

 

3. Flutter Doctorでセットアップを検証

注意:

この3の内容については、上記までの流れでやると体験できません。(Fluter: Run Flutter Doctorが表示されません。)

というのもこれができるのはプロジェクトを作った後のため。(次章で作成します)
ドキュメントに合わせて書いておきますが、順番にやっているとできないことはお忘れなく。

 

(1)「表示 > コマンドパレット」を呼び出し、「doctor」と入力します。
 「Flutter: Run Flutter Doctor」というものがあるので、それを選択します。

(2) 「出力」タブ内に問題が出ていなければ問題なし。

 

 

 

 

と、ここまでが今日の説明。次回はプロジェクトの作成や実行、Hot Reloadを体験したいと思います。

最初に述べた通り、私が訳した結果については、続きからの形で隠しておきます。

 

以上です。

2018/3/7 賢帝俊来