This Visual Studio Code extension allows you to select a Widget in Flutter, convert it into a new StatelessWidget class, and store this new class in a part file associated with your current file. This helps you keep your code more organized and maintainable.
Installation
- Open Visual Studio Code.
- Go to the Extensions tab (fourth icon on the side panel) or use the Ctrl+Shift+X shortcut.
- Type "Flutter Extract Widget and Create Part" in the search bar and press enter.
- When you find the appropriate extension, click the "Install" button to install the extension.
- Once the installation is complete, the extension will be automatically activated.
Usage
- Open the Dart file you want to work with in your Flutter project.
- Select the Widget you want to convert into a new StatelessWidget.
- Right-click the selected text and choose "Extract Flutter Widget and Create Part" from the context menu.
- In the prompt that opens, enter the name for the new StatelessWidget class you want to create and press Enter.
- The extension will convert the selected Widget into a new StatelessWidget class and store this class in a part file. Additionally, it will add a part statement to your current file, associating it with the new file.
Example
Below is an example of how to use the extension by selecting a Container Widget and converting it into a new StatelessWidget class named "MyNewWidget":
main.dart (before)
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('My App')),
body: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
);
}
}
main.dart (after)
import 'package:flutter/material.dart';
part 'my_new_widget.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('My App')),
body: MyNewWidget(),
),
);
}
}
my_new_widget.dart
part of 'main.dart';
class MyNewWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: 100,
height: 100,
color: Colors.red,
);
}
}