Skip to main content

​
Prerequisites

  • Flutter SDK with Dart 3.9.2+
  • A Flutter project using the Stac framework

​
Install the extension

Click the link for your IDE to install directly: Or in VS Code, press Cmd+Shift+X (Mac) or Ctrl+Shift+X (Windows/Linux) to open the Extensions view, search for “Stac”, and click Install.

​
Get started

  1. Open a Stac project — open any Flutter project that uses the Stac framework.
  2. Open the Command Palette — press ⌘⇧P (Mac) or Ctrl+Shift+P (Windows / Linux) and type “Stac”.
  3. Launch a live preview — run Stac: Open Preview to open a side-by-side preview of the active @StacScreen.
Stac Live Preview

​
Use live preview

The preview panel renders your @StacScreen in real time and updates automatically on save.
  • Device toggles — switch between Android, iOS, and Web viewports.
  • Theme picker — preview with any @StacThemeRef theme defined in your project.
  • Auto-refresh — every time you save, the preview re-renders. Disable this with the stacVscode.preview.autoRefreshOnSave setting.

​
Preview commands

CommandDescription
Stac: Open PreviewOpen the live preview panel for the active screen
Stac: Select Preview ScreenSwitch to a different screen in the current file
Stac: Stop PreviewStop the preview host process

​
Use wrap quick-fixes

Place your cursor on any Stac widget expression and press ⌘. (Mac) or Ctrl+. (Windows / Linux) to wrap it with a preset widget: StacContainer · StacPadding · StacCenter · StacAlign · StacSizedBox · StacExpanded Select Wrap with Stac widget… to wrap with any custom Stac widget class in your project.
You can customise which preset wrappers appear in the quick-fix menu with the stacVscode.wrapPresets setting, or disable wrap actions entirely with stacVscode.enableWrapQuickFix.

​
Use snippets

In files containing @StacScreen, @StacThemeRef, or package:stac_core, the following snippets are available:
PrefixWhat it creates
stac screenA new screen template
stac themeA new theme template
Snippets can be toggled with the stacVscode.enableSnippets setting.

​
Commands and shortcuts

Open the Command Palette (⌘⇧P / Ctrl+Shift+P) and type “Stac” to see all available commands:
CommandDescription
Stac: Open PreviewOpen the live preview panel
Stac: Select Preview ScreenSwitch screen in the current file
Stac: Stop PreviewStop the preview host
Stac: Regenerate CatalogRebuild the widget catalog from stac_core

​
Configure settings

Open VS Code settings (⌘, / Ctrl+,) and search “Stac” to customise the extension.

​
Extension settings

SettingDefaultDescription
stacVscode.enableWrapQuickFixtrueEnable wrap quick-fix actions
stacVscode.wrapPresetsAll presetsPreset wrappers shown in the quick-fix menu
stacVscode.enableSnippetstrueEnable stac screen / stac theme snippets
stacVscode.preview.enabletrueEnable preview commands
stacVscode.preview.autoRefreshOnSavetrueRefresh the preview on save
stacVscode.preview.jsonStrategyrunnerThenBuildJSON generation strategy
stacVscode.preview.hostPort47841Local preview host port
stacVscode.preview.startupTimeoutMs120000Host startup timeout (ms)

​
Troubleshooting

​
Preview won’t start

  1. Open Output → Stac Preview for detailed logs.
  2. Ensure your project builds successfully with flutter run.
  3. Confirm the active file contains a @StacScreen annotation.
  4. Try restarting the preview host by running Stac: Stop Preview, then Stac: Open Preview.

​
Extension won’t install

  • Ensure you have a compatible version of VS Code (1.80.0 or later).
  • Check that VS Code has permission to install extensions.
  • Try installing directly from the VS Code Marketplace.

​
Uninstall the extension

  1. Open the Extensions view (⇧⌘X / Ctrl+Shift+X).
  2. Search for “Stac”.
  3. Click Uninstall.

Report an Issue

Found a bug or have a feature request? Open an issue on GitHub.