Flutter入門

【5分で分かる】エディタの選定と設定方法 | Flutter入門


ども、木村です。本業はデータサイエンティスト、副業でアプリ開発をしています。

本記事は、Flutterにおけるエディタの選定と設定方法について解説します。

想定読者

Flutter開発に使うエディタの選定に迷っている方

エディタのおすすめの設定を知りたい方

エディタの選定

エディタの種類

まずはFlutterの開発で使用されるエディタをご紹介します。

エディタ特徴
Android StudioAndroid OS向けのアプリを作るためのIDE。Dartにも対応。無料で使える。
Visual Studio Code汎用言語IDE。昨今のエディタで最も人気があり、非常に多くのプラグインが提供されている。
Dart Padブラウザで開発できる。インポートできないライブラリがあったり、動作が重いことがある。
IntelliJ IDEAAndroid Studioの上位互換的IDE。Dartを扱うだけであれば無料の範囲で使える。
その他 IDE他にもEclipse,Emacs,VimなどDartのプラグインを適応すれば開発できるものがあるが、今回はあくまで入門者向けの内容なので割愛します。

上記のIDEであればFlutterの開発が可能ですが、もし開発の生産性を望むのであれば、Visual Studio Code、Android StudioまたはIntelliJ IDEAがおすすめです。(※ 利用者が多く、公式のチュートリアルでも上記のエディタを前提に話が進むため)

ポイント

Flutter開発にはVisual Studio Code、Android StudioまたはIntelliJ IDEAがおすすめです!

Visual Studio Codeの設定方法

この記事では、Visual Studio Codeの導入方法やおすすめの設定、プラグインをご紹介します。

Visual Studio Codeの導入方法

まずはこちらのVisual Studio CodeのHPからダウンロードしましょう。

ダウンロードが完了したら、ファイルを開いて手順に沿って導入を進めてください。

Visual Studio CodeでFlutterのプラグインを導入する

次にVisual Studio CodeでFlutterの開発を行うためのプラグインを導入します。

Visual Studio Codeを開き、左の「extensions」を押下。その後検索窓に「Flutter」と入力しましょう。

おそらく一番上にFlutterのプラグインが表示されますのでそちらをインストールしてください。

これでFlutterの開発をするための必要最低限の準備が完了しました。

おすすめのプラグイン

最後にVisual Studio Codeに入れておくと開発が捗るおすすめのプラグインをご紹介します。

  • Better Comments(コメントアウトを色分けできるプラグイン)
  • Color Highlight(カラーコードに色を付与してわかりやすくするプラグイン)
  • Error Lens(エラー文言をソース上に表示してくれるプラグイン)
  • Flutter Tree(特定のコマンドでソースコードを自動生成するプラグイン)
  • Bracket Pair Colorizer 2(括弧の位置をわかりやすく色分けしてくれるプラグイン)
  • Dart Data Class Generator(定義された変数からクラスコードを自動生成してくれるプラグイン)
  • flutter-stylizer(ソースコードを綺麗に整形してくれるプラグイン)

まとめ

IDEは開発の生産性を決める重要なツールです。

ぜひ自身の環境にマッチしたIDEを選択して、素敵なFlutterライフを楽しんでください!

最新のFlutterの勉強方法 まとめ

Flutterを入門から実践レベルまで一通り学習できる方法をまとめました。

Flutterの勉強方法を知る

Flutterを動画で学習する

Flutterを書籍で学習する