Flutter Widget Navigator

Quickly and efficiently navigate Flutter widget trees directly from your keyboard. Seamlessly move between parent, child and sibling widgets, add properties, and select entire widget trees without ever leaving your keyboard.

Features

🚀 Widget Navigation

Jump to parent or child widget with a single keystroke
Quickly move between sibling widgets
Jump to the first or last sibling in a widget list

🔍 Widget Selection

Instantly select an entire widget including all properties and children
Perfect for quick copying, deleting, or refactoring operations

⚡ Property Addition

Add widget properties with intelligent suggestions based on widget type
Tab between property name and value for quick editing
Properties are placed in logical positions with proper indentation

Keyboard Shortcuts

Command	Windows/Linux	Mac
Navigate to parent widget	Alt+Ctrl+↑	Ctrl+Alt+Cmd+↑
Navigate to child widget	Alt+Ctrl+↓	Ctrl+Alt+Cmd+↓
Navigate to previous sibling	Alt+Ctrl+←	Ctrl+Alt+Cmd+←
Navigate to next sibling	Alt+Ctrl+→	Ctrl+Alt+Cmd+→
Navigate to first sibling	Alt+Ctrl+Shift+←	Ctrl+Alt+Cmd+Shift+←
Navigate to last sibling	Alt+Ctrl+Shift+→	Ctrl+Alt+Cmd+Shift+→
Select current widget	Alt+Ctrl+L	Cmd+Alt+L
Add property to widget	Alt+Ctrl+P	Alt+Cmd+P

Note: You can customize these keyboard shortcuts in VS Code preferences.

Smart Property Suggestions

When adding properties, Flutter Widget Navigator intelligently suggests properties based on the widget type:

For Container: decoration, padding, margin, width
For Row/Column: mainAxisAlignment, crossAxisAlignment, children
For Text: style, textAlign, overflow
For ElevatedButton/TextButton: onPressed, child
...and many more common widgets

Usage Examples

Place your cursor inside a widget
Press Alt+Ctrl+↑ to jump to the parent
Press Alt+Ctrl+↓ to navigate to a child
Use Alt+Ctrl+← and Alt+Ctrl+→ to move between siblings

Adding Properties

Navigate to a widget
Press Alt+Ctrl+P
A property suggestion appears based on widget type
Press Tab to move from property name to value
Press Tab again to complete and position cursor

Navigate to a widget
Press Alt+Ctrl+L to select the entire widget tree
Copy, delete, or refactor as needed

Known Issues

Widget detection may not work perfectly in certain edge cases with highly nested widgets

Release Notes

1.0.0

Initial release with widget navigation, selection, and property addition

About

Created with ❤️ for Flutter developers to boost productivity. If you enjoy using Flutter Widget Navigator, please consider rating it in the marketplace!

Contributing

Contributions are welcome! Check out the GitHub repository to contribute.

valentindrolet