Mobile Application Development Lab
Lab Programs
1. Create a stateless widget and use initialRoute to launch one screen as the
starting screen.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
initialRoute: '/',
routes: {
'/': (context) => HomeScreen(),
'/second': (context) => SecondScreen(),
},
);
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Home Screen')),
body: Center(
child: RaisedButton(
Mobile Application Development Lab
onPressed: () {
Navigator.pushNamed(context, '/second');
},
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: RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Back to Home Screen'),
),
),
);
}
Mobile Application Development Lab
Mobile Application Development Lab
2. Create a stateless widget program to load an image from the assets folder and
display it on the screen.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: ImageScreen(),
);
class ImageScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Display Image from Assets'),
),
body: Center(
child: Image.asset(
'lib/Assests/image.png', // Path to your image
Mobile Application Development Lab
width: 300, // Customize width
height: 300, // Customize height
fit: BoxFit.cover, // Adjust how the image fits
),
),
);
}
Mobile Application Development Lab
Mobile Application Development Lab
3. Create a stateless widget form with fields for Name, Email, Phone, and Message,
and a "Submit" button. Print "Form Submitted" on submit.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: ContactForm(),
);
class ContactForm extends StatelessWidget {
final TextEditingController nameController = TextEditingController();
final TextEditingController emailController = TextEditingController();
final TextEditingController phoneController = TextEditingController();
final TextEditingController messageController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
Mobile Application Development Lab
title: Text('Contact Form'),
),
resizeToAvoidBottomInset: true, // Prevents bottom overflow
body: SingleChildScrollView(
// Makes the content scrollable
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextField(
controller: nameController,
decoration: InputDecoration(
labelText: 'Name',
border: OutlineInputBorder(),
),
),
SizedBox(height: 10),
TextField(
controller: emailController,
decoration: InputDecoration(
labelText: 'Email',
border: OutlineInputBorder(),
),
keyboardType: TextInputType.emailAddress,
),
SizedBox(height: 10),
TextField(
controller: phoneController,
Mobile Application Development Lab
decoration: InputDecoration(
labelText: 'Phone',
border: OutlineInputBorder(),
),
keyboardType: TextInputType.phone,
),
SizedBox(height: 10),
TextField(
controller: messageController,
decoration: InputDecoration(
labelText: 'Message',
border: OutlineInputBorder(),
),
maxLines: 3,
),
SizedBox(height: 20),
Center(
child: RaisedButton(
onPressed: () {
print("Form Submitted");
},
child: Text('Submit'),
color: Colors.blue,
textColor: Colors.white,
),
),
],
), ), ); } }
Mobile Application Development Lab
Mobile Application Development Lab
4. Create a stateless widget form with Name, Email, Phone, and Message fields.
Validate inputs of all fields and print "Form Submitted" on submit.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: ContactForm(),
);
class ContactForm extends StatelessWidget {
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
final TextEditingController nameController = TextEditingController();
final TextEditingController emailController = TextEditingController();
final TextEditingController phoneController = TextEditingController();
final TextEditingController messageController = TextEditingController();
// Manual validation for phone
String _validatePhone(String value) {
if (value.isEmpty) {
Mobile Application Development Lab
return 'Phone number is required';
final regex = RegExp(r'^[0-9]{10}$');
if (!regex.hasMatch(value)) {
return 'Enter a valid 10-digit phone number';
return null;
// Manual validation for email
String _validateEmail(String value) {
if (value.isEmpty) {
return 'Email is required';
final regex = RegExp(r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$');
if (!regex.hasMatch(value)) {
return 'Enter a valid email address';
return null;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Contact Form'),
),
resizeToAvoidBottomInset: true, // Prevents overflow when keyboard appears
Mobile Application Development Lab
body: SingleChildScrollView(
padding: const EdgeInsets.all(16.0),
child: Form(
key: _formKey, // Form key for validation
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Name Field with validation
TextFormField(
controller: nameController,
decoration: InputDecoration(
labelText: 'Name',
border: OutlineInputBorder(),
),
validator: (value) {
if (value.isEmpty) {
return 'Name is required';
return null;
},
),
SizedBox(height: 10),
// Email Field with validation
TextFormField(
controller: emailController,
decoration: InputDecoration(
labelText: 'Email',
Mobile Application Development Lab
border: OutlineInputBorder(),
),
keyboardType: TextInputType.emailAddress,
validator: _validateEmail,
),
SizedBox(height: 10),
// Phone Field with validation
TextFormField(
controller: phoneController,
decoration: InputDecoration(
labelText: 'Phone',
border: OutlineInputBorder(),
),
keyboardType: TextInputType.phone,
validator: _validatePhone,
),
SizedBox(height: 10),
// Message Field
TextFormField(
controller: messageController,
decoration: InputDecoration(
labelText: 'Message',
border: OutlineInputBorder(),
),
maxLines: 3,
),
Mobile Application Development Lab
SizedBox(height: 20),
// Submit Button (FlatButton for compatibility)
Center(
child: MaterialButton(
onPressed: () {
if (_formKey.currentState.validate()) {
// If the form is valid, print "Form Submitted"
print("Form Submitted");
} else {
print("Form has errors");
},
child: Text('Submit'),
color: Colors.blue,
textColor: Colors.white,
padding: EdgeInsets.symmetric(vertical: 15, horizontal: 30),
),
),
],
),
),
),
);
}
Mobile Application Development Lab
Mobile Application Development Lab
5. Create a stateless widget program to add the Google Fonts package from
pub.dev to the project and display a text widget using a Google fonts.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: FontDisplayScreen(),
);
class FontDisplayScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Lato Font Example'),
),
body: Center(
child: Text(
Mobile Application Development Lab
'Lato-Regular',
style: TextStyle(fontFamily: 'Lato', fontSize: 24),
),
),
);
}
Mobile Application Development Lab
6. Create a program layout where a Column contains multiple Rows, each
displaying aligned widgets.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Column with Rows'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Row 1, Item 1'),
Text('Row 1, Item 2'),
Text('Row 1, Item 3'),
Mobile Application Development Lab
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Row 2, Item 1'),
Text('Row 2, Item 2'),
Text('Row 2, Item 3'),
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Row 3, Item 1'),
Text('Row 3, Item 2'),
Text('Row 3, Item 3'),
],
),
],
),
),
),
);
}
Mobile Application Development Lab
Mobile Application Development Lab
7. Design a login screen with fields for "Username" and "Password" and a "Submit"
button.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: LoginScreen(),
);
class LoginScreen extends StatelessWidget {
final TextEditingController usernameController = TextEditingController();
final TextEditingController passwordController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Login Screen'),
),
Mobile Application Development Lab
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Username Field
TextField(
controller: usernameController,
decoration: InputDecoration(
labelText: 'Username',
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.person),
),
),
SizedBox(height: 16), // Spacing
// Password Field
TextField(
controller: passwordController,
decoration: InputDecoration(
labelText: 'Password',
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.lock),
),
obscureText: true, // Hide input for passwords
),
SizedBox(height: 24), // Spacing
Mobile Application Development Lab
// Submit Button
RaisedButton(
onPressed: () {
String username = usernameController.text;
String password = passwordController.text;
// Perform login logic here
print('Username: $username');
print('Password: $password');
},
color: Colors.blue,
textColor: Colors.white,
child: Text('Submit'),
),
],
),
),
);
}
Mobile Application Development Lab
Mobile Application Development Lab
8. Create an app with two screens and navigate between them using the Navigator.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Two Screen App',
home: FirstScreen(), // Set the initial screen
);
// First Screen
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Screen'),
),
body: Center(
child: RaisedButton(
Mobile Application Development Lab
onPressed: () {
// Navigate to Second Screen
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
},
color: Colors.blue,
textColor: Colors.white,
child: Text('Go to Second Screen'),
),
),
);
// Second Screen
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Screen'),
),
body: Center(
child: RaisedButton(
onPressed: () {
// Navigate back to First Screen
Mobile Application Development Lab
Navigator.pop(context);
},
color: Colors.green,
textColor: Colors.white,
child: Text('Back to First Screen'),
),
),
);
}
Mobile Application Development Lab
9. Create an app with a BottomNavigationBar to switch between three different
screens.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: BottomNavScreen(),
);
class BottomNavScreen extends StatefulWidget {
@override
_BottomNavScreenState createState() => _BottomNavScreenState();
class _BottomNavScreenState extends State<BottomNavScreen> {
int _selectedIndex = 0;
final List<Widget> _screens = [
Screen1(),
Screen2(),
Screen3(),
Mobile Application Development Lab
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Bottom Navigation Example'),
),
body: _screens[_selectedIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex,
onTap: _onItemTapped,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Screen 1'),
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
title: Text('Screen 2'),
),
BottomNavigationBarItem(
Mobile Application Development Lab
icon: Icon(Icons.settings),
title: Text('Screen 3'),
),
],
),
);
class Screen1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(child: Text('Screen 1', style: TextStyle(fontSize: 24)));
class Screen2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(child: Text('Screen 2', style: TextStyle(fontSize: 24)));
class Screen3 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(child: Text('Screen 3', style: TextStyle(fontSize: 24))); } }
Mobile Application Development Lab
Mobile Application Development Lab
10. Create a program to implement a navigation drawer with a ListView to display
menu options.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: NavigationDrawerScreen(),
);
class NavigationDrawerScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Navigation Drawer Example'),
),
// Drawer widget with ListView to display menu options
drawer: Drawer(
child: ListView(
Mobile Application Development Lab
padding: EdgeInsets.zero, // To remove any padding from the ListView
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text('Evelyn Jessica'),
accountEmail: Text('evelyn@example.com'),
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.orange,
child: Text('EJ', style: TextStyle(fontSize: 24)),
),
),
ListTile(
leading: Icon(Icons.home),
title: Text('Home'),
onTap: () {
// Handle the tap
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HomeScreen()),
);
},
),
ListTile(
leading: Icon(Icons.search),
title: Text('Search'),
onTap: () {
// Handle the tap
Navigator.push(
context,
Mobile Application Development Lab
MaterialPageRoute(builder: (context) => SearchScreen()),
);
},
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
onTap: () {
// Handle the tap
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SettingsScreen()),
);
},
),
],
),
),
body: Center(child: Text('Select an option from the drawer')),
);
// Sample Screens for navigation
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
Mobile Application Development Lab
appBar: AppBar(title: Text('Home')),
body: Center(child: Text('Welcome to Home Screen')),
);
class SearchScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Search')),
body: Center(child: Text('Welcome to Search Screen')),
);
class SettingsScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Settings')),
body: Center(child: Text('Welcome to Settings Screen')),
);
}
Mobile Application Development Lab
Mobile Application Development Lab
