Fix long string overlay in debugger Variables panel (#7112) (#9745)

this PR fixes issue #7112 
In the debugger Variables panel, when a variable's value is a long string (e.g. a URL), it was wrapping to the next line and visually overlaying the next item's controls. The TreeView uses a fixed row height of 20px via itemExtent, but `Text.rich` widgets inside `DisplayProvider` and `DapDisplayProvider` had no single-line constraint.

now this issue is fixed by adding `maxLines: 1`, `softWrap: false`, `overflow: TextOverflow.ellipsis` to all relevant `Text.rich` widgets.
Literal newlines are replaced with `\\n` for visibility and values are wrapped in DevToolsTooltip so the full value is accessible on hover.
A widget test was added in `test/screens/debugger/debugger_screen_dap_variables_test.dart` that pumps a DAP variable node with a 1000-character value and asserts single-line truncation properties and the tooltip carrying the full value.

before this fix Long URL wraps to next line, overlaying next item's controls 

<img width="472" height="124" alt="image" src="https://github.com/user-attachments/assets/abada05b-ccb0-458c-a6b0-26f12c9175ad" />

after this fix Long URL truncated with ... on a single line, hover shows full value
screenshot for reference  

<img width="538" height="590" alt="image" src="https://github.com/user-attachments/assets/c6c3f2ee-efe9-4d7c-afc5-9d7894ca407f" />

### General checklist

### Issues checklist

### Tests checklist

### AI-tooling checklist

    * [ ] I read the [AI contributions guidelines] and agree to follow them.
    * [ ] I reviewed all AI-generated code before opening this PR.
    * [ ] I understand and am able to discuss the code in this PR.
    * [ ] I have verifed the accuracy of any AI-generated text included in the PR description.
    * [ ] I commit to verifying the accuracy of any AI-generated code or text that I upload in response to review comments.

### Feature-change checklist 

    * [ ] I added the `release-notes-not-required` label or left a comment requesting the label be added.
    * [ ] I added an entry to `packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md`.
    * [ ] I included before/after screenshots and/or a GIF demo of the new UI to my PR description.
    * [ ] I ran the DevTools app locally to manually verify my changes.

![build.yaml badge]

If you need help, consider asking for help on [Discord].

[`contributions-welcome`]: https://github.com/flutter/devtools/issues?q=state%3Aopen%20label%3Acontributions-welcome
[`good-first-issue`]: https://github.com/flutter/devtools/issues?q=state%3Aopen%20label%3Agood-first-issue
[build.yaml badge]: https://github.com/flutter/devtools/actions/workflows/build.yaml/badge.svg

Author: khanak0509

packages/devtools_app/lib/src/shared/console/widgets/display_provider.dart

@@ -36,6 +36,30 @@ class DisplayProvider extends StatefulWidget {
   State<DisplayProvider> createState() => _DisplayProviderState();
 }
 
+class OverflowingText extends StatelessWidget {
+  const OverflowingText({
+    super.key,
+    required this.textSpan,
+    this.tooltipMessage,
+  });
+
+  final InlineSpan textSpan;
+  final String? tooltipMessage;
+
+  @override
+  Widget build(BuildContext context) {
+    final textWidget = Text.rich(
+      textSpan,
+      maxLines: 1,
+      softWrap: false,
+      overflow: TextOverflow.ellipsis,
+    );
+    final message = tooltipMessage;
+    if (message == null) return textWidget;
+    return DevToolsTooltip(message: message, child: textWidget);
+  }
+}
+
 class _DisplayProviderState extends State<DisplayProvider> {
   bool isHovered = false;
   @override
@@ -46,8 +70,8 @@ class _DisplayProviderState extends State<DisplayProvider> {
       return InteractivityWrapper(
         onTap: widget.onTap,
         menuButtons: _getMenuButtons(context),
-        child: Text.rich(
-          TextSpan(
+        child: OverflowingText(
+          textSpan: TextSpan(
             children: textSpansFromAnsi(
               widget.variable.text!,
               theme.subtleFixedFontStyle,
@@ -79,44 +103,40 @@ class _DisplayProviderState extends State<DisplayProvider> {
     final contents = InteractivityWrapper(
       onTap: widget.onTap,
       menuButtons: _getMenuButtons(context),
-      child: DevToolsTooltip(
-        message: originalDisplayValue,
-        child: Container(
-          color: isHovered ? Theme.of(context).highlightColor : null,
-          child: Row(
-            children: [
-              Expanded(
-                child: Text.rich(
-                  maxLines: 1,
-                  overflow: TextOverflow.ellipsis,
-                  TextSpan(
-                    text: hasName ? widget.variable.name : null,
-                    style: widget.variable.artificialName
-                        ? theme.subtleFixedFontStyle
-                        : theme.fixedFontStyle.apply(
-                            color: theme.colorScheme.controlFlowSyntaxColor,
-                          ),
-                    children: [
-                      if (hasName)
-                        TextSpan(text: ': ', style: theme.fixedFontStyle),
-                      TextSpan(
-                        text: displayValue,
-                        style: widget.variable.artificialValue
-                            ? theme.subtleFixedFontStyle
-                            : _variableDisplayStyle(theme, widget.variable),
-                      ),
-                    ],
-                  ),
+      child: Container(
+        color: isHovered ? Theme.of(context).highlightColor : null,
+        child: Row(
+          children: [
+            Expanded(
+              child: OverflowingText(
+                tooltipMessage: originalDisplayValue,
+                textSpan: TextSpan(
+                  text: hasName ? widget.variable.name : null,
+                  style: widget.variable.artificialName
+                      ? theme.subtleFixedFontStyle
+                      : theme.fixedFontStyle.apply(
+                          color: theme.colorScheme.controlFlowSyntaxColor,
+                        ),
+                  children: [
+                    if (hasName)
+                      TextSpan(text: ': ', style: theme.fixedFontStyle),
+                    TextSpan(
+                      text: displayValue,
+                      style: widget.variable.artificialValue
+                          ? theme.subtleFixedFontStyle
+                          : _variableDisplayStyle(theme, widget.variable),
+                    ),
+                  ],
                 ),
               ),
-              if (isHovered && widget.onCopy != null)
-                DevToolsButton(
-                  icon: Icons.copy_outlined,
-                  outlined: false,
-                  onPressed: () => widget.onCopy!.call(widget.variable),
-                ),
-            ],
-          ),
+            ),
+            if (isHovered && widget.onCopy != null)
+              DevToolsButton(
+                icon: Icons.copy_outlined,
+                outlined: false,
+                onPressed: () => widget.onCopy!.call(widget.variable),
+              ),
+          ],
         ),
       ),
     );
@@ -248,8 +268,9 @@ class DapDisplayProvider extends StatelessWidget {
     // TODO(https://github.com/flutter/devtools/issues/6056): Wrap in
     // interactivity wrapper to provide inspect and re-root functionality. Add
     // tooltip on hover to provide type information.
-    return Text.rich(
-      TextSpan(
+    return OverflowingText(
+      tooltipMessage: value,
+      textSpan: TextSpan(
         text: name,
         style: theme.fixedFontStyle.apply(
           color: theme.colorScheme.controlFlowSyntaxColor,

packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md

@@ -36,7 +36,7 @@ TODO: Remove this section if there are not any updates.
 
 ## Debugger updates
 
-TODO: Remove this section if there are not any updates.
+- Fixed an issue where long string values in the console/variables view would overflow and overlap with other elements. [#7112](https://github.com/flutter/devtools/issues/7112)
 
 ## Network profiler updates
 

packages/devtools_app/test/screens/debugger/debugger_screen_dap_variables_test.dart

@@ -126,4 +126,39 @@ void main() {
     // String is now visible.
     expect(stringFinder, findsOneWidget);
   });
+  testWidgetsWithWindowSize(
+    'Truncates long variables to a single line with tooltip',
+    windowSize,
+    (WidgetTester tester) async {
+      final longString = 'a' * 1000;
+      final node = DapObjectNode(
+        service: vmService,
+        variable: dap.Variable(
+          name: 'longVar',
+          value: longString,
+          variablesReference: 0,
+        ),
+      );
+
+      fakeServiceConnection.appState.setDapVariables([node]);
+      await pumpDebuggerScreen(tester, debuggerController);
+
+      final tooltipFinder = find.byWidgetPredicate(
+        (widget) => widget is DevToolsTooltip && widget.message == longString,
+      );
+      expect(tooltipFinder, findsOneWidget);
+
+      final finder = find.byType(RichText);
+      bool foundTruncated = false;
+      for (final widget in tester.widgetList<RichText>(finder)) {
+        if (widget.text.toPlainText().contains('longVar: $longString')) {
+          expect(widget.maxLines, 1);
+          expect(widget.softWrap, false);
+          expect(widget.overflow, TextOverflow.ellipsis);
+          foundTruncated = true;
+        }
+      }
+      expect(foundTruncated, isTrue);
+    },
+  );
 }