Flutter navigation best practice

Question

I have a question for flutter developers that they have experience with angular or android sdk.

in android when you want to navigate between different screens without decreasing the performance we use fragments and we change them using frame layout

same thing for angular, we use router outlet and we navigate between components using routes

I want to implement the same thing with flutter (ps: I sow some articles like this one where the author navigate between his pages by updating the state and showing the right page conditionally witch I don't think that is a good practice)

So my question is there any way to use navigation in flutter like we do in angular or android ?

Thank you

Answer 1

I have an app with multiple pages, I have used RouteGenerator to manges these routes, I also come from Angular background and found this to be the best approach as all my routes are located in one file.

https://flutter.dev/docs/cookbook/navigation/named-routes

Answer 2

You could use PageView .

  PageController pageController = PageController(initialPage: 0);
  int _selectedIndex = 0;

  void _selectCurrentTab(int index) {
    setState(() {
      _selectedIndex = index;
    });
    pageController.animateToPage(_selectedIndex,
        duration: Duration(milliseconds: 250), curve: Curves.linear);
  }      

@override
Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: ...,
            body: PageView(
              pageSnapping: true,
              controller: pageController,
              children: [HomePage(), AboutPage()],
            ),
            bottomNavigationBar: BottomNavigationBar(
              items: [
                BottomNavigationBarItem(...),
                BottomNavigationBarItem(...)
              ],
              type: BottomNavigationBarType.fixed,
              showUnselectedLabels: true,
              currentIndex: _selectedIndex,
              onTap: _selectCurrentTab,
            )));
  }

Answer 3

What you need is Nested Routing. Check this out Link on how to implement Nested Routing using Navigator 2.0.

Answer 4

Actually, there is no such thing as you said "Navigate just the specific area" in Flutter. Usually, I develop android apps, and I didn't see that in android either. Yes, you can change the fragment but this action is not navigation. It is kind of replace. If you try to replace the widget (or fragment) in flutter yes you can but, it is not navigation. Navigation is something else. Navigation is replacing the whole page.

Flutter focuses on widget's specific states. You can change every widget's state at any time. So, maybe you should change your perspective.