Pro Flutter Navigation

Navigation from one page to other is vital part in mobile app development.
Flutter comes with very easy solutions for navigation using 🥰Navigator🥰 class.

In this post I am going to cover two types of navigation in flutter.

1) Simple navigation
2) Named navigation

Our scenario is to move to the second page on button pressed, we were taking two pages
1) Home page
2) Second page

also we are passing a string to second page.

Simple navigation

Simple navigation can be achieved by using Navigator push method

	void main() => runApp(MyApp());
	class MyApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	title: 'Navigation Demo',
	theme: ThemeData(primarySwatch: Colors.deepOrange),
	home:HomePage()
	);
	}
	}

view raw simple navigator - APP class hosted with ❤ by GitHub

the syntax for Navigator push is
'Navigator.push(context, MaterialPageRoute(builder: (context) => Widget()));'

Seems simple isnt it, See below for code snippet.

	class HomePage extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	appBar: AppBar(
	title: Text('I am home page :)'),
	),
	body: Center(
	child: RaisedButton(
	child: Text('Go to Second'),
	onPressed: () {
	Navigator.push(context,
	MaterialPageRoute(builder: (context) => SecondPage('from first page')));
	},
	),
	));
	}
	}
	class SecondPage extends StatelessWidget {
	final String data;
	SecondPage(this.data);
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	appBar: AppBar(
	title: Text('I am second page :)'),
	),
	body: Center(
	child: Text('I am second page ${this.data}'),
	),
	);
	}
	}

view raw Simple navigator -pages hosted with ❤ by GitHub

Named navigation

I would say this is the best way to handle navigation, you will find the answer soooon 😉

Named navigation is using routing concept, now you get it why it is the best way ahhh 😇

All the navigation routes are isolated/dedicated in one place, so we don't need to worry about instantiating class in our dart code.

lets jump into the code.

Flutter Material app comes with function callback for generating the App routes

onGenerateRoute

We can define our routes in a function and set it to onGenerateRoute, so that flutter knows where to go on navigation.

	class RouteCatalog {
	static Route<dynamic> generateRoute(RouteSettings settings) {
	final arguments = settings.arguments;
	switch (settings.name) {
	case '/':
	return MaterialPageRoute(builder: (_) => HomePage());
	case '/second':
	return MaterialPageRoute(builder: (_) => SecondPage(data: arguments));
	default:
	return MaterialPageRoute(builder: (_) => OOPSPage());
	}
	}
	}

view raw Named navigator - route catalog hosted with ❤ by GitHub

Syntax for named routing using navigator:
Navigator.of(context).pushNamed('/route', arguments: args);

even simple isn't it??

See below code snippet

	//App class
	class MyApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	title: 'Navigation Demo',
	theme: ThemeData(primarySwatch: Colors.deepOrange),
	initialRoute: '/',
	onGenerateRoute: RouteCatalog.generateRoute,
	);
	}
	}
	// Home page
	class HomePage extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	appBar: AppBar(
	title: Text('Home'),
	),
	body: Center(
	child: Column(
	mainAxisAlignment: MainAxisAlignment.center,
	children: <Widget>[
	Text('HomePage', style: TextStyle(fontSize: 20),),
	RaisedButton(
	child: Text('GO TO NextPage'),
	onPressed: () {
	Navigator.of(context)
	.pushNamed('/second', arguments: 'from home');
	},
	)
	],
	),
	),
	);
	}
	}
	// Second page
	class SecondPage extends StatelessWidget {
	final String data;
	SecondPage({@required this.data});
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	appBar: AppBar(
	title: Text('Second Page'),
	),
	body: Container(
	child: Center(
	child: Column(
	mainAxisAlignment: MainAxisAlignment.center,
	children: <Widget>[Text('Second Page', style: TextStyle(fontSize: 30),), Text(this.data)],
	),
	),
	),
	);
	}
	}

view raw Named navigator - pages hosted with ❤ by GitHub

for full sample please find in the Github repo link

Happy fluterring 😇😇!!

Comments

[Boy Sandy G. A.]

Hi @prakashselvaraj, care to give an example for named route when we want to send multiple arguments? I haven't found a good way to receive it on the destination screen.

For example, this is the destination screen constructor:

  ResultPage({
    @required this.bmiResult,
    @required this.resultText,
    @required this.interpretation,
  }

And this is the arguments:

..., arguments: <String, String>{'bmiResult': 1, 'resultText': 'x', 'interpretation': 'y'});

[Prakash S]

Navigator pushNamed accepts only one argument which is an Object type, So you can pass the desired argument as class/list or whatever object type which match your requirement.

also in your case

<String, String>{'bmiResult': '1', 'resultText': 'x', 'interpretation': 'y'}

you can use Map on the navigating page

Hope this answers you !!

Happy fluterring 😇😇!!