DevTools - Toggle select widget mode not working

[RocksteadyDog]

Steps to reproduce

Hello!

1. Run the example
2. Turn on DevTools and enable widget mode
3. Select any widget
4. Disable widget mode
5. Make a save, after that the widget may not turn on

Attached video

Expected results

Widget mod turns on

Actual results

Widget mod does not turn on

Code sample

Code sample

import 'package:flutter/material.dart';

void main() async {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bug',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Color(0xff6750a4),
          brightness: Brightness.light,
          dynamicSchemeVariant: DynamicSchemeVariant.tonalSpot,
        ),
      ),
      debugShowCheckedModeBanner: false,
      home: MainScreen(),
    );
  }
}

class MainScreen extends StatelessWidget {
  const MainScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: const Placeholder());
  }
}

Screenshots or Video

Screenshots / Video demonstration

drive:
https://drive.google.com/file/d/1AFzz_myZO7E8G9UDVZnddc_cL9LuTtDC/view?usp=share_link

Logs

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.32.5, on macOS 15.5 24F74 darwin-arm64, locale ru-RU) [506ms]
    • Flutter version 3.32.5 on channel stable at /Users/denis/Development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision fcf2c11572 (8 days ago), 2025-06-24 11:44:07 -0700
    • Engine revision dd93de6fb1
    • Dart version 3.8.1
    • DevTools version 2.45.1

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0) [3,3s]
    • Android SDK at /Users/denis/Library/Android/sdk
    • Platform android-35, build-tools 35.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 21.0.3+-79915917-b509.11)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.3) [2,8s]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16E140
    • CocoaPods version 1.16.2

[✓] Chrome - develop for the web [11ms]
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.2) [11ms]
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 21.0.3+-79915917-b509.11)

[✓] VS Code (version 1.101.2) [9ms]
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.112.0

[tirth-patel-nc]

hi @RocksteadyDog, thanks for the report. I followed the steps you provided but was unable to reproduce the issue. please refer to this video for reference. let me know if I missed anything or if there are additional steps needed to trigger the issue.

Screen.Recording.2025-07-03.at.4.43.57.PM.mov

[RocksteadyDog]

hi @RocksteadyDog, thanks for the report. I followed the steps you provided but was unable to reproduce the issue. please refer to this video for reference. let me know if I missed anything or if there are additional steps needed to trigger the issue.

Screen.Recording.2025-07-03.at.4.43.57.PM.mov

At 5 seconds, after disabling widget mode:

1. click the explorer icon
2. select the main.dart file and save
3. click the flutter devtools: inspector icon
4. mode widget toggle button doesn't work

the video
https://drive.google.com/file/d/1PSMQb4V0duF8primKDvQd0SpARH5bNOG/view?usp=share_link

[RocksteadyDog]

hi @RocksteadyDog, thanks for the report. I followed the steps you provided but was unable to reproduce the issue. please refer to this video for reference. let me know if I missed anything or if there are additional steps needed to trigger the issue.

Screen.Recording.2025-07-03.at.4.43.57.PM.mov

Hello again!

I tested it, it seems the problem is in the size of the panel, if it is small, the button will not work after saving.
I attached a video:
https://drive.google.com/file/d/1LGtZSHIcg_pvm29jQ9YcT7y6k_I9ApFv/view?usp=share_link

[tirth-patel-nc]

Thanks for the update. I’m able to reproduce the issue in VSCode by resizing the side panel, the Toggle Select Widget Mode button becomes unclickable. It is fine in Android Studio.

I’m not sure if this should be tracked here, flutter/devtools or Dart-Code/Dart-Code might be more appropriate.

VSCode

Screen.Recording.2025-07-04.at.1.31.32.PM.mov

Android Studio

Screen.Recording.2025-07-04.at.1.39.06.PM.mov

---

VSCode

I also learned that there are two ways to trigger the Widget Inspector, as noted here: Dart-Code/Dart-Code#5477.
The resize issue happens when using the version accessible from the navigation rail (left panel, in my case).

Screen.Recording.2025-07-04.at.2.00.55.PM.mov

Based on this, I’m keeping the issue open and adding labels for the team’s tracking and input.

cc @elliette

master (3.33.0-1.0.pre.819) - flutter doctor -v

[✓] Flutter (Channel master, 3.33.0-1.0.pre.819, on macOS 15.5 24F74 darwin-arm64, locale en-IN) [1,724ms]
    • Flutter version 3.33.0-1.0.pre.819 on channel master at /Users/tirthpatel/Development/flutter_master/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision a755f648d0 (77 minutes ago), 2025-07-04 00:30:23 -0400
    • Engine revision a755f648d0
    • Dart version 3.9.0 (build 3.9.0-293.0.dev)
    • DevTools version 2.48.0-dev.0
    • Feature flags: enable-web, enable-linux-desktop, enable-macos-desktop, enable-windows-desktop, enable-android, enable-ios, enable-custom-devices, cli-animations,
      enable-native-assets

