Skip to content

SelectionArea width differs between web and native #171632

Description

@Mr-Pepe

Steps to reproduce

  1. Run the code on web and native (screenshots below taken on Linux)
  2. Toggle wrapInSelectionArea to wrap the dialog content in a SelectionArea
  3. 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

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):
Image

Without SelectionArea (web top, Linux bottom):
Image

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!

Metadata

Metadata

Labels

P2Important issues not at the top of the work listf: material designflutter/packages/flutter/material repository.f: selectionSelectableRegion, SelectionArea, SelectionContainer, Selectable, and related APIsfound in release: 3.32Found to occur in 3.32found in release: 3.33Found to occur in 3.33frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyteam-webOwned by Web platform teamtriaged-webTriaged by Web platform team

Type

No type
No fields configured for issues without a type.

Projects

Status
Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions