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 賢帝俊来

 

以下、日本語訳です。(間違っていても責任はとれませんのでご容赦)

 

エディタの設定


コマンドラインツールと組み合わせたテキストエディタを利用することでFlutterアプリをビルドできます。しかし、私たちはエディタプラグインを使うことを薦めます。エディタプラグインを利用することで、コードの補完機能やシンタックスハイライト、ウィジェットの編集アシスト、実行とデバッグのサポートなどを受けられます。

以下の手順を実施し、Android StudioIntelliJ、またはVS Code用のエディタプラグインを追加する。もしほかのエディタを使いたい場合は、OK、「Create and run your first app」のステップに進む。

 

(VS Codeを使うので、こっちを読む)

Visual Studio Code (VS Code) セットアップ

VS CodeはFlutterの実行とデバッグをサポートする軽量なエディタである。

 

◆VS Codeのインストール
version1.20.1またはそれ以降を使用のこと。(https://code.visualstudio.com/)

 

Dart Code プラグインをインストール
1. VS Codeを起動する
2. 「表示 > コマンドパレット」を呼び出す
3. 「install」と入力し、拡張機能のインストール(Extensions: Install Extension)アクションを選択する
4. 検索窓に「dart code」と入力し、一覧から「Dart Code」を選択して「インストール」ボタンをクリックする
5. VS CodeをリロードするためOKを選択する

 

◆Flutter Doctorでセットアップを検証
1. 「表示 > コマンドパレット」を呼び出す
2. 「doctor」と入力し、Flutter:Flutter Doctorを実行する(Flutter: Run Flutter Doctor)アクションを選択する
3. 「OUTPUT」ペインに問題が出力されていないかを確認する

 

次のステップ

初めのプロジェクトを作成・実行し、「Hot Reload」を体験してみよう。