Skip to content

DraggableScrollableSheet weird behavior with centerDocked FAB #123882

@luis901101

Description

@luis901101

Steps to Reproduce

  1. Execute flutter run on the code sample
  2. Tap on the FAB or just drag the draggable view to the top of the screen
  3. The FAB will shrink and also will do a little rotation.

Expected results:
FAB should not do any rotation, I understand the button should shrink when it's close to the top of the screen or AppBar if any, but in this example code the shrinking starts quite far from the top of the screen.

Actual results:
FAB is rotated a little bit and starts shrinking too far from the top of the screen.

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

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

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TestDraggableScrollableSheet(),
    );
  }
}

class TestDraggableScrollableSheet extends StatefulWidget {
  @override
  State createState() => _TestDraggableScrollableSheetState();
}

class _TestDraggableScrollableSheetState
    extends State<TestDraggableScrollableSheet> {
  final draggableController = DraggableScrollableController();
  final initialChildSize = 0.4;
  final minChildSize = 0.0;
  final maxChildSize = 0.9;

  double get draggableControllerSize => draggableController.isAttached
      ? draggableController.size
      : initialChildSize;

  bool get isDraggableViewCollapsed =>
      draggableControllerSize <= minChildSize + 0.005;

  bool get isDraggableViewExpanded =>
      draggableControllerSize >= maxChildSize - 0.005;

  void collapseDraggableView() {
    draggableController.animateTo(minChildSize,
        duration: const Duration(milliseconds: 300), curve: Curves.decelerate);
  }

  void expandDraggableView({Duration? delay, double? size}) {
    draggableController.animateTo(maxChildSize,
        duration: const Duration(milliseconds: 300), curve: Curves.decelerate);
  }

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData.light().copyWith(
          bottomSheetTheme: const BottomSheetThemeData(
        backgroundColor: Colors.transparent,
      )),
      child: Scaffold(
        // appBar: AppBar(
        //   title: const Text('AppBar title'),
        // ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton.small(
          shape: const CircleBorder(),
          child: const RotatedBox(
              quarterTurns: 1, child: Icon(Icons.compare_arrows)),
          onPressed: () {
            if (isDraggableViewCollapsed) {
              expandDraggableView();
            } else {
              collapseDraggableView();
            }
          },
        ),
        body: const Center(
          child: Text('Scaffold body'),
        ),
        extendBody: true,
        extendBodyBehindAppBar: true,
        bottomNavigationBar: BottomAppBar(
          shape: const CircularNotchedRectangle(),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [Icons.home, Icons.search, Icons.inbox, Icons.person]
                .map((icon) => IconButton(
                      icon: Icon(icon),
                      onPressed: () {},
                    ))
                .toList(),
          ),
        ),
        bottomSheet: DraggableScrollableSheet(
          expand: false,
          initialChildSize: initialChildSize,
          minChildSize: minChildSize,
          maxChildSize: maxChildSize,
          snap: true,
          controller: draggableController,
          builder: (context, scrollController) {
            return Card(
              color: Colors.deepOrange.shade100,
              child: SingleChildScrollView(
                controller: scrollController,
                child: const Center(
                    child: Padding(
                  padding: EdgeInsets.only(top: 32.0),
                  child: Text('DraggableScrollableSheet body'),
                )),
              ),
            );
          },
        ),
      ),
    );
  }
}
Logs

iOS logs

.....
[ +125 ms] success
[        ] Application launched on the device. Waiting for observatory url.
[+2410 ms] Observatory URL on device: http://127.0.0.1:52835/rrh8pDBtMS4=/
[   +5 ms] Attempting to forward device port 52835 to host port 55740
[        ] executing: /Users/user/fvm/versions/3.7.8/bin/cache/artifacts/usbmuxd/iproxy 55740:52835 --udid XXXXXXXXXXXXXXXXX --debug
[ +485 ms] fopen failed for data file: errno = 2 (No such file or directory)
[        ] Errors found! Invalidating cache...
[  +83 ms] fopen failed for data file: errno = 2 (No such file or directory)
[        ] Errors found! Invalidating cache...
[ +440 ms] Forwarded port ForwardedPort HOST:55740 to DEVICE:52835
[        ] Forwarded host port 55740 to device port 52835 for Observatory
[   +2 ms] Installing and launching... (completed in 17.4s)
[   +1 ms] Caching compiled dill
[  +41 ms] Connecting to service protocol: http://127.0.0.1:55740/rrh8pDBtMS4=/
[  +65 ms] Launching a Dart Developer Service (DDS) instance at http://127.0.0.1:0, connecting to VM service at http://127.0.0.1:55740/rrh8pDBtMS4=/.
[  +40 ms] DDS is listening at http://127.0.0.1:55744/xJmXxmByF0M=/.
[  +22 ms] Successfully connected to service protocol: http://127.0.0.1:55740/rrh8pDBtMS4=/
[  +13 ms] DevFS: Creating new filesystem on the device (null)
[   +9 ms] DevFS: Created new filesystem on the device (file:///private/var/mobile/Containers/Data/Application/80DAE93D-6477-46F5-929F-830C06A62CE9/tmp/flutter_bug_testx4eFyZ/flutter_bug_test/)
[        ] Updating assets
[  +48 ms] Syncing files to device zZz...
[   +1 ms] Compiling dart to kernel with 0 updated files
[        ] Processing bundle.
[        ] <- recompile package:flutter_bug_test/main.dart 49a4e99f-1a8f-4bde-a5a8-fc702a714776
[        ] <- 49a4e99f-1a8f-4bde-a5a8-fc702a714776
[   +1 ms] Bundle processing done.
[  +98 ms] Updating files.
[        ] DevFS: Sync finished
[        ] Syncing files to device zZz... (completed in 101ms)
[        ] Synced 0.0MB.
[        ] <- accept
[   +4 ms] Connected to _flutterView/0x106035020.
[   +1 ms] Flutter run key commands.
[        ] r Hot reload. 🔥🔥🔥
[        ] R Hot restart.
[        ] h List all available interactive commands.
[        ] d Detach (terminate "flutter run" but leave application running).
[        ] c Clear the screen
[        ] q Quit (terminate the application on the device).
[        ] 💪 Running with sound null safety 💪
[        ] An Observatory debugger and profiler on zZz is available at: http://127.0.0.1:55744/xJmXxmByF0M=/
[  +78 ms] The Flutter DevTools debugger and profiler on zZz is available at: http://127.0.0.1:9100?uri=http://127.0.0.1:55744/xJmXxmByF0M=/
[+28041 ms] Application finished.

Android logs

......
[+11709 ms] Performing Streamed Install
            Success
[   +1 ms] Installing build/app/outputs/flutter-apk/app-debug.apk... (completed in 11.7s)
[   +3 ms] executing: /Users/user/Android/SDK/platform-tools/adb -s 5200cdba4fa015c5 shell echo -n 6d0e14abef53a46d6a6dff70d89988850ca7d8ba > /data/local/tmp/sky.com.example.flutter_bug_test.sha1
[  +75 ms] executing: /Users/user/Android/SDK/platform-tools/adb -s 5200cdba4fa015c5 shell -x logcat -v time -t 1
[ +141 ms] --------- beginning of main
           03-31 14:47:48.733 D/KnoxVpnEngineService( 3126): vpn handle : Handle MSG package add
[  +11 ms] executing: /Users/user/Android/SDK/platform-tools/adb -s 5200cdba4fa015c5 shell am start -a android.intent.action.MAIN -c android.intent.category.LAUNCHER -f 0x20000000 --ez enable-dart-profiling true --ez enable-checked-mode true --ez verify-entry-points true com.example.flutter_bug_test/com.example.flutter_bug_test.MainActivity
[ +284 ms] Starting: Intent { act=android.intent.action.MAIN cat=[android.intent.category.LAUNCHER] flg=0x20000000 cmp=com.example.flutter_bug_test/.MainActivity (has extras) }
[        ] Waiting for observatory port to be available...
[+2206 ms] Observatory URL on device: http://127.0.0.1:55669/eQUNl-nVLJE=/
[        ] executing: /Users/user/Android/SDK/platform-tools/adb -s 5200cdba4fa015c5 forward tcp:0 tcp:55669
[  +26 ms] 56513
[        ] Forwarded host port 56513 to device port 55669 for Observatory
[   +4 ms] Caching compiled dill
[  +37 ms] Connecting to service protocol: http://127.0.0.1:56513/eQUNl-nVLJE=/
[ +689 ms] Launching a Dart Developer Service (DDS) instance at http://127.0.0.1:0, connecting to VM service at http://127.0.0.1:56513/eQUNl-nVLJE=/.
[ +354 ms] DDS is listening at http://127.0.0.1:56518/O0Xnn5394is=/.
[  +29 ms] Successfully connected to service protocol: http://127.0.0.1:56513/eQUNl-nVLJE=/
[ +165 ms] DevFS: Creating new filesystem on the device (null)
[  +69 ms] DevFS: Created new filesystem on the device (file:///data/user/0/com.example.flutter_bug_test/code_cache/flutter_bug_testISNGLO/flutter_bug_test/)
[        ] Updating assets
[  +39 ms] Syncing files to device SM J727T...
[        ] Compiling dart to kernel with 0 updated files
[        ] Processing bundle.
[        ] <- recompile package:flutter_bug_test/main.dart 227272fe-f73d-42d4-a9dd-8c5f96a34b9f
[        ] <- 227272fe-f73d-42d4-a9dd-8c5f96a34b9f
[        ] Bundle processing done.
[  +98 ms] Updating files.
[        ] DevFS: Sync finished
[        ] Syncing files to device SM J727T... (completed in 100ms)
[        ] Synced 0.0MB.
[        ] <- accept
[   +4 ms] Connected to _flutterView/0xe7221310.
[   +2 ms] Flutter run key commands.
[        ] r Hot reload. 🔥🔥🔥
[        ] R Hot restart.
[        ] h List all available interactive commands.
[        ] d Detach (terminate "flutter run" but leave application running).
[        ] c Clear the screen
[        ] q Quit (terminate the application on the device).
[        ] 💪 Running with sound null safety 💪
[        ] An Observatory debugger and profiler on SM J727T is available at: http://127.0.0.1:56518/O0Xnn5394is=/
[ +330 ms] I/zygote  (28638): Do partial code cache collection, code=62KB, data=59KB
[        ] I/zygote  (28638): After code cache collection, code=62KB, data=59KB
[        ] I/zygote  (28638): Increasing code cache capacity to 256KB
[+3401 ms] D/libGLESv2(28638): STS_GLApi : DTS, ODTC are not allowed for Package : com.example.flutter_bug_test
[  +19 ms] D/vndksupport(28638): Loading /vendor/lib/hw/[email protected] from current namespace instead of sphal namespace.
[ +466 ms] The Flutter DevTools debugger and profiler on SM J727T is available at: http://127.0.0.1:9100?uri=http://127.0.0.1:56518/O0Xnn5394is=/
[+102394 ms] D/ViewRootImpl@7de96b2[MainActivity](28638): ViewPostIme pointer 0
[ +411 ms] D/ViewRootImpl@7de96b2[MainActivity](28638): ViewPostIme pointer 1
[+1440 ms] D/ViewRootImpl@7de96b2[MainActivity](28638): ViewPostIme pointer 0
[ +667 ms] D/ViewRootImpl@7de96b2[MainActivity](28638): ViewPostIme pointer 1
[+1216 ms] D/ViewRootImpl@7de96b2[MainActivity](28638): ViewPostIme pointer 0
[  +50 ms] D/ViewRootImpl@7de96b2[MainActivity](28638): ViewPostIme pointer 1
[+1034 ms] D/ViewRootImpl@7de96b2[MainActivity](28638): ViewPostIme pointer 0
[ +200 ms] D/ViewRootImpl@7de96b2[MainActivity](28638): ViewPostIme pointer 1
[+1819 ms] D/ViewRootImpl@7de96b2[MainActivity](28638): ViewPostIme pointer 0
[  +52 ms] D/ViewRootImpl@7de96b2[MainActivity](28638): ViewPostIme pointer 1
[+11942 ms] Application finished.

No issues found! (ran in 0.9s)
[✓] Flutter (Channel stable, 3.7.8, on macOS 13.0 22A380 darwin-arm64, locale en-US)
    • Flutter version 3.7.8 on channel stable at /Users/user/fvm/versions/3.7.8
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 90c64ed42b (10 days ago), 2023-03-21 11:27:08 -0500
    • Engine revision 9aa7816315
    • Dart version 2.19.5
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Android SDK at /Users/user/Android/SDK
    • Platform android-33, build-tools 33.0.1
    • ANDROID_HOME = /Users/user/Android/SDK
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 2022.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 11.0.15+0-b2043.56-8887301)

Demo

DraggableScrollableSheet.with.centerDocked.FAB.MP4

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work listf: material designflutter/packages/flutter/material repository.found in release: 3.7Found to occur in 3.7found in release: 3.9Found to occur in 3.9frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onteam-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