Flutter Refactoring Extension
A Visual Studio Code extension that provides additional refactoring actions for Flutter projects.

Features
- Wrap with If: Insert an if (condition) { ... } around selected code.
- Wrap with If (no braces): Insert if (condition) ... (without curly braces) around selected code.
- Wrap with If (Spread): Insert if (condition) ...[ ... ] around selected code, useful for Flutter's spread operator in lists.
- Wrap with Ternary: Convert one or two widgets into a condition ? firstWidget : secondWidget expression.
Tip You can select the code and execute the refactoring action (from refactoring menu or command palette]) to wrap the whole block of code at once.
Examples
Ternary Refactoring
Wrapping two Widgets with Ternary Operator
Original selection
Text('Hello'), Text('World')
After "Wrap with Ternary"
condition ? Text('Hello') : Text('World')
If Refactoring
Original selection
Container()
After "Wrap with If (Spread)"
if (condition) ...[
Container()
]
Installation
Marketplace: Search for “Flutter Refactoring Extension” in the Visual Studio Code Marketplace and click Install.
Usage
Command Palette
- Open a Dart file in VS Code.
- Select the widget(s) you want to wrap.
- Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS) to open the Command Palette.
- Type "Wrap with If", "Wrap with Ternary", or any of the listed commands below.
- Press Enter to apply the refactoring.
- In a Dart file, highlight the widget(s) you want to wrap.
- Right-click in the editor to open the context menu (or use keyboard shortcut).
- Choose "Wrap with If" (or another relevant command) from the Refactoring menu.
Available Commands
Command |
Description |
Wrap with If |
Wraps the selected widget(s) with if (condition) { ... } |
Wrap with If (no braces) |
Wraps the selected widget(s) with if (condition) .... |
Wrap with If (Spread) |
Wraps with if (condition) ...[ ... ] around selected code, useful for lists of Widgets. If you select code and apply this refactor, the whole selection will be wrapped. |
Wrap with Ternary |
Wraps selected widget(s) in a condition ? firstWidget : secondWidget expression. If only one widget is selected, then it will be the firstWidget and secondWidget will be . |
Known Issues and limitations
- The code actions are triggered only when opening/editing a Dart file. Opening a non-Dart file before opening a Dart file may not activate the extension.
- After using "Wrap with If" or "Wrap with Ternary", you might need to manually format your code if you disabled the editor.action.formatDocument or have a specific formatter that doesn’t auto-run.
Contributions
Contributions are welcome! Here’s how you can help:
Fork the repository and clone it locally.
Create a new branch for your feature/bugfix:
git checkout -b my-feature
Install dependencies:
npm install
Make your changes, then build and test:
npm run compile
npm test
Commit and push your changes to your fork.
Open a Pull Request on GitHub.
License
MIT License © 2025 Dominik Czerwoniuk
This extension is open-source and free for personal or commercial usage. See the LICENSE file for details.
Enjoy using the Flutter Refactoring Extension! If you have any questions, issues, or feature requests, please feel free to open an issue or reach out on Github.
Disclaimer:
This extension is provided "as is" without any warranty. Use at your own risk.