VIVEKANANDA INSTITUTE OF PROFESSIONAL STUDIES - TECHNICAL CAMPUS

Grade A++ Accredited Institution by NAAC

NBA Accredited for MCA Programme; Recognized under Section 2(f) by UGC;
Affiliated to GGSIP University, Delhi; Recognized by Bar Council of India and AICTE
An ISO 9001:2015 Certified Institution

SCHOOL OF ENGINEERING & TECHNOLOGY

BTECH Programme: AI&DS

Course Title: Mobile Application

Development Lab

Course Code: OAE312P

Submitted To: Dr. Alisha Sikri Ghai

Submitted By: Parth Arya
Enrollment no.: 0 7 7 1 7 7 1 1 9 2 2
 VIVEKANANDA INSTITUTE OF PROFESSIONAL STUDIES - TECHNICAL CAMPUS
Grade A++ Accredited Institution by NAAC
NBA Accredited for MCA Programme; Recognized under Section 2(f) by UGC;
Affiliated to GGSIP University, Delhi; Recognized by Bar Council of India and AICTE
An ISO 9001:2015 Certified Institution
SCHOOL OF ENGINEERING & TECHNOLOGY

VISION OF INSTITUTE

To be an educational institute that empowers the field of engineering to build a

sustainable future by providing quality education with innovative practices that
supports people, planet and profit.

MISSION OF INSTITUTE

To groom the future engineers by providing value-based education and

awakening students' curiosity, nurturing creativity and building
capabilities to enable them to make significant contributions to the world.
 VIVEKANANDA INSTITUTE OF PROFESSIONAL STUDIES - TECHNICAL CAMPUS
Grade A++ Accredited Institution by NAAC
NBA Accredited for MCA Programme; Recognized under Section 2(f) by UGC;
Affiliated to GGSIP University, Delhi; Recognized by Bar Council of India and AICTE
An ISO 9001:2015 Certified Institution
SCHOOL OF ENGINEERING & TECHNOLOGY

INDEX
S.No Experiment Name Date Marks Remark Updated Faculty
Laboratory Class Viva Marks Signature
Assessment Participation (5 Marks)
(15 Marks) (5 Marks)
 07717711922 PARTH ARYA

Experiment 1

Aim: Study the frameworks of Mobile Application Development and design tools like sketch,
adobe XD or flutter.

Objectives:

▪ Gain the understanding of the frameworks of Mobile Application Development.

▪ Explore the tools used for designing, building, compiling and testing mobile applications.

Theory:

Frameworks of Mobile Application Development

Mobile application development involves creating software applications that run on mobile
devices, such as smartphones and tablets. Developers use various frameworks to streamline and
simplify the development process by providing pre-built components, libraries, and tools.
Frameworks play a critical role in ensuring efficient development, high performance, and
seamless user experiences across different platforms.

Native Frameworks
Native frameworks are platform-specific and allow developers to create applications optimized for
a particular operating system. Examples include Swift and Objective-C for iOS development,
and Kotlin and Java for Android development. These frameworks provide complete access to
platform-specific features and APIs, ensuring high performance and better integration with the
device’s hardware and software. However, native development often requires maintaining
separate codebases for different platforms, increasing development time and effort.

Cross-Platform Frameworks
Cross-platform frameworks enable developers to write a single codebase that can be deployed
across multiple platforms, including iOS and Android. Popular cross-platform frameworks include
Flutter, React Native, and Xamarin. These frameworks reduce development time and cost by
eliminating the need for separate codebases. For example, Flutter, powered by Google, uses the
Dart programming language and offers a rich set of pre-designed widgets for building visually
appealing applications. React Native, backed by Facebook, allows developers to use JavaScript
and reuse components between platforms, enhancing efficiency.

Hybrid Frameworks
Hybrid frameworks, such as Ionic and Cordova, combine the advantages of web and native
technologies. Applications developed using hybrid frameworks are essentially web apps wrapped
in a native container. They rely on web technologies like HTML, CSS, and JavaScript but can
access device-specific features through plugins. While hybrid frameworks enable faster
development, they may face performance limitations compared to native applications.
 07717711922 PARTH ARYA

Design Tools for Mobile Application Development

Design tools are an integral part of mobile application development, enabling designers to
conceptualize, prototype, and refine user interfaces and experiences. Tools like Sketch, Adobe
XD, and Flutter’s UI toolkit have revolutionized the design process, making it more efficient and
collaborative.

