SelectionArea width differs between web and native

Steps to reproduce

Run the code on web and native (screenshots below taken on Linux)
Toggle wrapInSelectionArea to wrap the dialog content in a SelectionArea
Compare the results between web and native

Expected results

SelectionArea extends to the full width of the dialog on both web and desktop.

Actual results

SelectionArea extends to the full width of the dialog on desktop, but not on web.

Code sample

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: const MyHomePage());
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();

    WidgetsBinding.instance.addPostFrameCallback((_) {
      showDialog(
        context: context,
        builder: (context) => ChillDialog(
          children: [
            const Text(
              'Welcome to Flutter! This is a simple dialog example. You can add any widgets here. Feel free to customize it as needed.',
            ),
            ElevatedButton(
              child: Text("Close"),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      );
    });
  }

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

class ChillDialog extends StatelessWidget {
  const ChillDialog({this.children = const [], super.key});

  final List<Widget> children;

  @override
  Widget build(BuildContext context) {
    final wrapInSelectionArea = true;

    final content = Container(
      constraints: const BoxConstraints(maxWidth: 250),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: children,
      ),
    );

    return SimpleDialog(
      children: [
        if (wrapInSelectionArea) SelectionArea(child: content) else content,
      ],
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

With SelectionArea (web top, Linux bottom):

Without SelectionArea (web top, Linux bottom):

Logs

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.32.5, on Arch Linux 6.15.4-arch2-1, locale en_US.UTF-8) [101ms]
    • Flutter version 3.32.5 on channel stable at /home/felipe/Applications/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision fcf2c11572 (10 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-rc2) [2.2s]
    • Android SDK at /home/felipe/Android/Sdk/
    • Platform android-35, build-tools 35.0.0-rc2
    • ANDROID_HOME = ~/Android/Sdk
    • Java binary at: /home/felipe/Applications/android-studio/jbr/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 17.0.11+0-17.0.11b1207.24-11852314)
    • All Android licenses accepted.

[✓] Chrome - develop for the web [17ms]
    • CHROME_EXECUTABLE = chromium

[✓] Linux toolchain - develop for Linux desktop [408ms]
    • clang version 20.1.6
    • cmake version 4.0.3-dirty
    • ninja version 1.12.1
    • pkg-config version 2.5.1
    • OpenGL core renderer: Mesa Intel(R) Iris(R) Xe Graphics (TGL GT2)
    • OpenGL core version: 4.6 (Core Profile) Mesa 25.1.4-arch1.1
    • OpenGL core shading language version: 4.60
    • OpenGL ES renderer: Mesa Intel(R) Iris(R) Xe Graphics (TGL GT2)
    • OpenGL ES version: OpenGL ES 3.2 Mesa 25.1.4-arch1.1
    • OpenGL ES shading language version: OpenGL ES GLSL ES 3.20
    • GL_EXT_framebuffer_blit: yes
    • GL_EXT_texture_format_BGRA8888: yes

[✓] Android Studio (version 2024.1) [15ms]
    • Android Studio at /home/felipe/Applications/android-studio
    • 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 17.0.11+0-17.0.11b1207.24-11852314)

[✓] Connected device (2 available) [130ms]
    • Linux (desktop) • linux  • linux-x64      • Arch Linux 6.15.4-arch2-1
    • Chrome (web)    • chrome • web-javascript • Chromium 138.0.7204.49 Arch Linux

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

• No issues found!

@Mr-Pepe

Triage Report

hi @Mr-Pepe, thanks for the report. However I was not able to reproduce the issue using the provided code sample on either the stable (3.32.5) or master (3.33.0-1.0.pre.829) channels with wrapInSelectionArea = true. The screenshots appear identical on my end.

Platform	Screenshot
Web
macOS

Please let me know if I'm missing anything.

Those screenshots don't look identical to me. On web, the dialog content does not extend to the full width of the dialog.

thanks for the revert. I referred to it as the identical one based on the as needed part of the text in the both screenshots. Could you clarify what you meant?

Yours	Mine

Do you see how the close button does not extend to the full dialog width on web? It should always extend to the full width, regardless of web/native and with/without SelectionArea.

@Mr-Pepe

Do you see how the close button does not extend to the full dialog width on web? It should always extend to the full width, regardless of web/native and with/without SelectionArea.

@Mr-Pepe apologies for the oversight, and thank you for confirming and reporting. I'm observing the same behavior with the latest SDK versions on Web (Both Chrome & Safari).

previous stable : 3.29.3
latest stable : 3.32.5
latest master : 3.33.0-1.0.pre.876

Android	iOS

Platform	Screenshot
macOS
Web 🐛 ❗

This looks like a regression caused by #150037

I think we can resolve this by using StackFit.passthrough in our PlatformSelectableRegionContextMenu, it defaults to loose so that may be why the text seems to lay itself out more freely because its not as tightly constrained. This only happens on the web because PlatformSelectableRegionContextMenu is only used on the web to access the native browser context menu.

SelectableRegion should passthrough constraints to child unmodified (#…

SelectableRegion should passthrough constraints to child unmodified (f…

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

SelectableRegion should passthrough constraints to child unmodified (f…

Navigation Menu

Repository navigation

SelectionArea width differs between web and native #171632

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Triage Report

10 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

SelectionArea width differs between web and native #171632

Description

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Activity

tirth-patel-nc commented on Jul 7, 2025

Triage Report

Mr-Pepe commented on Jul 7, 2025

tirth-patel-nc commented on Jul 7, 2025

Mr-Pepe commented on Jul 8, 2025

tirth-patel-nc commented on Jul 9, 2025

10 remaining items

Renzo-Olivares commented on Feb 10, 2026

github-actions commented on Apr 8, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions