この記事は、株式会社スピードリンクジャパン Advent Calendar 2024 の9日目の記事です。

こんにちは！今回は、Flutterの開発で私がよく使用している便利な機能をいくつかご紹介します。これからFlutter開発を始める方や、すでに開発を行っている方でも、きっと役立つテクニックが見つかるはずです。

VSCodeでの開発をより効率的にするため、ぜひ試してみてください！

1. ウィジェットラップのショートカット

操作方法:

ウィジェットを選択してCommand + .を押すと、「Wrap with Container」や「Wrap with Column」などのオプションが表示されます。

使いどころ:

ウィジェットを他のウィジェットでラップする作業が簡単になります。例えば、ColumnウィジェットをContainerで囲む場合などに便利です。

2. Flutter Outlineを活用

Flutter Outlineは、コードの構造をツリー形式で表示してくれる便利なサイドパネルです。

開き方:

VSCodeには、ショートカットで簡単にウィジェットテンプレートを生成するスニペット機能が用意されています。

例:

使いどころ:

よく使うウィジェットやメソッドを素早く生成でき、手入力の手間が減ります。

　　　　　　　　　　　　　　　　　　　↓

設定方法：

VSCodeのsettings.jsonに以下を追加：

"editor.formatOnSave": true,
"editor.formatOnType": true,

使いどころ：

操作方法：

使いどころ：

今回紹介した小技を活用することで、VSCodeでのFlutter開発がより快適になります。特にショートカットや補完機能をフル活用することで、時間を節約しながら効率的にコードを書いていけるでしょう。