Sketch
Sketch is a vector-based design tool specifically tailored for UI and UX design. It allows designers
to create wireframes, mockups, and high-fidelity prototypes. Sketch’s simplicity, combined with
its robust plugin ecosystem, makes it a favorite among designers. Features like reusable symbols,
shared libraries, and support for collaborative workflows enhance productivity. Additionally,
Sketch integrates seamlessly with third-party tools, making it easier to transition from design to
development.
 07717711922 PARTH ARYA

Adobe XD
Adobe XD is a powerful tool for designing and prototyping user experiences. It offers a wide range
of features, including vector editing, responsive design capabilities, and interactive prototyping.
Designers can create clickable prototypes to simulate user interactions and share them with
stakeholders for feedback. Adobe XD’s integration with other Adobe Creative Cloud apps, such
as Photoshop and Illustrator, allows for a cohesive design workflow. Its collaborative features
enable multiple team members to work on a project simultaneously, streamlining the design
process.

Learning Outcomes:
 07717711922 PARTH ARYA

Experiment 2

Aim: Design a simple user interface for a mobile application using a design tool or
framework like Sketch, Adobe XD, or Flutter.
Objectives:

▪ Gain the understanding about User Interface and its significance.

▪ Gain knowledge of how to implement simple UI using any one framework.

Theory:

User Interface (UI) design is a crucial aspect of mobile application development, focusing on
creating visually appealing and user-friendly interfaces. A well-structured UI enhances user
experience (UX) by ensuring intuitive navigation, responsiveness, and accessibility.

Importance of UI in Mobile Applications

A good UI design improves usability, making the application easy to interact with. It enhances
user engagement, reduces learning curves, and contributes to the overall success of an application.
Key factors such as color schemes, typography, and element placement play a significant role in
shaping user perception.

Principles of Effective UI Design

Modern UI design follows several essential principles:

● Consistency: Maintaining uniform design elements across the application.

● Simplicity: Avoiding clutter and keeping interactions straightforward.
● Responsiveness: Ensuring compatibility across different screen sizes and devices.
● Accessibility: Designing for users with diverse needs, including those with disabilities.

Steps to Design a simple UI using FlutLab:

Step 1: Go to flutlab.io
 07717711922 PARTH ARYA

Step 2: Sign-In using your credentials or Create a new account.

Step 3: Click on Create Project

Step 4: Select ‘Hello World’

 07717711922 PARTH ARYA

Step 5: Give a project Name

Step 6: Click on Build Project to Run the Provided Code

Step 7: Wait for the build to get complete.

 07717711922 PARTH ARYA

Step 8: Output Screen is Shown.

Learning Outcomes:
 07717711922 PARTH ARYA

Experiment 3

Aim: Hello World Application: Create a basic "Hello World" application for a mobile
platform of your choice (Android or iOS) using the respective development environment.

Objectives:

▪ To Understand the basic development of Mobile Applications.

▪ To gain knowledge and practice of printing basic texts on a screen of mobile app.

Theory:

Introduction to Mobile Application Development

Mobile application development is the process of creating software applications that run on mobile
devices such as smartphones and tablets. These applications can be developed for different
platforms, primarily Android and iOS, using platform-specific or cross-platform development
environments. A "Hello World" application is a fundamental starting point in mobile app
development, serving as an introductory exercise to understand the development workflow, tools,
and programming languages involved.

Fundamental Concepts in a Mobile Application

A basic "Hello World" application introduces key concepts in mobile development:

● User Interface (UI): The app's visual representation, usually defined using XML (Android),
SwiftUI (iOS), or Flutter widgets.
● Activity/ViewController: The main screen or component that controls UI interaction.
● Rendering & Lifecycle: Understanding how the app initializes and displays content on the screen.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Hello World',

theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'FlutLab'),
);
 07717711922 PARTH ARYA

}
}

class MyHomePage extends StatelessWidget {

final String title;
const MyHomePage({super.key, required this.title});

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

Output:

Learning Outcomes:
 07717711922 PARTH ARYA

Experiment 4

Aim: Design a simple mobile user interface to add image on a mobile platform.

Objectives:

▪ To understand the basic development of Mobile Applications.

▪ To gain knowledge and practice of displaying Images on a screen of mobile app.

Theory:

Introduction

Flutter is an open-source UI software development framework by Google used for building

natively compiled applications for mobile, web, and desktop from a single codebase. One of the
fundamental tasks in Flutter application development is displaying images, which can be achieved
using widgets like Image.asset() and Image.network().

Objective

The objective of this experiment is to understand the process of displaying an image in a Flutter
application using both local assets and network sources. This experiment aims to familiarize
developers with Flutter’s image handling mechanisms, asset management, and UI design
considerations.

Concept and Implementation

Flutter provides the Image widget as a simple way to render images on the screen. There are two
primary ways to load images:

1. Loading from Assets: Images stored in the project's asset directory are displayed using
the Image.asset() constructor. The asset must be declared in the pubspec.yaml file
before use.
2. Loading from a Network: External images can be fetched from the internet using
Image.network() by providing a valid URL.

Code:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

 07717711922 PARTH ARYA

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Column(
children: [
Image.asset('assets/image.jpg', height: 500, width: 500),
SizedBox(height: 40, width: 100),
Text(
'Image 1',
style: TextStyle(fontSize: 40),
),
],
),
),
),
);
}
}
Output:

Learning Outcomes:
 07717711922 PARTH ARYA

Experiment 5

Aim: Develop a mobile application that interacts with a button.

Objectives:

▪ To understand the basic development of Mobile Applications.

▪ To gain knowledge and practice of displaying buttons on a screen of mobile app for interaction.

Theory:

Buttons are essential UI components in mobile applications that enable user interaction. In Flutter,
buttons are widely used for triggering events, submitting forms, or navigating between screens.
Buttons enhance the user experience by providing intuitive access to different functionalities.
Flutter provides multiple types of buttons such as ElevatedButton, TextButton,
OutlinedButton, and IconButton, each serving different UI requirements. Additionally, these
buttons can be customized with different styles, colors, and animations to enhance usability and
aesthetic appeal.

Types of Buttons in Flutter

1. ElevatedButton: A button with a shadow effect, useful for emphasizing primary actions
and adding depth to the UI.
2. TextButton: A simple button with no elevation, typically used for secondary actions or
inline links.
3. OutlinedButton: A button with an outlined border, offering a balance between prominence
and subtlety, often used when a softer emphasis is needed.
4. IconButton: A button displaying an icon instead of text, often used for toolbars,
navigation, or quick actions.

Code

import 'package:flutter/material.dart';

void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: ButtonTextScreen(),
 07717711922 PARTH ARYA

);
}
}
class ButtonTextScreen extends StatefulWidget {
const ButtonTextScreen({super.key});

@override
_ButtonTextScreenState createState() => _ButtonTextScreenState();
}

class _ButtonTextScreenState extends State<ButtonTextScreen> {

String displayedText = "Press a button";

void updateText(String text) {

setState(() {
displayedText = text;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Button Press Example')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
displayedText,
style: const TextStyle(fontSize: 20),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () => updateText("Elevated Button Pressed!"),
child: const Text('Elevated Button'),
),
const SizedBox(height: 20),
TextButton(
onPressed: () => updateText("Text Button Pressed!"),
child: const Text('Text Button'),
),
],
),
),
);
 07717711922 PARTH ARYA

}
}

Output:

Learning Outcomes:
 07717711922 PARTH ARYA

Experiment 6

Aim: Develop a mobile application of portfolio.

Objectives:

• To implement various Flutter widgets for structured content presentation.

• To create a responsive and visually appealing digital resume accessible across multiple
devices.

Theory:

This mobile application, built with Flutter, serves as a dynamic digital portfolio to present
professional information in a polished and interactive format. Designed for cross-platform
compatibility, it allows users to showcase their skills, education, and projects with ease.

Technology Stack
Developed using Flutter—Google’s open-source UI toolkit—and written in Dart, the app delivers
a consistent experience across both Android and iOS devices.

Key Features
1. Profile Overview: Displays profile photo, name, and a concise personal summary.
2. Education Timeline: Lists academic qualifications with institutional details.
3. Skills Showcase: Highlights technical competencies and soft skills.
4. Project Gallery: Offers insights into completed and ongoing projects.
5. Modern UI: Uses Material Design for a clean, interactive interface.
6. Responsive Layout: Adapts smoothly to various screen sizes.
7. Expandable Structure: Easily extendable to include work experience, certifications, and
contact info.

UI/UX Design Approach

The design prioritizes clarity, ease of use, and aesthetic consistency. It applies modern principles
like minimalism, intuitive navigation, and legible typography to ensure an effortless user journe

Code:

Home:
import 'package:flutter/material.dart';
 07717711922 PARTH ARYA

class HomeScreen extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Color(0xff262d6d), Colors.teal.shade800],
),
),
child: SafeArea(
child: Column(
children: [
Padding(
padding: EdgeInsets.all(24.0),
child: Text(
"Parth Arya",
style: TextStyle(
fontSize: 32.0,
fontWeight: FontWeight.bold,
color: Colors.white,
letterSpacing: 1.5,
),
),
),
Expanded(
child: Container(
margin: EdgeInsets.all(24),
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 24),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.9),
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 10,
offset: Offset(0, 5),
),
],
),
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(
radius: 60,
backgroundColor: Colors.teal.shade100,
child: Icon(
 07717711922 PARTH ARYA

Icons.person,
size: 70,
color: Color(0xff000b69),
),
),
SizedBox(height: 24.0),
Text(
'Welcome to My Portfolio!',
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold,
color: Colors.teal.shade800,
),
textAlign: TextAlign.center,
),
SizedBox(height: 16.0),
Text(
'Software Developer | Machine Learning Engineer | AI Engineer',
style: TextStyle(
fontSize: 14.0,
color: Colors.grey.shade700,
),
textAlign: TextAlign.center,
),
SizedBox(height: 32.0),
_buildButton(
context,
'View Portfolio',
Icons.work,
() {
Navigator.pushNamed(context, '/portfolio_screen');
},
),
SizedBox(height: 16.0),
_buildButton(
context,
'Contact Me',
Icons.mail,
() {
Navigator.pushNamed(context, '/contact_screen');
},
),
],
),
),
),
),
Padding(
padding: EdgeInsets.all(16.0),
child: Text(
"© 2025 Parth",
 07717711922 PARTH ARYA

style: TextStyle(
color: Colors.white,
fontSize: 14.0,
),
),
),
],
),
),
),
);
}

Widget _buildButton(
BuildContext context,
String text,
IconData icon,
VoidCallback onPressed,
){
// Get the screen width
double screenWidth = MediaQuery.of(context).size.width;

// Calculate button width (min of 250 or 80% of available width)

double buttonWidth = screenWidth > 312 ? 250 : screenWidth * 0.8;

return SizedBox(
width: buttonWidth,
height: 50,
child: ElevatedButton(
onPressed: onPressed,
style: ElevatedButton.styleFrom(
backgroundColor: Color(0xff011f1c),
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
elevation: 5,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(icon),
SizedBox(width: 12),
Text(
text,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
],
 07717711922 PARTH ARYA

),
),
);
}
}

Portfolio Screen

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dart:io';
import 'package:path_provider/path_provider.dart';
import 'package:flutter_file_dialog/flutter_file_dialog.dart';

class PortfolioItemScreen extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My Portfolio'),
),
body: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Portfolio',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.teal,
),
),
SizedBox(height: 24),

// Resume section
Card(
elevation: 4,
child: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Resume',
style: TextStyle(
fontSize: 20,
 07717711922 PARTH ARYA

fontWeight: FontWeight.bold,
),
),
SizedBox(height: 16),
Text(
'Click below to download my resume',
style: TextStyle(fontSize: 16),
),
SizedBox(height: 16),
Center(
child: ElevatedButton.icon(
icon: Icon(Icons.picture_as_pdf),
label: Text('Download Resume'),
style: ElevatedButton.styleFrom(
padding: EdgeInsets.symmetric(
horizontal: 24, vertical: 12),
),
onPressed: () async {
try {
// Show loading indicator
showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return Center(
child: CircularProgressIndicator(),
);
},
);

// Extract the PDF from assets

final ByteData data =
await rootBundle.load('assets/resume.pdf');
final List<int> bytes = data.buffer.asUint8List();

// Get temporary directory

final tempDir = await getTemporaryDirectory();
final tempPath = tempDir.path;
final filePath = '$tempPath/Resume.pdf';

// Write to temporary file

final file = File(filePath);
await file.writeAsBytes(bytes);

// Close loading dialog

Navigator.pop(context);

// Save file to user's device

final params = SaveFileDialogParams(
sourceFilePath: filePath,
fileName: 'Resume.pdf',
 07717711922 PARTH ARYA

mimeTypesFilter: ['application/pdf'],
);

final filePath2 =
await FlutterFileDialog.saveFile(
params: params);

if (filePath2 != null) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content:
Text('Resume downloaded successfully!'),
backgroundColor: Colors.green,
),
);
}
} catch (e) {
// Close loading dialog if it's showing
if (Navigator.canPop(context)) {
Navigator.pop(context);
}

ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
'Error downloading resume: ${e.toString()}'),
backgroundColor: Colors.red,
),
);
}
},
),
),
],
),
),
),

