0% found this document useful (0 votes)
23 views16 pages

Flutter Assignment 04

Uploaded by

mokshahuja00
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
23 views16 pages

Flutter Assignment 04

Uploaded by

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

Ques-1: Create a Flutter app with two screens, HomeScreen and DetailsScreen.

Implement basic routing using MaterialPageRoute to navigate from HomeScreen to


DetailsScreen and back.

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

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

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomeScreen(),
);
}
}

class HomeScreen extends StatelessWidget {


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

class DetailsScreen extends StatelessWidget {


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

OUTPUT:
QUES-2: Modify the previous app to use named routes instead of
MaterialPageRoute. Define named routes for HomeScreen and
DetailsScreen in the MaterialApp widget and navigate between
them using Navigator.pushNamed()

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

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

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
initialRoute: '/',
routes: {
'/': (context) => HomeScreen(),
'/details': (context) => DetailsScreen(),
},
);
}
}

class HomeScreen extends StatelessWidget {


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

class DetailsScreen extends StatelessWidget {


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

OUTPUT:
QUES-3: Pass data from HomeScreen to DetailsScreen. Add a
button on HomeScreen that navigates to DetailsScreen and
displays a specific message passed as a parameter.
Display the message on DetailsScreen.

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

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

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Passing Data Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
initialRoute: '/',
routes: {
'/': (context) => HomeScreen(),
'/details': (context) => DetailsScreen(),
},
);
}
}

class HomeScreen extends StatelessWidget {


@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Screen'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
// Navigating to DetailsScreen with a specific message
Navigator.pushNamed(context, '/details', arguments: 'Hello
from HomeScreen!');
},
child: Text('Go to Details'),
),
),
);
}
}

class DetailsScreen extends StatelessWidget {


@override
Widget build(BuildContext context) {
// Extracting the message passed from HomeScreen
final String message = ModalRoute.of(context)!.settings.arguments as
String;

return Scaffold(
appBar: AppBar(
title: Text('Details Screen'),
),
body: Center(
child: Text(message),
),
);
}
}
OUPUT:
QUES-4:Create a Flutter app with nested routing. Design a main
screen containing a bottom navigation bar with multiple tabs.
Implement routing for each tab to display different
content using nested Navigator widgets.

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

void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Nested Routing Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MainScreen(),
);
}
}

class MainScreen extends StatelessWidget {


@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Nested Routing Demo'),
),
body: Container(),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
currentIndex: 0,
selectedItemColor: Colors.blue,
onTap: (index) {
_onItemTapped(context, index);
},
),
);
}

void _onItemTapped(BuildContext context, int index) {


Navigator.of(context).push(MaterialPageRoute<void>(
builder: (BuildContext context) {
switch (index) {
case 0:
return HomeScreen();
case 1:
return SearchScreen();
case 2:
return ProfileScreen();
default:
return HomeScreen();
}
},
));
}
}

class HomeScreen extends StatelessWidget {


@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute<void>(
builder: (BuildContext context) {
return DetailScreen('Home Detail');
},
));
},
child: Text('Go to Home Detail'),
),
),
);
}
}

class SearchScreen extends StatelessWidget {


@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Search'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute<void>(
builder: (BuildContext context) {
return DetailScreen('Search Detail');
},
));
},
child: Text('Go to Search Detail'),
),
),
);
}
}

class ProfileScreen extends StatelessWidget {


@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Profile'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute<void>(
builder: (BuildContext context) {
return DetailScreen('Profile Detail');
},
));
},
child: Text('Go to Profile Detail'),
),
),
);
}
}

class DetailScreen extends StatelessWidget {


final String detail;

DetailScreen(this.detail);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Detail'),
),
body: Center(
child: Text(detail),
),
);
}
}

OUTPUT:

You might also like