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('[email protected]'),

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