Flutterexperts

Flutter team come up with a new update. A declarative API to set the history stack of the Navigator and a new Router widget to configure the Navigator based on events.

Now Navigator that allows setting the navigator’s history stack in a declarative way by providing a list of immutable Pages

For those who don’t know the difference between declarative and imperative programming?

---

Brief introduction :

“Imperative programming is like how you do something, and declarative programming is more like what you do.”

Code example :

Imperative style :

// Imperative style
b.setColor(red)
b.clearChildren()
ViewC c3 = new ViewC(...)
b.add(c3)

Declarative style :

// Declarative style
return ViewB(
color: red,
child: ViewC(...),
)

For more info check out this link

Why we need Navigator 2.0?

1. It is difficult to push or pop multiple pages or remove a page in Navigator 1.0.

2. Now APIs enable more fine-tuned control over the screens in your app.

Let’s see how to migrate to Navigator 2.0

First, wrap it with Navigator.

Navigator(
  pages: [
   // it takes a list of pages 
  ],
  onPopPage: (route, result) {

  },
),

And What exactly page is?

MaterialPage(
  key: ValueKey('uniqueKey'),
  child: Screen2(),
),

What onPopPage callback do :

when pop is invoked but the current Route corresponds to a Page found in the pages list. And The result argument is the value with which the route is to complete. This callback is responsible for calling Route.didPop() and returning whether this pop is successful.

The Navigator widget should be rebuilt with a pages list that does not contain the Page for the given Route. The next time the pages list is updated, if the Page corresponding to this Route is still present, it will be interpreted as a new route to display.

Navigator(
  pages: [
    MaterialPage(
    key: ValueKey('uniqueKey'),
    child: Screen2(),
),
  ],
  onPopPage: (route, result) {
    if (route.didPop(result)) return true;
   
    return false;
  },
)

Let’s dig into code:

Here you can see on tapping the text callback update our bool value. By default, it lands to Screen1 and on updating bool value it moves to Screen2.

class _MyAppState extends State<MyApp> {
  bool isStacked = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Navigator(
        pages: [
          MaterialPage(
            key: ValueKey('unique '),
            child: Screen1(
              onTap: (value) {
                isStacked = value;
                setState(() {});
              },
            ),
          ),
          if (isStacked == true)
            MaterialPage(
              child: Screen2(),
            ),
        ],
        onPopPage: (route, result) {
          if (!route.didPop(result)) return false;
          setState(() => isStacked = false);
          return true;
        },
      ),
    );
  }
}

Screen1 view:

class Screen1 extends StatelessWidget {
  Function(bool) onTap;

  Screen1({this.onTap});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Navigator 2.0"),
      ),
      body: Center(
        child: InkWell(
          onTap: () {
            onTap(true);
          },
          child: Text(
            'Screen 1 \n tap on text to maove to screen2',
          ),
        ),
      ),
    );
  }
}

Screen 2 :

class Screen2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          onPressed: ()
          {
            Navigator.of(context).pop();
          },
          icon: Icon(
              Icons.arrow_back_ios ,
          ),
        ),
        title: Text("Back to Screen 1"),
      ),
      body: Center(
        child: InkWell(
          child: Text(
            'Screen 2 ',
          ),
        ),
      ),
    );
  }
}

Check out the full code :

flutter-devs/navigator_v2
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

A warm welcome for all the queries and suggestion. If you find anything that could be improved please let me know, I would love to improve

---

Feel free to connect with us:
And read more articles from FlutterDevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!