Scribd
Upload
6 views

Week 4@flutter

flutter notes

Uploaded by

kaumudi keerthana
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Week 4@flutter

flutter notes

Uploaded by

kaumudi keerthana
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

DEPARTMENT OF INFORMATION TECHNOLOGY

EXPERIMENT-4
AIM:
a) Set up navigation between different screens using Navigator.
DESCRIPTION:
Navigation and Routing:

● Navigation and routing are some of the core concepts of all mobile applications, which
allows the user to move between different pages.
● For example, an app can have a screen that contains various products. When the user taps
on that product, immediately it will display detailed information about that product.
● In any mobile app, navigating to different pages defines the workflow of the application,
and the way to handle the navigation is known as routing.
● Flutter provides a basic routing class MaterialPageRoute and two methods
Navigator.push() and Navigator.pop() that shows how to navigate between two routes.
The following steps are required to start navigation in your application.

Step 1: First, you need to create two routes.

Step 2: Then, navigate to one route from another route by using the Navigator.push() method.

Step 3: Finally, navigate to the first route by using the Navigator.pop() method.

CODE

import 'package:flutter/material.dart';

void main() {
runApp(const MaterialApp(
home: HomeRoute(),
));
}

class HomeRoute extends StatelessWidget {


const HomeRoute({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('VBIT'),
backgroundColor: Colors.green,
),
body: Center(
child: ElevatedButton(
child: const Text('Click Me!'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const SecondRoute()),
);
}),
),
);
}
}

class SecondRoute extends StatelessWidget {


const SecondRoute({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Dept of IT"),
backgroundColor: Colors.green,
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text('Home!'),
),
),
);
}
}
OUTPUT:

Leave space for to draw the output


AIM:
b. Implement navigation with named routes.

DESCRIPTION:
Navigation with Named Routes

We have learned how to navigate to a new screen by creating a new route and managing it by
using the Navigator. The Navigator maintains the stack-based history of routes. If there is a need
to navigate to the same screen in many parts of the app, this approach is not beneficial because it
results in code duplication. The solution to this problem can be removed by defining the named
routes and can use the named routes for navigation.

CODE:
import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp(
title: 'Named Routes',
initialRoute: '/',
routes: {
'/': (context) => const firstRoute(),
'/second': (context) => const secondRoute(),
},
));
}

// ignore: camel_case_types
class firstRoute extends StatelessWidget {
const firstRoute({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('GFG First Route'),
backgroundColor: Colors.blue,
),
body: Center(
child: ElevatedButton(
child: const Text('Launch screen'),
onPressed: () {
Navigator.pushNamed(context, '/second');
},
), // Elevated
// RaisedButton is deprecated now
// child: RaisedButton(
// child: const Text('Launch screen'),
// onPressed: () {
// Navigator.pushNamed(context, '/second');
// },
// ),
),
);
}
}

// ignore: camel_case_types
class secondRoute extends StatelessWidget {
const secondRoute({Key? key}) : super(key: key);

@override
// ignore: dead_code
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("GFG Second Route"),
backgroundColor: Colors.orange,
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text('Go back!'),
), // ElevatedButton
),

// RaisedButton is deprecated now


// child: RaisedButton(
// onPressed: () {
// Navigator.pop(context);
// },
// child: const Text('Go back!'),
// ),
);
}
}
OUTPUT:

Leave space for to draw the output

You might also like