Unwanted bouncing effect when opening keyboard on persistent sheet

[Tommy-Wang0602]

Hi ~ @fujidaiti

As shown as video I've been encountering some issues with ScrollableSheet ,I'm not sure if it's a bug or a layout problem. Due to certain reasons, I need to have the ScrollableSheet appear in the same layer view using a Stack. However, I've been struggling to find a way to prevent the ScrollableSheet from displaying a spring-like animation when the keyboard opens. I'm seeking advice on how to solve this problem.

I've included the code I've been using below for reference.

keyboardissue.mp4

class MobileCalendarAddItemBottomSheet extends StatefulWidget {
  const MobileCalendarAddItemBottomSheet({super.key, required this.context});

  final BuildContext context;

  @override
  State<MobileCalendarAddItemBottomSheet> createState() =>
      _MobileCalendarAddItemBottomSheetState();
}

class _MobileCalendarAddItemBottomSheetState
    extends State<MobileCalendarAddItemBottomSheet> {
  final FocusNode focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      Future.delayed(const Duration(milliseconds: 100), () {
        FocusScope.of(context).requestFocus(focusNode);
      });
    });
  }

  @override
  void dispose() {
    focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    const maxAnchor = Extent.proportional(1.0);
    const secondAnchor = Extent.pixels(185);
    const sheetShape = BoxDecoration(
      borderRadius: BorderRadius.vertical(top: const Radius.circular(16.0)),
      color: Colors.black,
      boxShadow: [
        BoxShadow(
          color: Colors.black45,
          spreadRadius: 2,
          blurRadius: 2,
        ),
      ],
    );

    final systemUiInsets = MediaQuery.of(context).padding;
    return SafeArea(
      bottom: false,
      maintainBottomViewPadding: true,
      child: ScrollableSheet(
        controller: Get.find<CalendarAddItemController>()
            .mobileCalendarAddItemBottomSheetController,
        initialExtent: (Get.find<MaiCalendarController>()
                        .sfCalendarController
                        .value
                        .view ==
                    CalendarView.week ||
                Get.find<MaiCalendarController>()
                        .sfCalendarController
                        .value
                        .view ==
                    CalendarView.day ||
                Get.find<MaiCalendarController>()
                        .sfCalendarController
                        .value
                        .view ==
                    CalendarView.schedule)
            ? secondAnchor
            : maxAnchor,
        maxExtent: maxAnchor,
        minExtent: Extent.pixels(systemUiInsets.bottom),
        physics: StretchingSheetPhysics(
          stretchingRange: const Extent.proportional(0),
          parent: SnappingSheetPhysics(
            snappingBehavior: SnapToNearest(
              snapTo: [secondAnchor, maxAnchor],
            ),
          ),
        ),
        keyboardDismissBehavior: const SheetKeyboardDismissBehavior.onDrag(
          isContentScrollAware: false,
        ),
        child: Container(
          height: MediaQuery.of(context).size.height,
          clipBehavior: Clip.antiAlias,
          decoration: sheetShape,
          margin: const EdgeInsets.only(top: 8.0),
          child: SheetContentScaffold(
            extendBody: true,
            resizeToAvoidBottomInset: false,
            body: CalendarAddItemCreationView(
              focusNode: focusNode,
              firstDate: DateTime(0),
              lastDate: DateTime(9999),
              duration: const Duration(hours: 1).obs,
            ),
          ),
        ),
      ),
    );
  }
}

[fujidaiti]

Hi @Tommy-Wang0602.

Are you using the MobileCalendarAddItemBottomSheet inside a Scaffold?
If so, that's the problem because the sheet and the SheetContentScaffold watch the MediaQueryData.viewInset.bottom to handle the appearing/disappearing of the keyboard, but the Scaffold consumes the viewInset resulting in the descendant widgets always getting viewInset.bottom == 0.

Here's the possible solutions for this case in my mind so far:

• Set Scaffold.resizeToAvoidBottomInset to false, which prevents the Scaffold from consuming the viewInset.
• Stack your sheet on top of the Scaffold rather than nesting them.

Stack(children: [ Scaffold(), YourSheet() ]);

Feel free to ask here if you have any question :)

[bqubique]

Hey I'm trying this same solution but I can't seem to get around it. This is the result I'm getting:

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
// import 'package:smooth_sheets_test/routing/app_router.dart';
import 'package:smooth_sheets_test/routing/sheet_shell.dart';
import 'package:smooth_sheets_test/smooth_sheets.dart';

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

class _AiPlaylistGeneratorExample extends StatelessWidget {
  const _AiPlaylistGeneratorExample();

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      debugShowCheckedModeBanner: false,
      routerConfig: router,
    );
  }
}

final sheetTransitionObserver = NavigationSheetTransitionObserver();

final router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () => context.go('/intro'),
            child: const Text('Generate Playlist'),
          ),
        ),
      ),
      routes: [
        ShellRoute(
          observers: [sheetTransitionObserver],
          pageBuilder: (context, state, navigator) {
            return ModalSheetPage(
              child: SheetShell(
                navigator: navigator,
                transitionObserver: sheetTransitionObserver,
              ),
            );
          },
          routes: [
            GoRoute(
              path: 'intro',
              pageBuilder: (context, state) {
                return const DraggableNavigationSheetPage(
                  child: IntroModal(),
                );
              },
            )
          ],
        )
      ],
    ),
  ],
);

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

  @override
  State<IntroModal> createState() => _IntroModalState();
}

class _IntroModalState extends State<IntroModal>
    with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        const Scaffold(resizeToAvoidBottomInset: false),
        SheetContentScaffold(
          body: ListView(
            children: const [
              TextField(),
              TextField(),
              TextField(),
              TextField(),
            ],
          ),
        )
      ],
    );
  }
}

I can confirm this is not the same behavior as the ToDo List but that does not use declarative routing and it has a ModalSheetRoute. I tried ModalSheetPage instead of DraggableNavigationSheetPage/ScrollableNavigationSheetPage but it throws me this exception:

The following assertion was thrown building 
HeroControllerScope:
'package:smooth_sheets_test/src/navigation/navigation_sheet.dart': Failed assertion: line 138 pos 12: '_localExtentScopeKeyRegistry.containsKey(route)': is not true.

[fujidaiti]

DraggableNavigationSheetPage/ScrollableNavigationSheetPage but it throws me this exception:

This is because the NavigationSheet only works with the NavigationSheetRoute and the NavigationSheetPage and its forks.

 return Stack(
     children: [
       const Scaffold(resizeToAvoidBottomInset: false),
       SheetContentScaffold(

Why is it necessary to stack the two scaffolds? I think it's the cause.

[bqubique]

Well I tried the Stack method by your suggestion above (the accepted answer).
Removing the Scaffold and the Stack, and leaving SheetContentScaffold results in the same behavior (jump). I had it like this before, but tried it just now as well to be safe.

I tried all of the out-of-the-box Pages.

[fujidaiti]

I was able to reproduce the problem and confirmed that this is a bug specific to NavigationSheet (both imperative and declarative). (#131)

Thanks for reporting this!

[bqubique]

Interesting, I guess the reporter of this thread was able to solve this issue in a different environment? (Besides declarative/imperative routing ones).
Thanks for confirming, I'll follow the bug there hopefully!

[appinteractive]

@fujidaiti very valuable and important info, thanks!

[Tommy-Wang0602]

Hi~ @fujidaiti
Thank you for your reply. I appreciate the practical advice and solution direction you provided, which resolved this issue.