Skip to content

Can't click on the items under the snackbar with margin #78537

Closed
Closed
Can't click on the items under the snackbar with margin#78537
Labels
found in release: 3.0Found to occur in 3.0found in release: 3.1Found to occur in 3.1frameworkflutter/packages/flutter repository. See also f: labels.has partial patchThere is a PR awaiting someone to take it across the finish linehas reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Description

@lsaudon
lsaudon
opened on Mar 18, 2021

Steps to Reproduce

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  final GlobalKey<ScaffoldMessengerState> scaffoldMessengerKey =
      GlobalKey<ScaffoldMessengerState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: ScaffoldMessenger(
        key: scaffoldMessengerKey,
        child: Scaffold(
          appBar: AppBar(),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                ElevatedButton(
                  onPressed: () {
                    scaffoldMessengerKey.currentState!.showSnackBar(
                      const SnackBar(
                        behavior: SnackBarBehavior.floating,
                        width: 300,
                        content: Text('Snackbar with width'),
                      ),
                    );
                  },
                  child: const Text('Show snackbar with width'),
                ),
                ElevatedButton(
                  onPressed: () {
                    scaffoldMessengerKey.currentState!.showSnackBar(
                      const SnackBar(
                        behavior: SnackBarBehavior.floating,
                        margin: EdgeInsets.fromLTRB(0, 0, 300, 0),
                        content: Text('Snackbar with margin'),
                      ),
                    );
                  },
                  child: const Text('Show snackbar with margin'),
                ),
                ElevatedButton(
                  onPressed: () {
                    print('onPressed');
                  },
                  child: const Text('Try press me'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Expected results:

The button below the snackbar cannot be clicked when decreasing the size of the snackbar via the margin.
This works when you decrease the size with the width.

Actual results:

Be able to click on the button below the snackbar when decreasing the size of the snackbar via the margin.
This works when you decrease the size with the width.

Logs 
[+10475 ms] I/ViewRootImpl@1de61f0[MainActivity]( 4048): ViewPostIme pointer 0
[ +105 ms] I/ViewRootImpl@1de61f0[MainActivity]( 4048): ViewPostIme pointer 1
[ +995 ms] I/ViewRootImpl@1de61f0[MainActivity]( 4048): ViewPostIme pointer 0
[ +171 ms] I/ViewRootImpl@1de61f0[MainActivity]( 4048): ViewPostIme pointer 1
[ +445 ms] I/ViewRootImpl@1de61f0[MainActivity]( 4048): ViewPostIme pointer 0
[ +114 ms] I/ViewRootImpl@1de61f0[MainActivity]( 4048): ViewPostIme pointer 1
[+1059 ms] I/ViewRootImpl@1de61f0[MainActivity]( 4048): ViewPostIme pointer 0
[ +149 ms] I/ViewRootImpl@1de61f0[MainActivity]( 4048): ViewPostIme pointer 1

Analyzing poc...                                                        
No issues found! (ran in 2.0s)

[✓] Flutter (Channel stable, 1.22.6, on macOS 11.2.3 20D91 darwin-x64, locale fr-FR)
    • Flutter version 1.22.6 at /Users/lsaudon/development/flutter
    • Framework revision 9b2d32b605 (il y a 8 semaines), 2021-01-22 14:36:39 -0800
    • Engine revision 2f0af37152
    • Dart version 2.10.5

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/lsaudon/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.4)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    • CocoaPods version 1.9.3

[!] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.54.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.20.0

[✓] Connected device (1 available)
    • SM T500 (mobile) • R9WNB0YFZCJ • android-arm64 • Android 10 (API 29)

! Doctor found issues in 1 category.

Activity

  1. pedromassangocode commented on Mar 18, 2021

    @pedromassangocode
    pedromassangocode
    on Mar 18, 2021

    I can reproduce this on latest stable channel. ScaffoldMesenger reproduce the issue as well.

    gif

    flutter doctor -v 
    [✓] Flutter (Channel stable, 2.0.2, on macOS 11.2.3 20D91 darwin-x64, locale en-AO)
    • Flutter version 2.0.2 at /Users/pedromassango/Code/flutter_stable
    • Framework revision 8962f6dc68 (6 days ago), 2021-03-11 13:22:20 -0800
    • Engine revision 5d8bf811b3
    • Dart version 2.12.1

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/pedromassango/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • ANDROID_HOME = /Users/pedromassango/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[!] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    ! CocoaPods 1.9.3 out of date (1.10.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

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

[✓] Android Studio (version 4.1)
    • 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 1.8.0_242-release-1644-b3-6915495)

[✓] IntelliJ IDEA Community Edition (version 2020.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 54.0.3
    • Dart plugin version 203.7759

[✓] VS Code (version 1.54.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.16.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 11.2.3 20D91 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 89.0.4389.90

! Doctor found issues in 1 category.
  2. pedromassangocode
    closed this as completedon Mar 18, 2021
  3. pedromassangocode
    reopened this on Mar 18, 2021
  4. pedromassangocode
    added
    in triagePresently being triaged by the triage team
    p: material_uimaterial_ui package in flutter/packages
    found in release: 2.0Found to occur in 2.0
    frameworkflutter/packages/flutter repository. See also f: labels.
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    and removed
    in triagePresently being triaged by the triage team
    on Mar 18, 2021

  5. lsaudon commented on Mar 18, 2021

    @lsaudon
    lsaudon
    on Mar 18, 2021
    ContributorAuthor
    Enregistrement.de.l.ecran.2021-03-18.a.15.40.01.mov

  6. exaby73 commented on May 16, 2022

    @exaby73
    exaby73
    on May 16, 2022
    Member

    Issue still persists on the latest stable and master channels.

    Code sample 
    import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  final GlobalKey<ScaffoldMessengerState> scaffoldMessengerKey =
      GlobalKey<ScaffoldMessengerState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ScaffoldMessenger(
        key: scaffoldMessengerKey,
        child: Scaffold(
          appBar: AppBar(),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                ElevatedButton(
                  onPressed: () {
                    scaffoldMessengerKey.currentState!.showSnackBar(
                      const SnackBar(
                        behavior: SnackBarBehavior.floating,
                        width: 300,
                        content: Text('Snackbar with width'),
                      ),
                    );
                  },
                  child: const Text('Show snackbar with width'),
                ),
                ElevatedButton(
                  onPressed: () {
                    scaffoldMessengerKey.currentState!.showSnackBar(
                      const SnackBar(
                        behavior: SnackBarBehavior.floating,
                        margin: EdgeInsets.fromLTRB(0, 0, 300, 0),
                        content: Text('Snackbar with margin'),
                      ),
                    );
                  },
                  child: const Text('Show snackbar with margin'),
                ),
                ElevatedButton(
                  onPressed: () {
                    print('onPressed');
                  },
                  child: const Text('Try press me'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
    Video
    78537_web_stable.mov
    flutter doctor -v (Stable) 
    [✓] Flutter (Channel stable, 3.0.0, on macOS 12.3.1 21E258 darwin-arm, locale en-US)
    • Flutter version 3.0.0 at /Users/nabeelparkar/fvm/versions/stable
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ee4e09cce0 (7 days ago), 2022-05-09 16:45:18 -0700
    • Engine revision d1b9a6938a
    • Dart version 2.17.0
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /Users/nabeelparkar/Library/Android/sdk/
    • Platform android-32, build-tools 32.1.0-rc1
    • ANDROID_SDK_ROOT = /Users/nabeelparkar/Library/Android/sdk/
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = /Applications/Brave Browser.app/Contents/MacOS/Brave Browser

[✓] Android Studio (version 2021.2)
    • 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 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Ultimate Edition (version 2022.1.1)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 67.1.4
    • Dart plugin version 221.5591.52

[✓] VS Code (version 1.67.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.40.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 12.3.1 21E258 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Brave Browser 101.1.38.115

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!
    flutter doctor -v (Master) 
    [✓] Flutter (Channel master, 3.1.0-0.0.pre.733, on macOS 12.3.1 21E258 darwin-arm, locale en-US)
    • Flutter version 3.1.0-0.0.pre.733 at /Users/nabeelparkar/fvm/versions/master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c60936e5c9 (14 hours ago), 2022-05-16 13:04:12 -0400
    • Engine revision aeab8402c6
    • Dart version 2.18.0 (build 2.18.0-117.0.dev)
    • DevTools version 2.13.1

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /Users/nabeelparkar/Library/Android/sdk/
    • Platform android-32, build-tools 32.1.0-rc1
    • ANDROID_SDK_ROOT = /Users/nabeelparkar/Library/Android/sdk/
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = /Applications/Brave Browser.app/Contents/MacOS/Brave Browser

[✓] Android Studio (version 2021.2)
    • 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 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Ultimate Edition (version 2022.1.1)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 67.1.4
    • Dart plugin version 221.5591.52

[✓] VS Code (version 1.67.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.40.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 12.3.1 21E258 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Brave Browser 101.1.38.115

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!```

</details>
  7. exaby73
    added
    found in release: 3.0Found to occur in 3.0
    found in release: 3.1Found to occur in 3.1
    and removed
    found in release: 2.0Found to occur in 2.0
    on May 16, 2022

  8. miquelbeltran commented on Oct 28, 2022

    @miquelbeltran
    miquelbeltran
    on Oct 28, 2022
    Member

    Probably related to this proposal as well: #92787

  9. Hixie
    added
    has partial patchThere is a PR awaiting someone to take it across the finish line
    on May 30, 2023

  10. Hixie commented on May 30, 2023

    @Hixie
    Hixie
    on May 30, 2023
    Contributor

    @MindMayhem wrote a partial patch for this in #114810. If anyone is interested in continuing that work, I'm sure it would be appreciated.

  11. lsaudon commented on Jun 22, 2023

    @lsaudon
    lsaudon
    on Jun 22, 2023
    ContributorAuthor

    @MindMayhem wrote a partial patch for this in #114810. If anyone is interested in continuing that work, I'm sure it would be appreciated.

    I've been doing a pull request for a few weeks now.

  12. flutter-triage-bot
    added
    multiteam-retriage-candidate
    team-designOwned by Design Languages team
    triaged-designTriaged by Design Languages team
    on Jul 8, 2023
  13. auto-submit
    added a commit that references this issue on Jul 14, 2023

    Tap on button behind snack bar defined by margin (#127959)

    c3cd016

  14. bleroux commented on Jul 14, 2023

    @bleroux
    bleroux
    on Jul 14, 2023
    Contributor

    Fixed by #127959

  15. bleroux
    closed this as completedon Jul 14, 2023
  16. exaby73
    added
    r: fixedIssue is closed as already fixed in a newer version
    on Jul 17, 2023

  17. github-actions commented on Jul 31, 2023

    @github-actions
    github-actionsbot
    on Jul 31, 2023

    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.

  18. github-actions
    locked as resolved and limited conversation to collaborators on Jul 31, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    found in release: 3.0Found to occur in 3.0found in release: 3.1Found to occur in 3.1frameworkflutter/packages/flutter repository. See also f: labels.has partial patchThere is a PR awaiting someone to take it across the finish linehas reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions