Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Navigator.push doesn't work when second page uses Navigator.pop in a separate Widget

I’m trying to use a custom Widget which uses a function to do a Navigation.pop(). If I use the GestureDetector in the page, the navigation from FirstPage to SecondPage works fine (commented out code). But if I use a separate Widget (MyButton) with a function which should trigger the Navigator.pop(), then the Navigator.push() doesn’t work. There’s no error. Thank for any help.

import 'package:flutter/material.dart';

void main() => runApp(TestNavigation());

class TestNavigation extends StatelessWidget {
  const TestNavigation({super.key});
  @override Widget build(BuildContext context) {
    return const MaterialApp(home: FirstPage());
  }
}

class FirstPage extends StatefulWidget {
  const FirstPage({super.key});
  @override State<FirstPage> createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  @override Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: GestureDetector(
                onTap: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => SecondPage()));
                },
                child: const Text(
                  'Click to next Page',
                ))));
  }
}

class SecondPage extends StatelessWidget {
  @override Widget build(BuildContext context) {
    return Scaffold(
        // body: GestureDetector(
        //     onTap: () {
        //       Navigator.pop(context);
        //     },
        //     child: Container(
        //         child: Center(child: Text('Go back to first page')))));
        body: MyButton(
            onTap: () {
              Navigator.pop(context);
            },
            text: 'Go back to first page'));
  }
}

class MyButton extends StatelessWidget {
  final String text;
  final Function onTap;

  const MyButton({required this.text, required this.onTap});

  @override Widget build(BuildContext context) {
    return GestureDetector(
        onTap: onTap(), child: Center(child: Text(text)));
  }
}

No navigation is happening. But if I use the commented out code then it works.

Tags:

3

Answers


  1. 0

    onTap is a callback function, declare it as VoidCallback.

    Here’s your custom widget and i tried it and was working:

    class MyButton extends StatelessWidget {
  final String text;
  final VoidCallback onTap;

  const MyButton({required this.text, required this.onTap});

  @override Widget build(BuildContext context) {
    return GestureDetector(
        onTap: onTap, child: Center(child: Text(text)));
  }
}

    Hope it helps you.

    Login or Signup to reply.
  2. 0

    change the way you’re calling onTap
    from onTap: onTap() to onTap: () => onTap(),

    here the full code

    import 'package:flutter/material.dart';

void main() => runApp(TestNavigation());

class TestNavigation extends StatelessWidget {
  const TestNavigation({super.key});
  @override Widget build(BuildContext context) {
    return const MaterialApp(home: FirstPage());
  }
}

class FirstPage extends StatefulWidget {
  const FirstPage({super.key});
  @override State<FirstPage> createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  @override Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: GestureDetector(
                onTap: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => SecondPage()));
                },
                child: const Text(
                  'Click to next Page',
                ))));
  }
}

class SecondPage extends StatelessWidget {
  @override Widget build(BuildContext context) {
    return Scaffold(
        // body: GestureDetector(
        //     onTap: () {
        //       Navigator.pop(context);
        //     },
        //     child: Container(
        //         child: Center(child: Text('Go back to first page')))));
        body: MyButton(
            onTap: () {
              Navigator.pop(context);
            },
            text: 'Go back to first page'));
  }
}

class MyButton extends StatelessWidget {
  final String text;
  final Function onTap;

  const MyButton({required this.text, required this.onTap});

  @override Widget build(BuildContext context) {
    return GestureDetector(
        onTap:()=> onTap(), child: Center(child: Text(text)));
  }
}
    Login or Signup to reply.
  3. 0

    Mybe you can try this:

    class MyButton extends StatelessWidget {
  const MyButton({super.key, required this.text, required this.onTap});

  final String text;
  final Function() onTap;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(onTap: onTap, child: Center(child: Text(text)));
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search