Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>Jump to Build - Flutter Widget NavigatorNew to Visual Studio Code? Get it now.
Jump to Build - Flutter Widget Navigator

Jump to Build - Flutter Widget Navigator

Kai Toolbox

|
1 install
| (0) | Free
One-click navigation to Flutter widget build() methods. Save time navigating large widget files with smart detection and multiple access points. Press Cmd+Shift+B to instantly jump!
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Jump to Build – Flutter Widget Navigator

Quickly jump to the build() method in your Flutter widgets — no more endless scrolling through long Dart files.

✨ Features

  • One-click jump
    Instantly move to the build() method in the current file.

  • Multiple entry points

    • Keyboard shortcut: Cmd+Shift+B (Mac) / Ctrl+Shift+B (Windows/Linux)
    • Editor title bar button
    • Status bar button
    • Right-click context menu
    • Inline CodeLens above build() methods
  • Smart detection
    Works with:

    • StatelessWidget
    • StatefulWidget & State classes
    • HookWidget (flutter_hooks)
    • ConsumerWidget (Riverpod)
    • Custom widgets with build() methods
  • Customizable UI
    Toggle status bar, title bar, CodeLens, or context menu items to match your workflow.


📸 Screenshots

Status Bar & CodeLens

Status Bar and CodeLens Demo

Multiple Widgets Support

Multiple Widgets Demo


🚀 Getting Started

  1. Install Jump to Build from the VS Code Marketplace.
  2. Open any Dart file containing Flutter widgets.
  3. Use the shortcut Cmd+Shift+B (Mac) / Ctrl+Shift+B (Windows/Linux), or click the button in the title bar / status bar.

That’s it — the extension activates automatically in Dart files.


⚙️ Configuration

Available Settings

Setting Default Description
jumpToBuild.showStatusBar true Show quick access button in the status bar
jumpToBuild.showEditorTitle true Add navigation button in the editor title bar
jumpToBuild.showCodeLens true Show clickable inline links above build methods
jumpToBuild.showContextMenu true Add option to the right-click context menu
jumpToBuild.codeLensPosition "aboveBuild" CodeLens position: "aboveClass" or "aboveBuild"

Example Configuration

Add to your user settings (settings.json):

{
  "jumpToBuild.showStatusBar": true,
  "jumpToBuild.showEditorTitle": true,
  "jumpToBuild.showCodeLens": true,
  "jumpToBuild.showContextMenu": true,
  "jumpToBuild.codeLensPosition": "aboveBuild"
}

💡 Tips

  • View positioning
    The build method will appear slightly above the center of the screen, so you see both class declaration and the method body.

  • Multiple widgets
    If a file has several build() methods, the extension lets you choose the one to jump to via CodeLens or quick pick.

  • Performance
    Lightweight and optimized — only active in Dart files.


🔧 Troubleshooting

  • Extension not working?

    1. Make sure the file is .dart
    2. Verify it contains a valid build(BuildContext context)
    3. Check the Extension Host output panel for logs
  • Build not detected?
    Ensure your method follows Flutter conventions:

    @override
    Widget build(BuildContext context) {
      return Container();
    }
    

📮 Feedback

If you find issues or have feature requests, please leave feedback on the Marketplace page.


📝 License

This extension is proprietary software.
You are free to install and use it via the VS Code Marketplace. Redistribution or modification of the source code is not permitted.


Enjoy faster navigation in Flutter projects! 🦋

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft