Navigation in Flutter with Example

This article helps you how to use navigator 2.0 to perform navigation between screens in flutter applications. You can also checkout flutter navigation related articles.

Navigator 2.0 has new argument pages. pages property is used to add routes in stack. When pages property is changed, navigator updates stack of routes. In this flutter example, we are creating two screens : List Screen and Details Screen. In list screen, we are displaying soccer player name and basic info.

 

Create Model Class

First we are creating model class so we can easily manage soccer player data between list and details screens.

class SoccerPlayer {
final String name;
final String clubName;
final String countryName;
final String position;

SoccerPlayer(this.name, this.clubName, this.countryName, this.position);
}

 
 

Create Pages Handler Class for Navigation in Flutter

In this class, we are adding screens to pages property under navigator widget.

import ‘package:flutter/material.dart’;
import ‘soccer_player.dart’;
import ‘soccer_player_details_page.dart’;
import ‘soccer_players_list_screen.dart’;

class SoccerPlayersApp extends StatefulWidget {
@override
State<StatefulWidget> createState() => _SoccerPlayersAppState();
}

class _SoccerPlayersAppState extends State<SoccerPlayersApp> {
SoccerPlayer selectedSoccerPlayer;

List<SoccerPlayer> listSoccerPlayers = [
    SoccerPlayer(‘Cristiano Ronaldo’, ‘Juventus’, ‘Portugal’, ‘Forward’),
    SoccerPlayer(‘Lionel Messi’, ‘Barcelona’, ‘Argentina’, ‘Forward’),
    SoccerPlayer(‘Neymar’, ‘Paris Saint-Germain’, ‘Brazil’, ‘Forward’),
    SoccerPlayer(‘Sergio Ramos’, ‘Paris Saint-Germain’, ‘ Spain’, ‘Defender’),
    SoccerPlayer(‘Kevin De Bruyne’, ‘Manchester City’, ‘ Belgium’, ‘Midfielder’),
];

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Navigator(
pages: [
MaterialPage(
key: ValueKey(‘SoccerPlayersListPage’),
child: SoccerPlayersListScreen(
    listSoccerPlayers: listSoccerPlayers,
    onTapped: handleSoccerPlayerTapped,
),
),
if (selectedSoccerPlayer != null) SoccerPlayerDetailsPage(soccerPlayer: selectedSoccerPlayer)
],
onPopPage: (route, result) {
if (!route.didPop(result)) {
return false;
}
setState(() {
    selectedSoccerPlayer = null;
});

return true;
},
),
);
}

void handleSoccerPlayerTapped(SoccerPlayer soccerPlayer) {
setState(() {
    selectedSoccerPlayer = soccerPlayer;
});
}
}

 
 

Create List Screen for navigation in flutter

import ‘package:flutter/material.dart’;
import ‘soccer_player.dart’;

class SoccerPlayersListScreen extends StatelessWidget {
final List<SoccerPlayer> listSoccerPlayers;
final ValueChanged<SoccerPlayer> onTapped;

SoccerPlayersListScreen({
    @required this.listSoccerPlayers,
    @required this.onTapped,
});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
    title: Text(‘Flutter Navigator 2.0 Sample’),
),
body: ListView.separated(
separatorBuilder: (context, index) => Divider(
    color: Colors.black,
),
itemCount: listSoccerPlayers.length,
itemBuilder: (context, index) => GestureDetector(
child: Container(
padding: EdgeInsets.all(15),
child: Column(
children: [
Row(
children: [
Text(listSoccerPlayers[index].name, style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),),
],
),
SizedBox(height: 15,),
Row(
children: [
    Text(listSoccerPlayers[index].clubName, style: TextStyle(fontSize: 20),),
    SizedBox(width: 15,),
    Text(listSoccerPlayers[index].countryName, style: TextStyle(fontSize: 20),),
    SizedBox(width: 15,),
    Text(listSoccerPlayers[index].position, style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold,), textAlign: TextAlign.end,),
],
),
],
),
),
onTap: () => onTapped(listSoccerPlayers[index]),
)),
);
}
}

 
 

Create Details Page and Screen

import ‘package:flutter/material.dart’;
import ‘soccer_player.dart’;
import ‘soccer_player_details_screen.dart’;

class SoccerPlayerDetailsPage extends Page {
final SoccerPlayer soccerPlayer;

SoccerPlayerDetailsPage({
this.soccerPlayer,
}) : super(key: ValueKey(soccerPlayer));

Route createRoute(BuildContext context) {
return MaterialPageRoute(
settings: this,
builder: (BuildContext context) {
return SoccerPlayerDetailsScreen(soccerPlayer: soccerPlayer);
},
);
}
}

 
import ‘package:flutter/material.dart’;
import ‘soccer_player.dart’;

class SoccerPlayerDetailsScreen extends StatelessWidget {
final SoccerPlayer soccerPlayer;

SoccerPlayerDetailsScreen({
    @required this.soccerPlayer,
});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(child: Text(soccerPlayer.name, style: TextStyle(fontSize: 50, fontWeight: FontWeight.bold))),
);
}
}

 
 

navigation in flutter
 
 

2 thoughts on “Navigation in Flutter with Example

Leave a Reply