skip to Main Content

I don’t know how to navigate out from a bottom sheet modal. I did try the following code but it doesn’t work.

 Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          InkWell(
            onTap: () {
              Navigator.pop(context);
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => const EventScreen()),
              );
            },
            child: Container(
              height: 100,
              width: boxWidth,
              decoration: BoxDecoration(
                color: Colors.white,
                border: Border.all(
                  color: const Color.fromARGB(255, 122, 121, 121),
                ),
                borderRadius: const BorderRadius.all(
                  Radius.circular(10),
                ),
              ),
              padding: const EdgeInsets.all(5.0),
              child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Icon(
                      Icons.trending_up_rounded,
                      size: 40,
                      color: Colors.blue,
                    ),
                    Text(
                      'Event Report',
                      style: TextStyle(fontSize: fontSize),
                    ),
                  ]),
            ),
          ),

You see I’m trying to navigate out in these lines of code:

InkWell(
            onTap: () {
              Navigator.pop(context);
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => const EventScreen()),
              );
            },

What I want, when the user click on my container then I close the bottom sheet and then navigate to the next route (page)

What I think is happening, when I clicked the container then it try to open the next route inside the bottom sheet modal.

2

Answers


  1. Chosen as BEST ANSWER

    It turns out, the issue was in the EventScreen() class. That's why the navigation was not get to that page because of the error.


  2. Try:

    InkWell(
      onTap: () {
        Navigator.pop(context);
        Navigator.push(
          context,
          MaterialPageRoute(
              builder: (context) => const EventScreen(),
              maintainState: false),
        );
      },
    

    From the documentation:

    By default, when a modal route is replaced by another, the previous route remains in memory. To free all the resources when this is not necessary, set maintainState to false.

    Good luck!

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search