Skip to content

showBottomSheet scrim doesn't disappear after PersistentBottomSheetController.close() #128367

Closed
#128455
Closed
showBottomSheet scrim doesn't disappear after PersistentBottomSheetController.close()#128367
#128455
Assignees
TahaTesser
Labels
found in release: 3.10Found to occur in 3.10found in release: 3.12Found to occur in 3.12frameworkflutter/packages/flutter repository. See also f: labels.has 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 version

Description

@HansMuller
HansMuller
opened on Jun 7, 2023

Reported by an internal developer in (Google internal link) b/285980589.

Tap FAB to open sheet. Open it towards the top. Tap a list item to programatically close. Actual: scrim is still shown.

One online answer suggested just calling Scaffold.of(context).showBodyScrim(false, 0.0); directly after popping or closing the sheet. Seems like that should be done automatically in this case, though.

Test case

Details 
import 'package:flutter/material.dart';

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

PersistentBottomSheetController? _bottomSheetController;

class MyApp extends StatelessWidget {
  void _showSheet(BuildContext context) {
    _bottomSheetController = Scaffold.of(context).showBottomSheet<void>(
      (_) {
        return DraggableScrollableSheet(
            expand: false,
            controller: DraggableScrollableController(),
            builder: (_, scrollController) =>
                _buildSheetContent(scrollController));
      },
      enableDrag: false,
    );
  }

  Widget _buildSheetContent(ScrollController scrollController) =>
      ListView.builder(
        controller: scrollController,
        itemCount: 25,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
              title: Text('Item $index - tap to close'),
              onTap: () => _bottomSheetController?.close()
              // Same result: Navigator.of(context).pop()
              );
        },
      );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: Colors.lightBlue,
      ),
      home: Scaffold(
        floatingActionButton: Builder(
            builder: (context) =>
                FloatingActionButton(onPressed: () => _showSheet(context))),
        body: Center(
          child: ElevatedButton(child: Text('foo'), onPressed: () {}),
        ),
      ),
    );
  }
}

Activity

  1. HansMuller
    added
    frameworkflutter/packages/flutter repository. See also f: labels.
    p: material_uimaterial_ui package in flutter/packages
    on Jun 7, 2023

  2. HansMuller commented on Jun 7, 2023

    @HansMuller
    HansMuller
    on Jun 7, 2023
    ContributorAuthor

    I was unable to reproduce this issue although maybe I've missed something.

    @TahaTesser could you ask someone from you team to try and reproduce this issue?

    CC @monkeyswarm

  3. TahaTesser commented on Jun 7, 2023

    @TahaTesser
    TahaTesser
    on Jun 7, 2023
    Contributor

    Hi everyone

    Here is a simplified 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(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(useMaterial3: true),
      home: Scaffold(
        floatingActionButton: Builder(
          builder: (BuildContext context) => FloatingActionButton(
            child: const Icon(Icons.add),
            onPressed: () {
              Scaffold.of(context).showBottomSheet<void>(
                (_) {
                  return DraggableScrollableSheet(
                    expand: false,
                    builder: (_, ScrollController scrollController) =>
                        ListView.builder(
                      controller: scrollController,
                      itemCount: 25,
                      itemBuilder: (BuildContext context, int index) {
                        return ListTile(
                          title: Text('Item $index - tap to close'),
                          onTap: () {
                            Navigator.of(context).pop();
                          },
                        );
                      },
                    ),
                  );
                },
              );
            },
          ),
        ),
      ),
    );
  }
}

    I can reproduce the issue following the steps.
    Running on mobile allows dragging the list view to show the scrim.

    Screen.Recording.2023-06-07.at.12.34.01.mov
    flutter doctor -v 
    [!] Flutter (Channel master, 3.12.0-1.0.pre.33, on macOS 13.4 22F66
    darwin-arm64, locale en-EE)
    • Flutter version 3.12.0-1.0.pre.33 on channel master at
      /Users/tahatesser/Code/flutter
    ! Upstream repository git@github.com:TahaTesser/flutter.git is not the same
      as FLUTTER_GIT_URL
    • FLUTTER_GIT_URL = git@github.com:NevercodeHQ/flutter.git
    • Framework revision 96afa500db (6 hours ago), 2023-06-07 04:52:17 +0000
    • Engine revision 59d5444cf0
    • Dart version 3.1.0 (build 3.1.0-163.0.dev)
    • DevTools version 2.24.0
    • If those were intentional, you can disregard the above warnings; however
      it is recommended to use "git" directly to perform update checks and
      upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    • Android SDK at /Users/tahatesser/Code/android-sdk
    • Platform android-33, build-tools 33.0.2
    • ANDROID_SDK_ROOT = /Users/tahatesser/Code/android-sdk
    • Java binary at: /Applications/Android Studio
      Preview.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      17.0.6+0-17.0.6b829.9-10027231)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0)
    • Xcode at /Applications/Xcode-15.0.0-Beta.app/Contents/Developer
    • Build 15A5160n
    • CocoaPods version 1.12.1

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

