Using go_router .go() method to close a sheet don't seems to reset animation state

[glemartret]

When I use .go() method from go router the current Sheet closes but the screen behind stays scaled down.

Quick exemple:

1. currently on home page
2. open a CupertinoSheet with go_router
3. in the sheet, tap a button that does ".go(Home)"
4. the sheet closes but the home page have black left, right and bottom borders

I'll complete this issue more precisely later.
If anyone have some infos to help on this, I'll be thankful

[fujidaiti]

Hi @glemartret,

I tried the following code, but couldn't reproduce the problem.
Can you fill in the missing part in the code to reproduce this issue?

Code

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:smooth_sheets/smooth_sheets.dart';

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

final _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) {
        return const _ExampleHome();
      },
      routes: [
        GoRoute(
          path: 'modal-sheet',
          pageBuilder: (context, state) {
            return CupertinoModalSheetPage(
              key: state.pageKey,
              swipeDismissible: true,
              child: const _ExampleSheet(),
            );
          },
        ),
      ],
    ),
  ],
);

class _DeclarativeModalSheetExample extends StatelessWidget {
  const _DeclarativeModalSheetExample();

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

class _ExampleHome extends StatelessWidget {
  const _ExampleHome();

  @override
  Widget build(BuildContext context) {
    return CupertinoStackedTransition(
      child: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () => context.go('/modal-sheet'),
            child: const Text('Show Modal Sheet'),
          ),
        ),
      ),
    );
  }
}

class _ExampleSheet extends StatelessWidget {
  const _ExampleSheet();

  @override
  Widget build(BuildContext context) {
    return DraggableSheet(
      child: Container(
        color: Colors.white,
        height: 800,
        width: double.infinity,
        alignment: Alignment.center,
        child: TextButton(
          onPressed: () => context.go('/'),
          child: const Text('Close Sheet'),
        ),
      ),
    );
  }
}

[fujidaiti]

the sheet closes but the home page have black left, right and bottom borders

I guess this is because the transition animation is not performed when the modal sheet closes. (I don't know why, though)

[glemartret]

Hey @fujidaiti,
I have a sample to reproduce this behavior, but I don't know if this is a real issue then...

Code

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:smooth_sheets/smooth_sheets.dart';

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

final _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) {
        return const _ExampleHome();
      },
      routes: [
        GoRoute(
          path: 'modal-sheet',
          pageBuilder: (context, state) {
            return CupertinoModalSheetPage(
              key: state.pageKey,
              swipeDismissible: true,
              child: const _ExampleSheet(),
            );
          },
        ),
      ],
    ),
  ],
);

class _DeclarativeModalSheetExample extends StatelessWidget {
  const _DeclarativeModalSheetExample();

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

class _ExampleHome extends StatelessWidget {
  const _ExampleHome();

  @override
  Widget build(BuildContext context) {
    return CupertinoStackedTransition(
      child: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () => context.go('/modal-sheet'),
            child: const Text('Show Modal Sheet'),
          ),
        ),
      ),
    );
  }
}

class _ExampleSheet extends StatelessWidget {
  const _ExampleSheet();

  @override
  Widget build(BuildContext context) {
    return DraggableSheet(
      child: Container(
        color: Colors.white,
        height: 800,
        width: double.infinity,
        alignment: Alignment.center,
        child: TextButton(
          onPressed: () async {
            // INFO: Adding this line will cause the issue            <=====================
            showAboutDialog(context: context);

            context.go('/');
          },
          child: const Text('Close Sheet'),
        ),
      ),
    );
  }
}

[fujidaiti]

@glemartret What does showAboutDialog do? Does it push a new route?

[glemartret]

@fujidaiti That's a Flutter function

[fujidaiti]

@glemartret

Thank you. Seeing the same issue as reported with the provided code.