Add widget previewer tool window (#8595)

helin24 · web-flow · commit 8cda6e491b59 · 2025-10-31T10:09:05.000-07:00
Changes include: - Logic for starting the widget previewer server (slightly done by AI) - A new tool window (mostly done by AI) - Refactoring browsers to generalize showing a URL (previously we are always showing DevTools URLs) <img width="1399" height="896" alt="Screenshot 2025-10-29 at 11 30 44 AM" src="https://github.com/user-attachments/assets/63bc5aca-f0e7-4996-b9e3-c534aecca701" /> Things that may change further: - Specific version of Flutter SDK for gating - Switching between dark mode/light mode Addresses #8587
diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
diff --git a/resources/META-INF/plugin.xml b/resources/META-INF/plugin.xml
@@ -329,9 +329,11 @@
     <toolWindow id="Flutter Deep Links" anchor="right" icon="FlutterIcons.DevToolsDeepLinks" factoryClass="io.flutter.deeplinks.DeepLinksViewFactory" />
     <toolWindow id="Flutter DevTools" anchor="right" icon="FlutterIcons.DevTools" factoryClass="io.flutter.devtools.RemainingDevToolsViewFactory" />
     <toolWindow id="Flutter DevTools Extensions" anchor="right" icon="FlutterIcons.DevToolsExtensions" factoryClass="io.flutter.devtools.DevToolsExtensionsViewFactory" />
-    <!-- Do not uncomment until ready to release the Property Editor. -->
     <toolWindow id="Flutter Property Editor" anchor="right" icon="FlutterIcons.PropertyEditor" factoryClass="io.flutter.propertyeditor.PropertyEditorViewFactory" />
-
+    <toolWindow id="Flutter Widget Preview"
+                anchor="right"
+                factoryClass="io.flutter.widgetpreview.WidgetPreviewToolWindowFactory"
+                icon="FlutterIcons.WidgetPreview" />
     <!-- Having the projectService defined after the toolWindows allows them to all be picked up by the platform -->
     <!-- See https://github.com/flutter/flutter-intellij/issues/8029 -->
     <projectService serviceImplementation="io.flutter.view.InspectorView" overrides="false"/>
diff --git a/resources/icons/expui/widgetPreview.svg b/resources/icons/expui/widgetPreview.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.0996 11.785L13.5088 13.3768L15.0996 14.9677H13.6328L12.042 13.3768L13.6328 11.785H15.0996ZM15.0996 8.70007L11.2363 12.5634L10.5 11.8329L13.6338 8.70007H15.0996Z" fill="#3574F0"/>
+<path d="M13.5 0.974609C14.3422 0.974609 15.0254 1.65777 15.0254 2.5V6.5H13.9746V4.09961H2.02539V13.4004C2.0256 13.6625 2.2378 13.875 2.5 13.875H10V14.9248H2.5C1.6579 14.9248 0.974821 14.2424 0.974609 13.4004V2.5C0.974609 1.65777 1.65777 0.974609 2.5 0.974609H13.5ZM8 6C9.82 6 11.3733 7.0375 12 8.5C11.3733 9.9625 9.82 11 8 11C6.18 11 4.62667 9.9625 4 8.5C4.62667 7.0375 6.18 6 8 6ZM8 6.9375C6.77333 6.9375 5.67978 7.5375 5.10645 8.5C5.67978 9.4625 6.77333 10.0625 8 10.0625C9.22667 10.0625 10.3202 9.4625 10.8936 8.5C10.3202 7.5375 9.22667 6.9375 8 6.9375ZM8 7.5625C8.55333 7.5625 9 7.98125 9 8.5C9 9.01875 8.55333 9.4375 8 9.4375C7.44667 9.4375 7 9.01875 7 8.5C7 7.98125 7.44667 7.5625 8 7.5625Z" fill="#6C707E"/>
+</svg>
diff --git a/resources/icons/expui/widgetPreview@20x20.svg b/resources/icons/expui/widgetPreview@20x20.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.0249 14.9004L16.9761 16.9512L19.0249 19H17.1362L15.0864 16.9512L17.1362 14.9004H19.0249ZM19.0249 10.9258L14.0483 15.9023L13.1001 14.9619L17.1372 10.9258H19.0249Z" fill="#3574F0"/>
+<path d="M17.1094 0.974609C18.1942 0.97468 19.0742 1.85461 19.0742 2.93945V8.0918H17.7207V5.00098H2.32812V16.9805C2.3284 17.3181 2.60174 17.5927 2.93945 17.5928H12.6006V18.9443H2.93945C1.85474 18.9443 0.974881 18.0651 0.974609 16.9805V2.93945C0.974661 1.8546 1.8546 0.974661 2.93945 0.974609H17.1094ZM10.0244 7.44824C12.3688 7.44829 14.3695 8.78505 15.1768 10.6689C14.3694 12.5526 12.3686 13.8886 10.0244 13.8887C7.68019 13.8887 5.67946 12.5526 4.87207 10.6689C5.67931 8.78502 7.67997 7.44824 10.0244 7.44824ZM10.0244 8.65625C8.44428 8.65625 7.03542 9.4291 6.29688 10.6689C7.03544 11.9087 8.44435 12.6816 10.0244 12.6816C11.6043 12.6816 13.0124 11.9085 13.751 10.6689C13.0125 9.42913 11.6045 8.65629 10.0244 8.65625ZM10.0244 9.46094C10.7371 9.461 11.3125 10.0008 11.3125 10.6689C11.3122 11.3369 10.737 11.8759 10.0244 11.876C9.31179 11.876 8.73658 11.337 8.73633 10.6689C8.73633 10.0007 9.31164 9.46094 10.0244 9.46094Z" fill="#6C707E"/>
+</svg>
diff --git a/resources/icons/expui/widgetPreview@20x20_dark.svg b/resources/icons/expui/widgetPreview@20x20_dark.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.0249 14.9004L16.9761 16.9512L19.0249 19H17.1362L15.0864 16.9512L17.1362 14.9004H19.0249ZM19.0249 10.9258L14.0483 15.9023L13.1001 14.9619L17.1372 10.9258H19.0249Z" fill="#548AF7"/>
+<path d="M17.1094 0.974609C18.1942 0.97468 19.0742 1.85461 19.0742 2.93945V8.0918H17.7207V5.00098H2.32812V16.9805C2.3284 17.3181 2.60174 17.5927 2.93945 17.5928H12.6006V18.9443H2.93945C1.85474 18.9443 0.974881 18.0651 0.974609 16.9805V2.93945C0.974661 1.8546 1.8546 0.974661 2.93945 0.974609H17.1094ZM10.0244 7.44824C12.3688 7.44829 14.3695 8.78505 15.1768 10.6689C14.3694 12.5526 12.3686 13.8886 10.0244 13.8887C7.68019 13.8887 5.67946 12.5526 4.87207 10.6689C5.67931 8.78502 7.67997 7.44824 10.0244 7.44824ZM10.0244 8.65625C8.44428 8.65625 7.03542 9.4291 6.29688 10.6689C7.03544 11.9087 8.44435 12.6816 10.0244 12.6816C11.6043 12.6816 13.0124 11.9085 13.751 10.6689C13.0125 9.42913 11.6045 8.65629 10.0244 8.65625ZM10.0244 9.46094C10.7371 9.461 11.3125 10.0008 11.3125 10.6689C11.3122 11.3369 10.737 11.8759 10.0244 11.876C9.31179 11.876 8.73658 11.337 8.73633 10.6689C8.73633 10.0007 9.31164 9.46094 10.0244 9.46094Z" fill="#CED0D6"/>
+</svg>
diff --git a/resources/icons/expui/widgetPreview_dark.svg b/resources/icons/expui/widgetPreview_dark.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.0996 11.785L13.5088 13.3768L15.0996 14.9677H13.6328L12.042 13.3768L13.6328 11.785H15.0996ZM15.0996 8.70007L11.2363 12.5634L10.5 11.8329L13.6338 8.70007H15.0996Z" fill="#548AF7"/>
+<path d="M13.5 0.974609C14.3422 0.974609 15.0254 1.65777 15.0254 2.5V6.5H13.9746V4.09961H2.02539V13.4004C2.0256 13.6625 2.2378 13.875 2.5 13.875H10V14.9248H2.5C1.6579 14.9248 0.974821 14.2424 0.974609 13.4004V2.5C0.974609 1.65777 1.65777 0.974609 2.5 0.974609H13.5ZM8 6C9.82 6 11.3733 7.0375 12 8.5C11.3733 9.9625 9.82 11 8 11C6.18 11 4.62667 9.9625 4 8.5C4.62667 7.0375 6.18 6 8 6ZM8 6.9375C6.77333 6.9375 5.67978 7.5375 5.10645 8.5C5.67978 9.4625 6.77333 10.0625 8 10.0625C9.22667 10.0625 10.3202 9.4625 10.8936 8.5C10.3202 7.5375 9.22667 6.9375 8 6.9375ZM8 7.5625C8.55333 7.5625 9 7.98125 9 8.5C9 9.01875 8.55333 9.4375 8 9.4375C7.44667 9.4375 7 9.01875 7 8.5C7 7.98125 7.44667 7.5625 8 7.5625Z" fill="#CED0D6"/>
+</svg>
diff --git a/src/icons/FlutterIcons.java b/src/icons/FlutterIcons.java
@@ -9,6 +9,7 @@ private static Icon load(String path) {
     return IconLoader.getIcon(path, FlutterIcons.class);
   }
 
+  public static final Icon WidgetPreview = load("/icons/expui/widgetPreview.svg");
   public static final Icon DevToolsDeepLinks = load("/icons/expui/deepLinks.svg");
   public static final Icon DevTools = load("/icons/expui/devTools.svg");
   public static final Icon DevToolsExtensions = load("/icons/expui/extensions.svg");
diff --git a/src/io/flutter/FlutterBundle.properties b/src/io/flutter/FlutterBundle.properties
@@ -187,3 +187,10 @@ icon.preview.disallow.flutter_vector_icons=Package "flutter_vector_icons" cannot
 icon.preview.disallow.material_design_icons_flutter=Package "material_design_icons_flutter" always displays blank icon previews.
 icon.preview.disallow.package.title=Unsupported icon package
 icon.preview.analysis=Checking icons...
+
+widget.preview.initializing=Initializing Flutter Widget Preview...
+widget.preview.starting=Starting Flutter Widget Preview web server...
+widget.preview.loading=Loading Flutter Widget Preview at {0}...
+widget.preview.error=Error: {0}
+widget.preview.sdk.too.old=Flutter SDK version is too old for Flutter Widget Preview. Please update your SDK.
+flutter.sdk.not.found=Flutter SDK not found.
diff --git a/src/io/flutter/devtools/AbstractDevToolsViewFactory.java b/src/io/flutter/devtools/AbstractDevToolsViewFactory.java
@@ -19,6 +19,7 @@
 import io.flutter.sdk.FlutterSdkVersion;
 import io.flutter.utils.AsyncUtils;
 import io.flutter.utils.OpenApiUtils;
+import io.flutter.view.DevToolsUrlProvider;
 import io.flutter.view.EmbeddedBrowser;
 import io.flutter.view.ViewUtils;
 import kotlin.coroutines.Continuation;
@@ -156,7 +157,7 @@ private void loadDevToolsInEmbeddedBrowser(@NotNull Project project,
               FlutterUtils.embeddedBrowser(project))
             .ifPresent(embeddedBrowser ->
                        {
-                         embeddedBrowser.openPanel(toolWindow, getToolWindowTitle(), getToolWindowIcon(), devToolsUrl, System.out::println,
+                         embeddedBrowser.openPanel(toolWindow, getToolWindowTitle(), getToolWindowIcon(), new DevToolsUrlProvider(devToolsUrl), System.out::println,
                                                    warningMessage);
                          devToolsLoadedInBrowser = true;
                          doAfterBrowserOpened(project, embeddedBrowser);
diff --git a/src/io/flutter/devtools/DevToolsUrl.java b/src/io/flutter/devtools/DevToolsUrl.java
@@ -214,13 +214,14 @@ public String getUrlString() {
     return "http://" + devToolsHost + ":" + devToolsPort + "/" + (page != null ? page : "") + "?" + String.join("&", params);
   }
 
-  public void maybeUpdateColor() {
+  public boolean maybeUpdateColor() {
     final String newColor = devToolsUtils.getColorHexCode();
     if (Objects.equals(colorHexCode, newColor)) {
-      return;
+      return false;
     }
 
     colorHexCode = newColor;
     isBright = devToolsUtils.getIsBackgroundBright();
+    return true;
   }
 }
diff --git a/src/io/flutter/jxbrowser/EmbeddedJxBrowser.java b/src/io/flutter/jxbrowser/EmbeddedJxBrowser.java
@@ -246,7 +246,7 @@ private EmbeddedJxBrowser(@NotNull Project project) {
     };
   }
 
-  private void manageJxBrowserDownload(ContentManager contentManager) {
+  private void manageJxBrowserDownload(@NotNull ContentManager contentManager) {
     final JxBrowserStatus jxBrowserStatus = jxBrowserManager.getStatus();
 
     if (jxBrowserStatus.equals(JxBrowserStatus.INSTALLED)) {
@@ -303,7 +303,7 @@ else if (jxBrowserStatus.equals(JxBrowserStatus.INSTALLATION_FAILED)) {
     }
   }
 
-  protected void handleJxBrowserInstallationFailed(ContentManager contentManager) {
+  protected void handleJxBrowserInstallationFailed(@NotNull ContentManager contentManager) {
     final List<LabelInput> inputs = new ArrayList<>();
 
     final InstallationFailedReason latestFailureReason = jxBrowserManager.getLatestFailureReason();
diff --git a/src/io/flutter/logging/FlutterConsoleLogManager.java b/src/io/flutter/logging/FlutterConsoleLogManager.java
@@ -394,7 +394,7 @@ public void actionPerformed(@NotNull AnActionEvent event) {
         Project project = app.getProject();
         if (!project.isDisposed()) {
           final EmbeddedBrowser browser = FlutterUtils.embeddedBrowser(project);
-          if (browser != null) {
+          if (browser != null && widgetId != null) {
             browser.updatePanelToWidget(widgetId);
           }
         }
diff --git a/src/io/flutter/sdk/FlutterCommand.java b/src/io/flutter/sdk/FlutterCommand.java
@@ -100,6 +100,27 @@ protected boolean isPubRelatedCommand() {
     return pubRelatedCommands.contains(type);
   }
 
+  /**
+   * Starts running the command and returns the raw `Process` object.
+   *
+   * <p>This is intended for commands that need direct stream access and do not need console integration.
+   *
+   * @return the started `Process`, or null if an exception occurred.
+   */
+  @Nullable
+  public Process start() {
+    final GeneralCommandLine commandLine = createGeneralCommandLine(null);
+    final String commandText = safeCommandLog(commandLine);
+    LOG.info(commandText);
+    try {
+      return commandLine.createProcess();
+    }
+    catch (ExecutionException e) {
+      LOG.error("Failed to start Flutter command: " + commandText, e);
+      return null;
+    }
+  }
+
   /**
    * Starts running the command, without showing its output in a console.
    * <p>
@@ -307,6 +328,7 @@ enum Type {
     RUN("Flutter run", "run"),
     UPGRADE("Flutter upgrade", "upgrade"),
     VERSION("Flutter version", "--version"),
+    WIDGET_PREVIEW("Flutter widget preview", "widget-preview"),
     TEST("Flutter test", "test");
 
     final public String title;
diff --git a/src/io/flutter/sdk/FlutterSdk.java b/src/io/flutter/sdk/FlutterSdk.java
@@ -415,6 +415,19 @@ public FlutterCommand flutterTest(@NotNull PubRoot root, @NotNull VirtualFile fi
     return new FlutterCommand(this, root.getRoot(), FlutterCommand.Type.TEST, args.toArray(new String[]{ }));
   }
 
+  @NotNull
+  public FlutterCommand widgetPreview(@NotNull PubRoot root, boolean isVerboseMode) {
+    final List<String> args = new ArrayList<>();
+    args.add("start");
+    args.add("--web-server");
+    args.add("--machine");
+    if (isVerboseMode) {
+      args.add("--verbose");
+    }
+
+    return new FlutterCommand(this, root.getRoot(), FlutterCommand.Type.WIDGET_PREVIEW, args.toArray(new String[]{}));
+  }
+
   /**
    * Runs flutter create and waits for it to finish.
    * <p>
diff --git a/src/io/flutter/sdk/FlutterSdkVersion.java b/src/io/flutter/sdk/FlutterSdkVersion.java
@@ -60,6 +60,9 @@ public final class FlutterSdkVersion implements Comparable<FlutterSdkVersion> {
   @NotNull
   public static final FlutterSdkVersion MIN_SUPPORTS_PROPERTY_EDITOR = new FlutterSdkVersion("3.32.0-0.1.pre");
 
+  @NotNull
+  public static final FlutterSdkVersion MIN_SUPPORTS_WIDGET_PREVIEW = new FlutterSdkVersion("3.38.0-0.0.pre");
+
   @NotNull
   public static final String UNKNOWN_VERSION = "unknown version";
 
@@ -170,6 +173,10 @@ public boolean canUsePropertyEditor() {
     return supportsVersion(MIN_SUPPORTS_PROPERTY_EDITOR);
   }
 
+  public boolean canUseWidgetPreview() {
+    return supportsVersion(MIN_SUPPORTS_WIDGET_PREVIEW);
+  }
+
   public boolean canUseDevToolsMultiEmbed() {
     return supportsVersion(MIN_SUPPORTS_DEVTOOLS_MULTI_EMBED);
   }
diff --git a/src/io/flutter/view/BrowserUrlProvider.java b/src/io/flutter/view/BrowserUrlProvider.java
@@ -0,0 +1,21 @@
+/*
+ * Copyright 2025 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+package io.flutter.view;
+
+import org.jetbrains.annotations.NotNull;
+
+/**
+ * Saves a browser URL that may be editable depending on additional settings from the IDE or running applications.
+ */
+public interface BrowserUrlProvider {
+  void setWidgetId(@NotNull String widgetId);
+
+  @NotNull String getBrowserUrl();
+
+  boolean maybeUpdateColor();
+
+  boolean setVmServiceUri(@NotNull String vmServiceUri);
+}
diff --git a/src/io/flutter/view/DevToolsUrlProvider.java b/src/io/flutter/view/DevToolsUrlProvider.java
@@ -0,0 +1,35 @@
+/*
+ * Copyright 2025 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+package io.flutter.view;
+
+import io.flutter.devtools.DevToolsUrl;
+import org.jetbrains.annotations.NotNull;
+
+public record DevToolsUrlProvider(@NotNull DevToolsUrl url) implements BrowserUrlProvider {
+  @Override
+  public void setWidgetId(@NotNull String widgetId) {
+    url.widgetId = widgetId;
+  }
+
+  @Override
+  public @NotNull String getBrowserUrl() {
+    return url.getUrlString();
+  }
+
+  @Override
+  public boolean maybeUpdateColor() {
+    return url.maybeUpdateColor();
+  }
+
+  @Override
+  public boolean setVmServiceUri(@NotNull String newVmServiceUri) {
+    if (url.vmServiceUri != null && url.vmServiceUri.equals(newVmServiceUri)) {
+      return false;
+    }
+    url.vmServiceUri = newVmServiceUri;
+    return true;
+  }
+}
diff --git a/src/io/flutter/view/EmbeddedBrowser.java b/src/io/flutter/view/EmbeddedBrowser.java
diff --git a/src/io/flutter/view/InspectorView.java b/src/io/flutter/view/InspectorView.java
diff --git a/src/io/flutter/view/WidgetPreviewUrlProvider.java b/src/io/flutter/view/WidgetPreviewUrlProvider.java
diff --git a/src/io/flutter/widgetpreview/WidgetPreviewListener.java b/src/io/flutter/widgetpreview/WidgetPreviewListener.java
diff --git a/src/io/flutter/widgetpreview/WidgetPreviewPanel.java b/src/io/flutter/widgetpreview/WidgetPreviewPanel.java
diff --git a/src/io/flutter/widgetpreview/WidgetPreviewToolWindowFactory.java b/src/io/flutter/widgetpreview/WidgetPreviewToolWindowFactory.java

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,7 @@ private static Icon load(String path) {`
`9`	`9`	`return IconLoader.getIcon(path, FlutterIcons.class);`
`10`	`10`	`}`
`11`	`11`
	`12`	`+ public static final Icon WidgetPreview = load("/icons/expui/widgetPreview.svg");`
`12`	`13`	`public static final Icon DevToolsDeepLinks = load("/icons/expui/deepLinks.svg");`
`13`	`14`	`public static final Icon DevTools = load("/icons/expui/devTools.svg");`
`14`	`15`	`public static final Icon DevToolsExtensions = load("/icons/expui/extensions.svg");`
Original file line number	Diff line number	Diff line change
`@@ -214,13 +214,14 @@ public String getUrlString() {`
`214`	`214`	`return "http://" + devToolsHost + ":" + devToolsPort + "/" + (page != null ? page : "") + "?" + String.join("&", params);`
`215`	`215`	`}`
`216`	`216`
`217`		`- public void maybeUpdateColor() {`
	`217`	`+ public boolean maybeUpdateColor() {`
`218`	`218`	`final String newColor = devToolsUtils.getColorHexCode();`
`219`	`219`	`if (Objects.equals(colorHexCode, newColor)) {`
`220`		`- return;`
	`220`	`+ return false;`
`221`	`221`	`}`
`222`	`222`
`223`	`223`	`colorHexCode = newColor;`
`224`	`224`	`isBright = devToolsUtils.getIsBackgroundBright();`
	`225`	`+ return true;`
`225`	`226`	`}`
`226`	`227`	`}`