[!] Android Studio (version unknown)
    • Android Studio at /Applications/Android Studio Preview.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
    ✗ Unable to determine Android Studio version.
    • Java version OpenJDK Runtime Environment (build
      17.0.6+0-17.0.6b829.9-10027231)

[✓] VS Code (version 1.79.0-insider)
    • VS Code at /Applications/Visual Studio Code - Insiders.app/Contents
    • Flutter extension version 3.66.0

[✓] Connected device (3 available)
    • iPhone 14 Pro Max (mobile) • 37761411-046B-46E2-A574-D29475E5DD6A • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-17-0 (simulator)
    • macOS (desktop)            • macos                                •
      darwin-arm64   • macOS 13.4 22F66 darwin-arm64
    • Chrome (web)               • chrome                               •
      web-javascript • Google Chrome 114.0.5735.106

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

! Doctor found issues in 2 categories.
  4. TahaTesser
    added
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    found in release: 3.10Found to occur in 3.10
    found in release: 3.12Found to occur in 3.12
    on Jun 7, 2023

  5. HansMuller commented on Jun 7, 2023

    @HansMuller
    HansMuller
    on Jun 7, 2023
    ContributorAuthor

    Thanks @TahaTesser, that makes the problem crystal clear.

  6. TahaTesser
    self-assigned this
    on Jun 7, 2023
  7. TahaTesser
    added this to Nevercodeon Jun 7, 2023
  8. github-project-automation
    moved this to To do in Nevercodeon Jun 7, 2023
  9. TahaTesser
    moved this from To do to PR submitted in Nevercodeon Jun 7, 2023
  10. auto-submit
    closed this as completedin #128455on Jun 9, 2023
  11. github-project-automation
    moved this from PR submitted to Done (PR merged) in Nevercodeon Jun 9, 2023
  12. auto-submit
    added a commit that references this issue on Jun 9, 2023

    Fix `showBottomSheet` doesn't remove scrim when draggable sheet is di…

    8600eb1
  13. TahaTesser
    added
    r: fixedIssue is closed as already fixed in a newer version
    on Jun 9, 2023

  14. github-actions commented on Jun 23, 2023

    @github-actions
    github-actionsbot
    on Jun 23, 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.

  15. github-actions
    locked as resolved and limited conversation to collaborators on Jun 23, 2023
  16. chunhtai
    added a commit that references this issue on Jun 12, 2026

    Fix `showBottomSheet` doesn't remove scrim when draggable sheet is di…

    0c77b6b
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

found in release: 3.10Found to occur in 3.10found in release: 3.12Found to occur in 3.12frameworkflutter/packages/flutter repository. See also f: labels.has 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 version

Type

No type

Projects

  • Nevercode
    Status
    Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions