Experiment-4:
a)Aim: To set up navigation between different screens using Navigator.
Description:
Flutter provides the Navigator widget to manage a stack of routes (screens). Using
Navigator.push() and Navigator.pop(), we can move from one screen to another and back,
simulating typical page navigation in apps. This experiment demonstrates basic screen
navigation using Navigator.
Program:
import 'package:flutter/material.dart';
void main() {
runApp(NavigationApp());
}
class NavigationApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Navigator Demo',
home: FirstScreen(),
);
}
}
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('First Screen')),
body: Center(
child: ElevatedButton(
child: Text('Go to Second Screen'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) =>SecondScreen()),
);
},
),
),
);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Second Screen')),
body: Center(
child: ElevatedButton(
child: Text('Back to First Screen'),
onPressed: () {
Navigator.pop(context);
},
),
),
);
}
}
Output:
1. First Screen:
Displays a button: ―Go to Second Screen‖.
On click, navigates to the next screen.
2. Second Screen:
Displays a button: ―Back to First Screen‖.
On click, returns to the previous screen.
First screen:
Second screen:
b)Aim: To implement navigation with named routes.
Description:
Named routes in Flutter help organize screen navigation more efficiently, especially in larger
apps. Routes are given string identifiers and registered in the MaterialApp's routes table.
Navigation is performed using Navigator.pushNamed() and Navigator.pop(). This improves
readability and simplifies route management.
Program:
import 'package:flutter/material.dart';
void main() {
runApp(NamedRoutesApp());
}
class NamedRoutesApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Named Routes Demo',
initialRoute: '/',
routes: {
'/': (context) =>HomeScreen(),
'/second': (context) =>SecondScreen(),
},
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Home Screen')),
body: Center(
child: ElevatedButton(
child: Text('Go to Second Screen'),
onPressed: () {
Navigator.pushNamed(context, '/second');
},
),
),
);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Second Screen')),
body: Center(
child: ElevatedButton(
child: Text('Go Back'),
onPressed: () {
Navigator.pop(context);
},
),
),
);
}
}
Output:
Home Screen (/):
o Shows a button labeled"Go to Second Screen".
o On click, navigates to the screen mapped to route /second.
Second Screen (/second):
o Shows a button labeled"Go Back".
o On click, returns to the home screen using Navigator.pop().
Home screen:
Second screen:
