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: