【Flutter】ウィジェットを秒でラップする【VSCode】

はじめに

Flutterはとても優れたフレームワークです。
ウィジェットを組み合わせるだけで簡単にUIを作ることができて
それなりのアプリが作れてしまいます。

しかしそのウィジェットでアプリを構成する上で誰しもが通る問題があります。
それは

ウィジェット構成を変えたいときに面倒

です。

そして今回はMacにてVSCodeを使ってこの問題を解決する方法をご紹介します。

本記事で解決する問題

例えばFlutterで以下のようなコードを書いているとします。

import 'package:flutter/material.dart';

class SampleWidget extends StatelessWidget {
  const SampleWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text("here is sample widget"),
    );
  }
}

ここでContainerウィジェトをCenterウィジェットでラップしたくなりました。

つまり

return Center(
      child: Container(
        child: Text("here is sample widget"),
      )

このような状態にしたいです。

しかしこれを実現するのは少し面倒です。

なぜなら一旦Center()を記載してその中にchildプロパティを用意して
そこにContainerを移動しなければなりません。

ちょっとした手間ですが、ウィジェットを構成することでアプリを作るFlutterでは
こういったちょっとした手間が積み重なって大きな時間のロスになります。

しかし逆に言えばこの手間を省けた場合、大きな効率化になりますので
アプリを作ることがグッと楽しくなります。

ではこの問題を解決する方法を紹介します。

ウィジェットを秒でラップする

VSCodeにはたくさんのショートカットキーがあります。
そして実はウィジェットをラップするショートカットキーも用意されています。

ウィジェットをラップするショートカットキー：command + .

やり方は簡単。
まず先ほどの例の場合はカーソルをContainerに合わせます。
そしてcommand+.を推します。すると...

なんとラップ可能なウィジェット一覧が表示されました！

あとはラップしたいウィジェットを選ぶだけ。
Centerを選択すると...

画像のように綺麗にラップされました。

最後に

**command + .**をお供に楽しいFlutterライフを！