Skip to content

Tapping underlkying non-swipeable route during transition pops underlying route #96

@joachimbulow

Description

@joachimbulow

Describe the bug

Something odd is happening when you have a non-swipeable route underneath a swipeable route.
If you enable the animation gesture, and you tap the underlying route while the animation is running, two routes are popped.
And in a weird way which breaks hero animations etc.

The issue does not occur if the underlying route is using the edgeswipeable route builder tho.

Screenshots
Minimal example:

@RoutePage()
class PlaygroundPage extends ConsumerStatefulWidget {
  const PlaygroundPage({super.key});

  @override
  ConsumerState<PlaygroundPage> createState() => _PlaygroundPageState();
}

class _PlaygroundPageState extends ConsumerState<PlaygroundPage> {
  ProfileModel? noncachedProfile;
  bool isLoading = false;

  AssetBytes? selectedAsset;

  // init state
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        ref.read(routerProvider)!.push(TestRedRoute());
      },
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text("tap mee"),
          ],
        ),
      ),
    );

as the main page, with these screens:

import 'package:auto_route/auto_route.dart';
import 'package:doubble_app/features/router/router.dart';
import 'package:flutter/material.dart';

@RoutePage()
class TestRedScreen extends StatelessWidget {
  const TestRedScreen({super.key});

// full screen
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          context.router.push(TestGreenRoute());
        },
        child: Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.red,
          child: Center(
            child: Text('Test Red'),
          ),
        ),
      ),
    );
  }
}

and

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

@RoutePage()
class TestGreenScreen extends StatelessWidget {
  const TestGreenScreen({super.key});

// full screen
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.green,
        width: double.infinity,
        height: double.infinity,
        child: Center(
          child: Text('Test Green'),
        ),
      ),
    );
  }
}

Only the green route is swipeble:

CustomRoute(
        page: TestRedRoute.page,
      ),
      CustomRoute(
        page: TestGreenRoute.page,
        customRouteBuilder: swipeAbleRouteBuilder,
      ),

So if i start swiping the green screen, and tap the red screen while its animating, i am popped to the root...

What can we do to fix this you reckon? Or is it just a bug?

Environment:
We use version
swipeable_page_route: ^0.4.3

Metadata

Metadata

Assignees

No one assigned

    Labels

    T: FixType: :bug: Bug Fixes

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions