Flutter Widget Convert

Turn a Flutter widget into the widget type you need without rewriting the class by hand.

Put your cursor inside a widget, open the lightbulb menu, and choose a conversion. The extension updates the class, method signatures, paired state classes, and package imports in one edit.

Why use it?

• One Quick Fix for common Flutter widget migrations
• Riverpod and Hooks ready, including ConsumerStatefulWidget and HookConsumerWidget
• Automatic imports for flutter_riverpod, flutter_hooks, and hooks_riverpod
• Stateful conversions keep State<T>, ConsumerState<T>, and createState() in sync
• No analyzer setup beyond the normal Dart and Flutter VS Code extensions

Supported conversions

Quick start

1. Open a .dart file in a Flutter project.
2. Place the cursor anywhere inside a supported widget class.
3. Press Cmd + . on macOS or Ctrl + . on Windows/Linux.
4. Choose Convert to... from the refactor menu.

The extension activates automatically for Dart files and works alongside the official Dart extension.

Example

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

   @override
   Widget build(BuildContext context) {
      return const Text('Profile');
   }
}

Choose Convert to ConsumerWidget and the extension changes the base class, adds the WidgetRef ref parameter, and inserts the Riverpod import when needed.

Requirements

• VS Code 1.80 or newer
• Dart Code
• A Dart file containing a supported Flutter widget

Development

Run the extension from source:

npm install
npm test

Press F5 in VS Code to launch an Extension Development Host. To create a local VSIX:

npm run package
code --install-extension flutter-widget-convert-0.0.5.vsix