Navigating Through Screens with Named Routes

An app is nothing but just lots of beautiful screens with different functionalities connected together for great and easy user experience. Let us dive in the concept of Navigation in flutter through named routes.

Navigating Through Screens with Named Routes 1

So if you guys are familiar with basics of flutter you must be aware of another way handle navigation that is willpopscope( ). But my personal experience with routes is more helping and easy. So I would recommend understanding both and then use accordingly. 

For routes, you don’t need any dependencies or any imports you can directly use it. Its SUPER EASY. Enough talks let begin.

Must Read: Navigation Drawer in Kotlin Android

Steps That I Would Recommend Before:

  • It is always recommended that you should be clear with the wireframe of your App. that means you should know what button or link will trigger which screen.
  • Maybe write it down somewhere: Number of screens and how they are connected. I will tell you shortly why am I saying this.
  • So in MaterialApp( ) widget you should, first of all, remember that if you are working with routes you cannot include Home( ). 
  •  Implementation: 
MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Lawyer-up',
      initialRoute: '/',
      routes: {
        '/': (context) => FirstScreen(),
        '/second': (context) => SecondScreen(),
      },
    );

FirstScreen( ) and SecondScreen( ) are the classes for the three different screens you will create.

  • Now we know ‘ / ’ will take us to the very initial page of the app which is defined in class FirstScreen( ). Let’s watch this with a screenshot I took.
Navigating Through Screens with Named Routes 2

So my FirstScreen( ) class was defined for the above screen.

  • Now, what will happen if I will tap on that SKIP button? 

It will go to the next route name defined that contains the class SecondScreen( ). 

We know that every button in flutter has this onPressed:  feature that will define the functionality of the button. We will put the code block which is defined below.


// Within the `FirstScreen` widget
onPressed: () {
  // Navigate to the second screen using a named route.
  Navigator.pushNamed(context, '/second');
}

This will Navigate us to the next screen with which is defined by the class SecondScreen( ).

Navigating Through Screens with Named Routes 3
  • But if we want to go back to the previous screen (in android: with the back button.) then there is two way either write the routes name of the desired screen in onPressed : 

// Within the SecondScreen widget


// Within the `FirstScreen` widget
onPressed: () {
  // Navigate to the second screen using a named route.
  Navigator.pushNamed(context, '/');
}

      OR

By pop( ) method which is preferred

// Within the SecondScreen widget


// Within the SecondScreen widget
onPressed: () {
  // Navigate back to the first screen by popping the current route
  // off the stack.
  Navigator.pop(context);
}

So that’s all about the basics of Navigation with named routes. For more check out.

Flutter Document on Named Routes

[tdb_single_source f_add_font_family=”” f_source_font_family=”521″ f_add_font_weight=”” f_source_font_weight=”400″ all_src_border=”0″ add_bg=”#1e73be” src_h_color=”#1e73be” src_h_bg=”rgba(0,0,0,0)”]
Avatar
Rishabh Sharma
You can find me on Github & LinkedIn

Latest news

One Plus 8T: All you need to know!

One Plus unveiled its 2020 flagship in a virtual event named One Plus 8T. In this post we would go through its...

Twitter may launch new features to simplify direct messages.

Twitter is said to be working on a couple of new features that could make it easier to manage direct messages...

Zoom Adds External Authentication Feature to make Virtual Classrooms more secure.

Zoom has introduced an external authentication feature to make virtual classrooms more secure. SSO will allow students to log in one...

Facebook, Twitter take action over Trump’s misleading COVID-19 posts.

Facebook and twitter took action on posts from US president Donald Trump on Tuesday for violating their rules against coronavirus misinformation...

Related news

One Plus 8T: All you need to know!

One Plus unveiled its 2020 flagship in a virtual event named One Plus 8T. In this post we would go through its...

Twitter may launch new features to simplify direct messages.

Twitter is said to be working on a couple of new features that could make it easier to manage direct messages...

Zoom Adds External Authentication Feature to make Virtual Classrooms more secure.

Zoom has introduced an external authentication feature to make virtual classrooms more secure. SSO will allow students to log in one...

Facebook, Twitter take action over Trump’s misleading COVID-19 posts.

Facebook and twitter took action on posts from US president Donald Trump on Tuesday for violating their rules against coronavirus misinformation...