SizedBox(height: 24),

// Project section
Text(
'Projects',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.teal,
),
),
SizedBox(height: 16),
 07717711922 PARTH ARYA

// Project cards
ProjectCard(
title: 'AI-based Fraud Detection System',
description:
'This AI-driven fraud detection system leverages machine learning algorithms to
identify suspicious activities in financial transactions and prevent potential fraud. It is designed to
continuously learn and adapt to new patterns of fraudulent behavior.',
technologies: [
'Machine Learning',
'Python',
'AI',
'Data Analysis'
],
iconData: Icons.security,
),

SizedBox(height: 16),

ProjectCard(
title: 'Predictive Analytics for Healthcare',
description:
'This project uses AI and data science techniques to analyze historical healthcare
data and predict patient outcomes, such as disease progression or likelihood of readmission. It
aims to assist healthcare providers in making more accurate decisions.',
technologies: [
'Machine Learning',
'Data Science',
'Python',
'Healthcare'
],
iconData: Icons.local_hospital,
),

SizedBox(height: 16),

ProjectCard(
title: 'Sentiment Analysis on Social Media',
description:
'Using natural language processing (NLP) techniques, this project performs sentiment
analysis on social media data to determine public opinion on various topics. It helps businesses
and organizations understand customer sentiment and trends.',
technologies: [
'NLP',
'Python',
'Machine Learning',
'Data Science'
],
iconData: Icons.sentiment_very_satisfied,
),

SizedBox(height: 16),
 07717711922 PARTH ARYA

ProjectCard(
title: 'Recommendation System for E-Commerce',
description:
'This AI-based recommendation system leverages collaborative filtering and content-
based filtering to suggest personalized products to users based on their preferences and browsing
behavior, enhancing the shopping experience.',
technologies: [
'Machine Learning',
'Data Science',
'Python',
'AI'
],
iconData: Icons.recommend,
),

SizedBox(height: 16),

ProjectCard(
title: 'Stock Market Prediction using Deep Learning',
description:
'This project uses deep learning techniques, such as recurrent neural networks
(RNNs) and long short-term memory (LSTM) networks, to predict stock market trends and price
movements based on historical data and market indicators.',
technologies: ['Deep Learning', 'Python', 'AI', 'Finance'],
iconData: Icons.trending_up,
),

SizedBox(height: 24),

// Skills section
Text(
'Skills',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.teal,
),
),
SizedBox(height: 16),

Wrap(
spacing: 8,
runSpacing: 8,
children: [
SkillChip(label: 'Python'),
SkillChip(label: 'HTML'),
SkillChip(label: 'CSS'),
SkillChip(label: 'JavaScript'),
SkillChip(label: 'MongoDB'),
SkillChip(label: 'Git and GitHub'),
 07717711922 PARTH ARYA

SkillChip(label: 'ExpressJS'),
SkillChip(label: 'React'),
SkillChip(label: 'NodeJS'),
],
),
],
),
),
),
);
}
}

class ProjectCard extends StatelessWidget {

final String title;
final String description;
final List<String> technologies;
final IconData iconData;

const ProjectCard({
required this.title,
required this.description,
required this.technologies,
required this.iconData,
});

@override
Widget build(BuildContext context) {
return Card(
elevation: 3,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
child: Padding(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
CircleAvatar(
backgroundColor: Colors.teal.shade100,
radius: 24,
child: Icon(iconData, color: Colors.teal, size: 24),
),
SizedBox(width: 16),
Expanded(
child: Text(
title,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
 07717711922 PARTH ARYA

),
),
],
),
SizedBox(height: 16),
Text(
description,
style: TextStyle(fontSize: 14),
),
SizedBox(height: 16),
Wrap(
spacing: 8,
children: technologies
.map((tech) => Chip(
label: Text(tech),
backgroundColor: Colors.grey.shade200,
))
.toList(),
),
],
),
),
);
}
}

