Scribd
Upload
5 views

FLUTTER WEEK 5

Uploaded by

kaartheeka18
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

FLUTTER WEEK 5

Uploaded by

kaartheeka18
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

4 a) Set up navigation between different screens using Navigator.

Navigation is a core concept in mobile app development that allows


users to move between different screens (or routes) and interact with
various features.

Understanding Navigation in Flutter


In Flutter, navigation is managed by
the Navigator widget. This widget works like a stack of
screens (or routes), where each new screen is pushed onto
the stack when it’s opened, and when the user navigates
back, the top screen is popped off.

The Navigator widget uses two primary methods:

 push: Adds a new screen to the top of the navigation


stack.

 pop: Removes the top screen from the navigation stack,


returning to the previous screen.
These actions allow you to move seamlessly between
different screens while managing the app’s state. For
example, if you have a home screen and a detail screen,
the home screen will stay underneath the detail screen,
and when you press “back,” you return to the home screen.

1. Create two routes.


2. Navigate to the second route using Navigator.push().
3. Return to the first route using Navigator.pop().

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Navigator Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomeScreen(), // HomeScreen will be the
starting screen
);
}
}

class HomeScreen extends StatelessWidget {


@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Screen'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
// Navigating to Second Screen
Navigator.push(
context,
MaterialPageRoute(builder: (context) =>
SecondScreen()),
);
},
child: Text('Go to Second Screen'),
),
),
);
}
}

class SecondScreen extends StatelessWidget {


@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Screen'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
// Navigating back to Home Screen
Navigator.pop(context);
},
child: Text('Go Back'),
),
),
);
}
}

OUTPUT:
4 b. Implement navigation with named routes.

In the Navigate to a new screen and back recipe, we


learned how to navigate to a new screen by creating a new
route and pushing it to the Navigator.

However, if you need to navigate to the same screen in


many parts of your app, this approach can result in code
duplication. The solution is to define a named route, and
use the named route for navigation.

To work with named routes ,


usethe Navigator.pushNamed() function. This example
replicates the functionality from the original recipe,
demonstrating how to use named routes using the
following steps:

Create two screens.

Define the routes.

Navigate to the second screen


using Navigator.pushNamed().

Return to the first screen using Navigator.pop().

import 'package:flutter/material.dart';

void main() {
runApp(
MaterialApp(
title: 'Named Routes Demo',
// Start the app with the "/" named route. In
this case, the app starts
// on the FirstScreen widget.
initialRoute: '/',
routes: {
// When navigating to the "/" route, build
the FirstScreen widget.
'/': (context) => const FirstScreen(),
// When navigating to the "/second" route,
build the SecondScreen widget.
'/second': (context) => const
SecondScreen(),
},
),
);
}

class FirstScreen extends StatelessWidget {


const FirstScreen({super.key});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('First Screen'),
),
body: Center(
child: ElevatedButton(
// Within the `FirstScreen` widget
onPressed: () {
// Navigate to the second screen using
a named route.
Navigator.pushNamed(context,
'/second');
},
child: const Text('Launch screen'),
),
),
);
}
}

class SecondScreen extends StatelessWidget {


const SecondScreen({super.key});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Second Screen'),
),
body: Center(
child: ElevatedButton(
// Within the SecondScreen widget
onPressed: () {
// Navigate back to the first screen by
popping the current route
// off the stack.
Navigator.pop(context);
},
child: const Text('Go back!'),
),
),
);
}
}
OUTPUT:

You might also like