【VSCodeで便利】StatelessWidgetをStatefullWidetに瞬時に変換＆過不足コード追記をするショートカットキー【Flutter】

Flutter

2023.05.07

たとえば何でもいいんですが、

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

このようなDartのプログラムがあった際、StatelessWidgetで定義しているクラスを一瞬でStatefullWidgetに変換してくれる機能がVSCodeには備わっています。

StatelessWidgetにカーソルを合わせて「Ctrl + .（ドット）」

これ非常に便利で、StatelessWidgetをStatefullWidgetに対応できるように書き換えまで行ってくれるという優れものです。

実際に上記サンプルの「StatelessWidget」にカーソルを合わせてCtrl + .（ドット）を打ち込んで、「Convert To StatefullWidget」をクリックしてみます。

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

なんと、StatefullWidgetに必要なコードまで自動でかきだしてくれてとても効率的です。素敵です。

みなさんもガンガン使って効率的なコーディングをしていきましょう。