flutter_modular - Navigation open two pages in same time

[thobiassilva]

When we click on two points on the screen simultaneously to do navigation (with Modular.pushNamed ), it opens two pages together.

Using flutter's native navigation, the problem doesn't happen

How can I deal with this?

teste_navegacao_flutter_modular.mp4

[thobiassilva]

I found a way to solve it, but I don't know if it's the best

I added a variable to control the current state pushing, I change it to true after starting the navigation, and at the end I change it to false again.

  @override
  Future<T?> pushNamed<T extends Object?>(String routeName,
      {Object? arguments, bool forRoot = false}) async {
    if (pushing) return null;
    pushing = true;

    final popComplete = Completer();
    var book = await parser.selectBook(routeName,
        arguments: arguments, popCallback: popComplete.complete);
    if (forRoot) {
      book = currentConfiguration!.copyWith(routes: [
        ...currentConfiguration!.routes,
        book.routes.last.copyWith(schema: '')
      ]);
      await setNewRoutePath(book);
    } else {
      final list = [...currentConfiguration!.routes];

      for (var route in book.routes.reversed) {
        if (list
                .firstWhere(
                    (element) => element.uri.toString() == route.uri.toString(),
                    orElse: () => ParallelRoute.empty())
                .name ==
            '') {
          list.add(route);
        }
      }

      if (currentConfiguration!.routes.length == list.length) {
        list.add(book.routes.last);
      }

      await setNewRoutePath(book.copyWith(routes: list));
    }

    pushing = false;
    return await popComplete.future;
  }

What do you think?

[develogo]

Any updates?

[jacobaraujo7]

This error persist on v6?

[develogo]

This error persist on v6?

Yes, i did the test on v6 and the problem persists.

[jacobaraujo7]

Do you have any examples?

[develogo]

Do you have any examples?

When clicking both buttons at the same time, both navigations are performed, something that doesn't happen with the standard navigation.

Modular

2023-08-04.10-52-38.mp4

Flutter navigation

2023-08-04.10-54-55.mp4

[develogo]

Flutter Modular

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

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.center,
        children: [
          Positioned(
            top: 100,
            child: ElevatedButton(
              onPressed: () {
                Modular.to.pushNamed('/test1');
              },
              child: const Icon(Icons.remove),
            ),
          ),
          Positioned(
            bottom: 100,
            child: ElevatedButton(
              onPressed: () {
                Modular.to.pushNamed('/test2');
              },
              child: const Icon(Icons.add),
            ),
          ),
        ],
      ),
    );
  }
}

Flutter Navigation

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.center,
        children: [
          Positioned(
            top: 100,
            child: ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) => const SecondPage(),
                  ),
                );
              },
              child: const Icon(Icons.remove),
            ),
          ),
          Positioned(
            bottom: 100,
            child: ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) => const ThirdPage(),
                  ),
                );
              },
              child: const Icon(Icons.add),
            ),
          ),
        ],
      ),
    );
  }

[thobiassilva]

This error persist on v6?

I looked at the current code and it follows the same without changes. What do you think of my previous suggestion? I based it on the navigator that uses status to validate

[jacobaraujo7]

Flutter Modular

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

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.center,
        children: [
          Positioned(
            top: 100,
            child: ElevatedButton(
              onPressed: () {
                Modular.to.pushNamed('/test1');
              },
              child: const Icon(Icons.remove),
            ),
          ),
          Positioned(
            bottom: 100,
            child: ElevatedButton(
              onPressed: () {
                Modular.to.pushNamed('/test2');
              },
              child: const Icon(Icons.add),
            ),
          ),
        ],
      ),
    );
  }
}

Flutter Navigation

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.center,
        children: [
          Positioned(
            top: 100,
            child: ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) => const SecondPage(),
                  ),
                );
              },
              child: const Icon(Icons.remove),
            ),
          ),
          Positioned(
            bottom: 100,
            child: ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) => const ThirdPage(),
                  ),
                );
              },
              child: const Icon(Icons.add),
            ),
          ),
        ],
      ),
    );
  }

Can you provide a complete example?

[Z3rolive]

I'm running into this issue as well. This issue has been the most painful of all because users can open multiple items on a listview and open multiple navigations. Even if this issue is fixed on some recent version, I won't be able to migrate because there is not enough documentation for migration from v5 to v6 as for the scenarios mentioned in this issue #901.

[eduardoflorence]

@jacobaraujo7
Can you provide a complete example?

Flutter Standard Navigation:

import 'package:flutter/material.dart';

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

class AppWidget extends StatelessWidget {
  const AppWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        '/': (context) => const HomePage(),
        '/first': (context) => const FirstPage(),
        '/second': (context) => const SecondPage(),
      },
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Column(
        children: [
          Expanded(
            child: GestureDetector(
              onTap: () async {
                print('TAP 1');
                Navigator.pushNamed(context, '/first');
              },
              child: Container(color: Colors.blue),
            ),
          ),
          Expanded(
            child: GestureDetector(
              onTap: () async {
                print('TAP 2');
                Navigator.pushNamed(context, '/second');
              },
              child: Container(color: Colors.red),
            ),
          ),
        ],
      ),
    ));
  }
}

class FirstPage extends StatelessWidget {
  const FirstPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () => Navigator.pop(context),
          child: const Text('Return 1'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  const SecondPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () => Navigator.pop(context),
          child: const Text('Return 2'),
        ),
      ),
    );
  }
}

Modular Navigation:

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

void main() {
  runApp(ModularApp(module: AppModule(), child: const AppWidget()));
}

class AppWidget extends StatelessWidget {
  const AppWidget({super.key});

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

class AppModule extends Module {
  @override
  void binds(i) {}

  @override
  void routes(r) {
    r.child('/', child: (context) => const HomePage());
    r.child('/first', child: (context) => const FirstPage());
    r.child('/second', child: (context) => const SecondPage());
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Column(
        children: [
          Expanded(
            child: GestureDetector(
              onTap: () {
                print('TAP 1');
                Modular.to.pushNamed('/first');
              },
              child: Container(color: Colors.blue),
            ),
          ),
          Expanded(
            child: GestureDetector(
              onTap: () async {
                print('TAP 2');
                Modular.to.pushNamed('/second');
              },
              child: Container(color: Colors.red),
            ),
          ),
        ],
      ),
    ));
  }
}

class FirstPage extends StatelessWidget {
  const FirstPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () => Modular.to.pop(),
          child: const Text('Return 1'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  const SecondPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () => Modular.to.pop(),
          child: const Text('Return 2'),
        ),
      ),
    );
  }
}