class SkillChip extends StatelessWidget {

final String label;

const SkillChip({required this.label});

@override
Widget build(BuildContext context) {
return Chip(
label: Text(label),
backgroundColor: Colors.teal.shade100,
labelStyle: TextStyle(color: Colors.teal.shade800),
);
}
}

Contact Screen
import 'package:flutter/material.dart';

class ContactScreen extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Contact'),
 07717711922 PARTH ARYA

),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Contact Information',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.teal,
),
),
SizedBox(height: 20),
Row(
children: [
Icon(Icons.person, color: Colors.teal),
SizedBox(width: 10),
Text(
'Parth Arya',
style: TextStyle(fontSize: 16),
),
],
),
SizedBox(height: 10),
Row(
children: [
Icon(Icons.email, color: Colors.teal),
SizedBox(width: 10),
Text(
'[email protected]',
style: TextStyle(fontSize: 16),
),
],
),
SizedBox(height: 10),
Row(
children: [
Icon(Icons.phone, color: Colors.teal),
SizedBox(width: 10),
Text(
'+91 9315614169',
style: TextStyle(fontSize: 16),
),
],
),
SizedBox(height: 10),
Row(
children: [
Icon(Icons.link, color: Colors.teal),
SizedBox(width: 10),
Text(
 07717711922 PARTH ARYA

'linkedin.com/in/partharya',
style: TextStyle(fontSize: 16),
),
],
),
SizedBox(height: 10),
Row(
children: [
Icon(Icons.camera, color: Colors.teal),
SizedBox(width: 10),
Text(
'@primodial_parth', // Instagram ID
style: TextStyle(fontSize: 16),
),
],
),
SizedBox(height: 10),
Row(
children: [
Icon(Icons.facebook, color: Colors.teal),
SizedBox(width: 10),
Text(
'facebook.com/partharya',
style: TextStyle(fontSize: 16),
),
],
),
],
),
);
}
}

Main file
import 'package:flutter/material.dart';
import 'homescreen.dart';
import 'portfolio_screen.dart';
import 'contact_screen.dart';

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

class PortfolioApp extends StatelessWidget {

@override
 07717711922 PARTH ARYA

Widget build(BuildContext context) {

return MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => HomeScreen(),
'/portfolio_screen': (context) => PortfolioItemScreen(),
'/contact_screen': (context) => ContactScreen(),
},
);
}
}

Output
Home Portfolio
 07717711922 PARTH ARYA

Contact

Learning Outcome
 07717711922 PARTH ARYA

Experiment 7

Aim: Write Flutter Mobile Application for Data Store Shared Preferences.

Objectives:

• To store, retrieve, and delete student data using enrollment numbers as unique keys in Flutter
with SharedPreferences.
• To implement a user-friendly interface that allows efficient data management with proper input
validation and UI spacing.

Theory:

SharedPreferences in Flutter is a lightweight storage solution used for persisting key-value data locally on
a device. It is commonly utilized for storing user preferences, session details, and small datasets that do not
require a full-fledged database. In this project, SharedPreferences is employed to save student information
using an enrollment number as the unique key. The app provides a structured UI, ensuring that users input
necessary details before saving, retrieving, or deleting data. By incorporating text fields and buttons with
proper spacing, the interface enhances usability while maintaining efficient data management.

Code

Main.dart
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(primarySwatch: Colors.blue),
home: DataStorageScreen(),
);
}
 07717711922 PARTH ARYA

class DataStorageScreen extends StatefulWidget {

@override
_DataStorageScreenState createState() => _DataStorageScreenState();
}

class _DataStorageScreenState extends State<DataStorageScreen> {

TextEditingController enrollmentController = TextEditingController();
TextEditingController nameController = TextEditingController();
TextEditingController projectController = TextEditingController();
TextEditingController retrieveController = TextEditingController();
String studentDetails = '';

Future<void> saveStudentData(
String enrollment, String name, String project) async {
try {
SharedPreferences prefs = await SharedPreferences.getInstance();
await prefs.setString(enrollment, '$name | $project');
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Data saved successfully!')),
);
} catch (e) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Error saving data: $e')),
);
}
}

Future<void> getStudentData(String enrollment) async {

try {
SharedPreferences prefs = await SharedPreferences.getInstance();
String? data = prefs.getString(enrollment);
setState(() {
 07717711922 PARTH ARYA

studentDetails = data ?? 'No data found for this enrollment number.';

});
} catch (e) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Error retrieving data: $e')),
);
}
}

Future<void> deleteStudentData(String enrollment) async {

try {
SharedPreferences prefs = await SharedPreferences.getInstance();
await prefs.remove(enrollment);
setState(() {
studentDetails = 'Data deleted successfully!';
});
} catch (e) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Error deleting data: $e')),
);
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Student Data Storage')),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: SingleChildScrollView(
child: Column(
children: <Widget>[
buildTextField(enrollmentController, 'Enter Enrollment Number'),
SizedBox(height: 15),
 07717711922 PARTH ARYA

buildTextField(nameController, 'Enter Student Name'),

SizedBox(height: 15),
buildTextField(projectController, 'Enter Project Title'),
SizedBox(height: 20),
buildButton('Save Data', () {
if (enrollmentController.text.isNotEmpty &&
nameController.text.isNotEmpty &&
projectController.text.isNotEmpty) {
saveStudentData(enrollmentController.text,
nameController.text, projectController.text);
}
}),
SizedBox(height: 30),
Text(
'Retrieve Data',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
SizedBox(height: 10),
buildTextField(retrieveController, 'Enter Enrollment Number'),
SizedBox(height: 15),
buildButton('Retrieve Data',
() => getStudentData(retrieveController.text)),
SizedBox(height: 20),
buildButton('Delete Data',
() => deleteStudentData(retrieveController.text)),
SizedBox(height: 30),
Text(
'Student Details: $studentDetails',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
],
),
),
 07717711922 PARTH ARYA

),
);
}

Widget buildTextField(TextEditingController controller, String hintText) {

return TextField(
controller: controller,
decoration: InputDecoration(
labelText: hintText,
border: OutlineInputBorder(),
),
);
}

Widget buildButton(String text, VoidCallback onPressed) {

return ElevatedButton(
style: ElevatedButton.styleFrom(minimumSize: Size(double.infinity, 50)),
onPressed: onPressed,
child: Text(text),
);
}
}
 07717711922 PARTH ARYA

Output

Learning Outcome
 07717711922 PARTH ARYA

Experiment 8

Aim: Create a flutter app using Restful API.

Objective: To build a cross-platform mobile application using Flutter that communicates with a
RESTful API for real-time data fetching, display, and manipulation. The aim is to create a dynamic,
interactive experience while showcasing seamless frontend-backend integration.
Theory:

Flutter is Google’s open-source UI toolkit for building natively compiled applications across
mobile, web, and desktop platforms from a single codebase. Written in Dart, it offers a rich
set of customizable widgets and tools that support the creation of responsive, visually appealing
user interfaces.

RESTful API

A RESTful API (Representational State Transfer) is a standardized architecture for building

scalable web services. It allows client applications—like Flutter apps—to interact with backend
systems over HTTP using operations like GET, POST, PUT, and DELETE. APIs typically return
JSON-formatted data, which can be parsed and used to update the app UI in real time.

Why REST API Integration Matters

• Dynamic Content: Enables the app to fetch and present live data without hardcoding it
into the app.
• Efficient Updates: Data can be modified or refreshed on the server without requiring an
app update or rebuild.
• Real-Time User Experience: Supports interactive features that reflect server-side
changes immediately, enhancing engagement and usability.

Code
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

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

class MyApp extends StatelessWidget {

 07717711922 PARTH ARYA

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter REST API Demo',
theme: ThemeData(
primarySwatch: Colors.deepPurple,
colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.deepPurple)
.copyWith(secondary: Colors.orange),
textTheme: TextTheme(
titleMedium: TextStyle(
fontSize: 20,
fontWeight:
FontWeight.bold), // Replaced headline5 with titleMedium
bodyLarge: TextStyle(
fontSize: 16,
color: Colors.black87), // Replaced bodyText1 with bodyLarge
),
scaffoldBackgroundColor: Colors.grey[100],
),
home: MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

List<dynamic> _data = [];
bool _isLoading = true;
String? _errorMessage;