[✓] Android toolchain - develop for Android devices (Android SDK version 36.0.0) [10.3s]
    • Android SDK at /Users/tirthpatel/Library/Android/sdk
    • Emulator version 35.5.10.0 (build_id 13402964) (CL:N/A)
    • Platform android-36, build-tools 36.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 21.0.6+-13368085-b895.109)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.4) [591ms]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16F6
    • CocoaPods version 1.16.2

[✓] Chrome - develop for the web [12ms]
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.3) [12ms]
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 21.0.6+-13368085-b895.109)

[✓] VS Code (version 1.101.2) [11ms]
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.114.0

[✓] Connected device (2 available) [5.6s]
    • macOS (desktop) • macos  • darwin-arm64   • macOS 15.5 24F74 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 137.0.7151.120

[✓] Network resources [1,062ms]
    • All expected network resources are available.

• No issues found!

stable (3.32.5) - flutter doctor -v

[✓] Flutter (Channel stable, 3.32.5, on macOS 15.5 24F74 darwin-arm64, locale en-IN) [222ms]
    • Flutter version 3.32.5 on channel stable at /Users/tirthpatel/Development/flutter_stable_latest/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision fcf2c11572 (25 hours ago), 2025-06-24 11:44:07 -0700
    • Engine revision dd93de6fb1
    • Dart version 3.8.1
    • DevTools version 2.45.1

[✓] Android toolchain - develop for Android devices (Android SDK version 36.0.0) [868ms]
    • Android SDK at /Users/tirthpatel/Library/Android/sdk
    • Platform android-36, build-tools 36.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 21.0.6+-13368085-b895.109)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.4) [471ms]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16F6
    • CocoaPods version 1.16.2

[✓] Chrome - develop for the web [11ms]
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.3) [10ms]
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 21.0.6+-13368085-b895.109)

[✓] VS Code (version 1.101.2) [10ms]
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.112.0

[✓] Connected device (2 available) [5.6s]
    • macOS (desktop) • macos  • darwin-arm64   • macOS 15.5 24F74 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 137.0.7151.120

[✓] Network resources [433ms]
    • All expected network resources are available.

• No issues found!

[elliette]

FYI @DanTup I suspect this is an issue with the sidebar IFRAME in VS Code.

[elliette]

I'm unable to reproduce this myself.

Could you share the version of VS Code you are using ("About Visual Studio Code") as well as the Dart extension version?

Thanks!

[tirth-patel-nc]

#9303 (was Flutter extension version 3.112.0)

Sharing my details:

VSCode Version

Version: 1.101.2 (Universal)
Commit: 2901c5ac6db8a986a5666c3af51ff804d05af0d4
Date: 2025-06-24T20:27:15.391Z
Electron: 35.5.1
ElectronBuildId: 11727614
Chromium: 134.0.6998.205
Node.js: 22.15.1
V8: 13.4.114.21-electron.0
OS: Darwin arm64 24.5.0

Dart VSCode Extension: 3.114.2
Flutter VSCode Extension: 3.114.0

[DanTup]

I also don't seem to be able to reproduce this, though some comments:

1. @tirth-patel-nc seems to have an additional button along the top that I do not:
   
   I'm on latest Flutter master - why don't I see this button?
2. In the video at https://github.com/flutter/flutter/issues/171567#issuecomment-3034988929, I wonder if the issue is more than just this button - when the mouse is moved over the inspector around 0:24, the cursor never changes to a hand as it rolls over the other items - is it possible the whole of the inspector is not responsive, rather than only this button?

[RocksteadyDog]

I reproduce the problem every time.

Repeat exactly as in the video, but don't forget to reduce the panel:
https://drive.google.com/file/d/1LGtZSHIcg_pvm29jQ9YcT7y6k_I9ApFv/view

[elliette]

Thank you for the details instructions! I was able to reproduce this. I don't think re-sizing the panel is necessary to trigger this. I think instead this has to do with the hot-reload that is being triggered when the file is saved.

The buttons that become unresponsive are the service extension buttons at the top. I need to do actually look at the code to confirm, but if I remember correctly we re-set their enabled/disabled state on every hot-reload.

I believe what is happening in this case is the hot-reload is triggered when the inspector panel is not open (it is not the currently selected side panel tab), and therefore the inspector panel never receives the event that contains the service extension registration states. If however another hot-reload is triggered while the inspector panel is open (it is the currently selected side panel tab), then the buttons all become clickable again.