How to route file to a different page in flutter

Viewed 3759

I'm making an app with Dart/ flutter now and having an issue with routing pages. The app is basically the matching app, and I want to add the functionality that a user can edit their profile. Currently, we have 4 stateful widgets: Match(), Message(), MyProfile() and EditProfile(). In the bottom navigation bar, I put three widgets, Match(), Message(), and MyProfile(); when the user wants to change the profile information, the person goes to MyProfile() and click "edit profile" button, which takes the user to EditProfile. After the user changes the information, I want to rout the page to MyProfile() for allow the user to check the profile info. The code below is some part of the Navigation bar.

class _NavigationHomeState extends State<NavigationHome> {
  int _currentIndex = 0;
  final List<Widget> _children = [
    Match(),
    Messages(),
    MyProfile(),
  ];

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

and I put the code below in one of the button of the EditProfile().

Navigator.of(context).pushNamed('/myProfile');

Then gave me an error saying

Error: Could not find the correct Provider above this MyProfile Widget

This likely happens because you used a BuildContext that does not include the provider of your choice. There are a few common scenarios:

  • The provider you are trying to read is in a different route.

    Providers are "scoped". So if you insert of provider inside a route, then other routes will not be able to access that provider.

  • You used a BuildContext that is an ancestor of the provider you are trying to read.

    Make sure that MyProfile is under your MultiProvider/Provider. This usually happen when you are creating a provider and trying to read it immediatly.

I guess I'm getting this error because we set the _currentIndex in the bottom navigation bar as 0, which is Match(), so Navigator.of(context).pushNamed('/myProfile'); trying to take the user to the Match() page (?)

How can we take the user to the MyProfile page after the person save and click the button on EditProfile()?

2 Answers

Try using MaterialPageRoute instead of named routes.

onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );
}

If you going to EditProfile from MyProfile widget then I suggest to just pop the screen. As this will not reload complete screen, you can always pass data while doing pop.

RaisedButton(
  onPressed: () {
    // The Yep button returns "Yep!" as the result.
    Navigator.pop(context, 'Yep!');
  },
  child: Text('Yep!'),
);

Another option is to use pushNamedAndRemoveUntil method.

navigator.pushNamedAndRemoveUntil('/MyProfile', ModalRoute.withName('/MyProfile'));

I guess I'm getting this error because we set the _currentIndex in the bottom navigation bar as 0, which is Match(), so Navigator.of(context).pushNamed('/myProfile'); trying to take the user to the Match() page (?)

Not sure about your error but you can pass data as argument while doing pushNamed.

RaisedButton(
  child: Text("Navigate to MyProfile"),
  onPressed: () {
   Navigator.pushNamed(
      context,
      '/myProfile',
      arguments: [
        'Extract Arguments Screen',
        'This message is extracted in the build method.',
      ],
    );
  },
),
Related