@override
void initState() {
super.initState();
fetchData();
}

Future<void> fetchData() async {

setState(() {
_isLoading = true;
_errorMessage = null;
});
 07717711922 PARTH ARYA

try {
final response = await http
.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));
if (response.statusCode == 200) {
setState(() {
_data = json.decode(response.body);
});
} else {
setState(() {
_errorMessage = 'Failed to load data. Please try again later.';
});
}
} catch (e) {
setState(() {
_errorMessage = 'An error occurred. Please check your connection.';
});
} finally {
setState(() {
_isLoading = false;
});
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter REST API Demo'),
),
body: _isLoading
? Center(child: CircularProgressIndicator())
: _errorMessage != null
? Center(
child: Text(_errorMessage!,
style: TextStyle(color: Colors.red, fontSize: 18)))
: ListView.builder(
itemCount: _data.length,
itemBuilder: (BuildContext context, int index) {
return Card(
margin: EdgeInsets.symmetric(vertical: 8, horizontal: 12),
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
child: ListTile(
contentPadding: EdgeInsets.all(16),
 07717711922 PARTH ARYA

title: Text(
_data[index]['title'],
style: Theme.of(context)
.textTheme
.titleMedium, // Use titleMedium
),
subtitle: Text(
_data[index]['body'],
style: Theme.of(context)
.textTheme
.bodyLarge, // Use bodyLarge
maxLines: 3,
overflow: TextOverflow.ellipsis,
),
),
);
},
),
);
}
}
Output

Learning Outcome
 07717711922 PARTH ARYA

Experiment 9

Aim: To create a Flutter application that captures and displays real-time accelerometer sensor data
using the sensors_plus package.
Objective:
• To understand how to access and use hardware sensors in a mobile device through Flutter.
• To subscribe to and handle real-time accelerometer events.
• To display the current X, Y, and Z axis values of the device’s motion in a user-friendly UI.
• To practice proper subscription and disposal of sensor streams to manage memory efficiently.

Theory

The accelerometer is a physical sensor in mobile devices that measures acceleration along the
X, Y, and Z axes. This includes both movement and gravitational pull. It’s commonly used for
things like detecting motion, screen orientation changes, and step counting.

In Flutter, the sensors_plus package gives simple access to various sensors like the
accelerometer, gyroscope, and magnetometer. The accelerometer data comes in through a
stream called accelerometerEvents, which emits AccelerometerEvent objects that hold the
X, Y, and Z values.

This Flutter app:

• Subscribes to the accelerometer stream inside initState().

• Updates the UI with new data using setState() whenever readings change.
• Cleans up by cancelling the stream subscription in dispose() to avoid memory leaks.

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

void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green, // Set the app's primary theme color
),
 07717711922 PARTH ARYA

debugShowCheckedModeBanner: false,
home: AccelerometerExample(),
);
}
}
class AccelerometerExample extends StatefulWidget {
const AccelerometerExample({super.key});
@override
State<AccelerometerExample> createState() => _AccelerometerExampleState();
}
class _AccelerometerExampleState extends State<AccelerometerExample> {
// List to store accelerometer data
List<AccelerometerEvent> _accelerometerValues = [];
// StreamSubscription for accelerometer events
late StreamSubscription<AccelerometerEvent> _accelerometerSubscription;
@override
void initState() {
super.initState();
// Subscribe to accelerometer events
_accelerometerSubscription = accelerometerEvents.listen((event) {
setState(() {
// Update the _accelerometerValues list with the latest event
_accelerometerValues = [event];
});
});
}

@override
void dispose() {
// Cancel the accelerometer event subscription to prevent memory leaks
_accelerometerSubscription.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Accelerometer Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Accelerometer Data:',
style: TextStyle(fontSize: 20),
 07717711922 PARTH ARYA

),
SizedBox(height: 10),
if (_accelerometerValues.isNotEmpty)
Text(
'X: ${_accelerometerValues[0].x.toStringAsFixed(2)}, '
'Y: ${_accelerometerValues[0].y.toStringAsFixed(2)}, '
'Z: ${_accelerometerValues[0].z.toStringAsFixed(2)}',
style: TextStyle(fontSize: 16),
)
else
Text('No data available', style: TextStyle(fontSize: 16)),
],
),
),
);
}
}

Output

Learning Outcome