0% found this document useful (0 votes)
7 views

Flutter Assignment 04

Uploaded by

mokshahuja00
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
7 views

Flutter Assignment 04

Uploaded by

mokshahuja00
Copyright
© © All Rights Reserved
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