ども、木村です。本業はデータサイエンティスト、副業でアプリ開発をしています。
本記事は、Flutterにおけるエディタの選定と設定方法について解説します。
Flutter開発に使うエディタの選定に迷っている方
エディタのおすすめの設定を知りたい方
エディタの選定
エディタの種類
まずはFlutterの開発で使用されるエディタをご紹介します。
| エディタ | 特徴 |
|---|---|
| Android Studio | Android OS向けのアプリを作るためのIDE。Dartにも対応。無料で使える。 |
| Visual Studio Code | 汎用言語IDE。昨今のエディタで最も人気があり、非常に多くのプラグインが提供されている。 |
| Dart Pad | ブラウザで開発できる。インポートできないライブラリがあったり、動作が重いことがある。 |
| IntelliJ IDEA | Android 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を入門から実践レベルまで一通り学習できる方法をまとめました。
