How to add controller to ScrollableNavigationSheetRoute?

[andikatp]

Im stuck and not sure how to add controller to ScrollableNavigationSheetRoute, i want to create an animation where the border radius at top left and right to zero when it reaches the top of the page, usually i listen to height of the modal using controller, but i dont know how to put controller in ScrollableNavigationSheetRoute, thanks

[fujidaiti]

Hi @andikatp,

SheetController cannot be attached to ScrollableNavigationSheetRoute since it is not a sheet. You can attach it to NavigationSheet instead.

[andikatp]

yes thats what i thought at beginning, then i put controller at NavigationSheet to your tutorial code like this

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

class _ImperativeNavigationSheetExample extends StatefulWidget {
  const _ImperativeNavigationSheetExample();

  @override
  State<_ImperativeNavigationSheetExample> createState() => _ImperativeNavigationSheetExampleState();
}

class _ImperativeNavigationSheetExampleState extends State<_ImperativeNavigationSheetExample> {
late final SheetController controller;

  @override
  void initState() {
    controller = SheetController();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            const Placeholder(),
            _ExampleSheet(controller),
          ],
        ),
      ),
    );
  }
}

// NavigationSheet requires a special NavigatorObserver in order to
// smoothly change its extent during a route transition.
final _transitionObserver = NavigationSheetTransitionObserver();

class _ExampleSheet extends StatelessWidget {
  const _ExampleSheet(this.controller);

  final SheetController controller;

  @override
  Widget build(BuildContext context) {
    // Create a navigator somehow that will be used for nested navigation in the sheet.
    final nestedNavigator = Navigator(
      // Do not forget to attach the observer!
      observers: [_transitionObserver],
      onGenerateInitialRoutes: (navigator, initialRoute) {
        return [
          // Use DraggableNavigationSheetRoute for a draggable page.
          DraggableNavigationSheetRoute(
            builder: (context) {
              return const _DraggablePage();
            },
          ),
        ];
      },
    );

    // Wrap the nested navigator in a NavigationSheet.
    return NavigationSheet(
      controller: controller,
      transitionObserver: _transitionObserver,
      child: Card(
        clipBehavior: Clip.antiAlias,
        color: Colors.white,
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20)),
        ),
        margin: EdgeInsets.zero,
        child: nestedNavigator,
      ),
    );
  }
}

class _DraggablePage extends StatelessWidget {
  const _DraggablePage();

  void navigateToScrollablePage(BuildContext context) {
    // Use ScrollableNavigationSheetRoute for a scrollable page.
    final route = ScrollableNavigationSheetRoute(
      maintainState: true,
      builder: (context) {
        return const _ScrollablePage();
      },
    );

    Navigator.push(context, route);
  }

  @override
  Widget build(BuildContext context) {
    final title = Text(
      'Draggable Page',
      style: Theme.of(context).textTheme.titleLarge?.copyWith(
            color: Theme.of(context).colorScheme.onSecondaryContainer,
          ),
    );

    return LayoutBuilder(
      builder: (context, constraints) {
        return Container(
          color: Colors.white,
          width: constraints.maxWidth,
          height: constraints.maxHeight * 0.5,
          child: Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              title,
              const SizedBox(height: 32),
              TextButton(
                onPressed: () => navigateToScrollablePage(context),
                child: const Text('Next'),
              ),
            ],
          ),
        );
      },
    );
  }
}

class _ScrollablePage extends StatelessWidget {
  const _ScrollablePage();

  @override
  Widget build(BuildContext context) {
    final backgroundColor = Theme.of(context).colorScheme.secondaryContainer;
    return Scaffold(
      backgroundColor: backgroundColor,
      appBar: AppBar(
        title: const Text('Scrollable Page'),
        backgroundColor: backgroundColor,
      ),
      body: ListView.builder(
        itemCount: 30,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('Item #$index'),
          );
        },
      ),
    );
  }
}

and the error comes all over my debug console

════════ Exception caught by widgets library ═══════════════════════════════════
The following _TypeError was thrown building NavigationSheetRouteContent(dirty, dependencies: [_InheritedSheetExtentScope, _ModalScopeStatus]):
Null check operator used on a null value

The relevant error-causing widget was:
    NavigationSheetRouteContent NavigationSheetRouteContent:file:///C:/Users/Edo/AppData/Local/Pub/Cache/hosted/pub.dev/smooth_sheets-0.6.0/lib/src/navigation/navigation_routes.dart:73:12
════════ Exception caught by rendering library ═════════════════════════════════
The sheet extent and the dimensions values must be finalized during the layout phase.
'package:smooth_sheets/src/foundation/sheet_viewport.dart':
Failed assertion: line 87 pos 7: '_extent.metrics.hasDimensions'
The relevant error-causing widget was:
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by scheduler library ═════════════════════════════════
NavigationSheet: markAsDimensionsWillChange() was called more times than markAsDimensionsChanged() in a frame.
'package:smooth_sheets/src/foundation/sheet_extent.dart':
Failed assertion: line 247 pos 13: '_markAsDimensionsWillChangeCallCount == 0'

did i do something wrong? thank you for your replies

[fujidaiti]

Thank you for posting the code and I could reproduce the error. I confirm this is a bug and will create an issue, thanks. (See #151.)