UJJAIN ENGINEERING COLLEGE,UJJAIN

Mobile Application Development

CS-4305

SUBMITTED TO: SUBMITTED BY:

Prof. Rahul Sharma Prashant Jain
(DEPT. OF CSE) 0701CS223D06
 UJJAIN ENGINEERING COLLEGE, UJJAIN (M.P.)
Name: Roll No.:
Subject: Semester:

----------------------------------------I N D E X------------------------------------------

S. Name of Date of Date of Remark

No. Experiment Performance Submission
01. Introduction to Mobile Application
Development.
02. Describe Android Studio and its installation
process.

03. What is flutter, Describe the installation process

of flutter.

04. Create your First Application in Flutter.

05. Create an AppBar using ‘AppBar’ Widget in

Flutter.

06. Create a table using ‘Table’ widget in Flutter.

07. Stateless and Stateful widgets in Flutter.

08. Write a program to create a form in Flutter.

09. Write a program to create a calculator in

Flutter.

10. Write a program to create a bottom navigation

in flutter.
 UJJAIN ENGINEERING COLLEGE, UJJAIN

PROGRAM - 1
Objective: Introduction to Mobile Application Development.
Talking about the mobile applications, the first thing that comes in our mind are the apps like Whatsapp,
YouTube, Instagram, zomato, etc that we use in our everyday life. A mobile application, most commonly
referred to as an app, is a type of application software designed to run on a mobile device, such as a
smartphone or tablet computer. Mobile applications frequently serve to provide users with similar services
to those accessed on PCs. Apps are generally small, individual software units with limited function. This use
of app software was originally popularized by Apple Inc. and its App Store, which offers thousands of
applications for the iPhone, iPad and iPod Touch.
A mobile application also may be known as an app, web app, online app, iPhone app or smartphone app.
But how these apps are made? Which technology is used? Are the questions which we generally don’t think
much about.
Mobile apps are majorly developed for 3 Operating System. :

1. Android: Android is an open-source mobile development platform that is based on Java and is
maintained by Google. The key features supported by Android are SQLite based light-weight
storage, SMS and MMS messaging, multi-lingual support, mobile browser. Other key features are
multi-touch support, multitasking, voice features, external storage and such. Android development
needs Android SDK, libraries, emulator and Eclipse IDE. Testing can be done using Android testing
APIs. We can deploy Android apps to Google Play store.
2. IOS: iOS is the mobile OS for Apple devices. The development on iOS happens using objective C.
iOS supports many features such as iMessage, iCloud, Siri etc. iOS provides in-built apps such as
mail, notifications, contacts calendar, bookmarks, sync etc. iOS development includes iOS SDK
(XCode), iOS Simulator, XCode IDE, and other frameworks for building iOS apps. For mobile web
development, we could use numerous JavaScript frameworks such as SenchaTouch, jQuery Mobile,
jQTouch and software such as PhoneGap that are used for mobile web development.
3. Windows: Windows OS is a discontinued family of mobile operating systems developed
by Microsoft for smartphones and personal digital assistants. Its origin dated back to Windows CE in
1996, though Windows Mobile itself first appeared in 2000 as Pocket PC 2000 which ran on Pocket
PC PDAs. It was renamed "Windows Mobile" in 2003, at which point it came in several versions
(similar to the desktop versions of Windows) and was aimed at business and enterprise consumers.
When initially released in the mid-2000s, it was to be the portable equivalent of what Windows
desktop OS was: a major force in the then-emerging mobile/portable areas.

There are 3 different ways to develop Mobile apps: –

1. 1st Party Native App development: These types of apps normally run in the native devices, that is,
it runs only in the OS that it is specifically designed for it. These apps cannot be used on different
devices using a different OS. The apps that are developed for android are normally coded using Java
or Kotlin languages. The IDE normally used for android app development is Android Studio which
provides all features and the apps that are developed for IOS are generally coded in Swift language
or Objective-C. The IDE suggested for IOS App Development is XCode.

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 1
 UJJAIN ENGINEERING COLLEGE, UJJAIN

2. Progressive web Application: Progressive web apps are essentially a website which runs locally on
your device. The technologies used are Microsoft Blazor, React, Angular JS, Native Script, Iconic.
These technologies normally used for web development propose. The apps’ UI is developed the
same way as they are developed while developing the website. This category has many ups and
downs let’s start with the advantages of Progressive web apps.
3. Cross-Platform Application: These are frameworks that allow developing total native applications
which have access to all the native features of IOS and Android but with the same code base. These
apps run on both Android and IOS. So normally the development speeds of these apps are very fast
and the maintenance cost is low. The performance speed is comparatively low to 1st party native
apps but faster than PWA.
Xamrine is Microsoft cross-platform solution that uses the programming languages like .NET, C#,
F#. The IDE preferred is Visual Studio. The UI/UX is totally native giving access to all features.
This technology is having a wide community. And whenever an update is released by Android and
IOS the same updates are released by Microsoft through Visual Studio. React Native is Facebook’s
cross-platform solution which uses the language JavaScript And the preferred IDE is WebStrome &
Visual Studio Code. Same like Xamrine React Native has totally native UI/UX and gives access to
all features. And the updates are released the same day by Facebook as Android and IOS.
Flutter is Google’s cross-platform solution which uses the language, Dart. The IDE preferred is
Android Studio, IntelliJ IDE, and Visual Studio Code. The UI/UX is bespoke and Flutters has to
come up with their new libraries whenever Android and IOS comes up with an update to mimic
those update. The community is fast growing.

Criteria Web Application Mobile Application

User Experience Provides good experience Mobile apps can leverage full
optimized for desktop browsers. device capabilities and offer rich
experience to users. Mobile apps
provide rich branding experience
to users.
Performance Web applications provide good Native mobile apps provide high
performance based on performance.
performance optimizations.
Interactivity Web applications provide Mobile apps offer high level
interactive interfaces through interactivity through touch
widgets. interface.
User intuitive features Web applications use limited Mobile apps provide intuitive
amount of device features features using device’s camera,
sensors, GPS etc. and provide
notifications to users.
Common use cases News, blogs. Games, social media and location
related services.

Signature of Faculty

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 2
 UJJAIN ENGINEERING COLLEGE, UJJAIN

PROGRAM - 2
Objective: Describe Android Studio and its installation process.

Android Studio is the official Integrated Development Environment (IDE) for android application
development. Android Studio provides more features that enhance our productivity while building Android
apps.

Android Studio was announced on 16th May 2013 at the Google I/O conference as an official IDE for
Android app development. It started its early access preview from version 0.1 in May 2013. The first stable
built version was released in December 2014, starts from version 1.0.

Since 7th May 2019, Kotlin is Google's preferred language for Android application development. Besides
this, other programming languages are supported by Android Studio.

Features of Android Studio

 It has a flexible Gradle-based build system.
 It has a fast and feature-rich emulator for app testing.
 Android Studio has a consolidated environment where we can develop for all Android devices.
 Apply changes to the resource code of our running app without restarting the app.
 Android Studio provides extensive testing tools and frameworks.
 It supports C++ and NDK.
 It provides build-in supports for Google Cloud Platform. It makes it easy to integrate Google
Cloud Messaging and App Engine.

Project structure

Figure 1. The project files in Android view.

Each project in Android Studio contains one or more modules with source code files and resource files.
Types of modules include:

 Android app modules

 Library modules
 Google App Engine modules

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 3
 UJJAIN ENGINEERING COLLEGE, UJJAIN
By default, Android Studio displays your project files in the Android project view, as shown in figure 1.
This view is organized by modules to provide quick access to your project's key source files.

All the build files are visible at the top level under Gradle Scripts and each app module contains the
following folders:

 manifests: Contains the AndroidManifest.xml file.

 java: Contains the Java source code files, including JUnit test code.
 res: Contains all non-code resources, such as XML layouts, UI strings, and bitmap images.

The Android project structure on disk differs from this flattened representation. To see the actual file
structure of the project, select Project from the Project dropdown (in figure 1, it's showing as Android).

You can also customize the view of the project files to focus on specific aspects of your app development.
For example, selecting the Problems view of your project displays links to the source files containing any
recognized coding and syntax errors, such as a missing XML element closing tag in a layout file.

1) The toolbar lets you carry out a wide range of actions, including running your app and launching
Android tools.
2) The navigation bar helps you navigate through your project and open files for editing. It provides a
more compact view of the structure visible in the Project window.
3) The editor window is where you create and modify code. Depending on the current file type, the
editor can change. For example, when viewing a layout file, the editor displays the Layout Editor.
4) The tool window bar runs around the outside of the IDE window and contains the buttons that allow
you to expand or collapse individual tool windows.
5) The tool windows give you access to specific tasks like project management, search, version control,
and more. You can expand them and collapse them.
6) The status bar displays the status of your project and the IDE itself, as well as any warnings or
messages.

You can organize the main window to give yourself more screen space by hiding or moving toolbars and
tool windows. You can also use keyboard shortcuts to access most IDE features.

At any time, you can search across your source code, databases, actions, elements of the user interface, and
so on, by double-pressing the Shift key, or clicking the magnifying glass in the upper right-hand corner of
the Android Studio window. This can be very useful if, for example, you are trying to locate a particular IDE
action that you have forgotten how to trigger.

System Requirements

 Microsoft Windows 7/8/10 (32-bit or 64-bit)

 4 GB RAM minimum, 8 GB RAM recommended (plus 1 GB for the Android Emulator)
 2 GB of available disk space minimum, 4 GB recommended (500 MB for IDE plus 1.5 GB for
Android SDK and emulator system image)
 1280 x 800 minimum screen resolution
Installation process of android studio
Step 1: To download the Android Studio, visit the official Android Studio website in your web browser.
Step 2: Click on the "Download Android Studio" option.
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN
(0701CS223D06) 4
 UJJAIN ENGINEERING COLLEGE, UJJAIN

Step 3: Double click on the downloaded "Android Studio-ide.exe" file.

Step 4: "Android Studio Setup" will appear on the screen and click "Next" to proceed.
Step 5: Select the components that you want to install and click on the "Next" button.
Step 6: Now, browse the location where you want to install the Android Studio and click "Next" to proceed.
Step 7: Choose a start menu folder for the "Android Studio" shortcut and click the "Install" button to
proceed.

Step 8: After the successful completion of the installation, click on the "Next" button.
Step 9: Click on the "Finish" button to proceed. Now, your Android studio welcome screen will appear on
the screen.
Step 10: "Android Studio Setup Wizard" will appear on the screen with the welcome wizard. Click on the
"Next" button.

Step 11: Select (check) the "Standard" option if you are a beginner and do not have any idea about Android
Studio. It will install the most common settings and options for you. Click "Next" to proceed.
Step 12: Now, select the user interface theme as you want. Then, click on the "Next" button.
Step 13: Now, click on the "Finish" button to download all the SDK components. And, the downloading and
installation process of components gets started.

Step 14: After downloading all the necessary components, click on the "Finish" button.

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 5
 UJJAIN ENGINEERING COLLEGE, UJJAIN

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 6
 UJJAIN ENGINEERING COLLEGE, UJJAIN

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 7
 UJJAIN ENGINEERING COLLEGE, UJJAIN

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 8
 UJJAIN ENGINEERING COLLEGE, UJJAIN

Signature of Faculty

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 9
 UJJAIN ENGINEERING COLLEGE, UJJAIN

PROGRAM - 3
Objective: What is flutter, Describe the installation process of flutter.
Flutter is a UI toolkit for building fast, beautiful, natively compiled applications for mobile, web, and
desktop with one programming language and single codebase. It is free and open-source. Initially, it was
developed from Google and now manages by an ECMA standard. Flutter apps use Dart programming
language for creating an app. The dart programming shares several same features as other programming
languages, such as Kotlin and Swift, and can be trans-compiled into JavaScript code.
The first version of Flutter was announced in the year 2015 at the Dart Developer Summit. It was initially
known as codename Sky and can run on the Android OS. On December 4, 2018, the first stable version of
the Flutter framework was released, denoting Flutter 1.0. The current stable release of the framework is
Flutter v2.13.0-0.3 on April 27, 2022.

The cross-platform development framework has the ability to write one code and can deploy on the various
platform (Android, iOS, and Desktop). It saves a lot of time and development efforts of developers. There
are several tools available for cross-platform development, including web-based tools, such as Ionic from
Drifty Co. in 2013, Phonegap from Adobe, Xamarin from Microsoft, and React Native form Facebook. Each
of these frameworks has varying degrees of success in the mobile industry. In recent, a new framework has
introduced in the cross-platform development family named Flutter developed from Google.
Flutter is mainly optimized for 2D mobile apps that can run on both Android and iOS platforms. We can
also use it to build full-featured apps, including camera, storage, geolocation, network, third-party SDKs,
and more.

Features of Flutter
Flutter gives easy and simple methods to start building beautiful mobile and desktop apps with a rich set of
material design and widgets. Here, we are going to discuss its main features for developing the mobile
framework.

 Open-Source: Flutter is a free and open-source framework for developing mobile applications.
 Cross-platform: This feature allows Flutter to write the code once, maintain, and can run on
different platforms. It saves the time, effort, and money of the developers.
 Hot Reload: Whenever the developer makes changes in the code, then these changes can be seen
instantaneously with Hot Reload. It means the changes immediately visible in the app itself. It is a
very handy feature, which allows the developer to fix the bugs instantly.
 Accessible Native Features and SDKs: This feature allows the app development process easy and
delightful through Flutter's native code, third-party integration, and platform APIs. Thus, we can
easily access the SDKs on both platforms.
 Minimal code: Flutter app is developed by Dart programming language, which uses JIT and AOT
compilation to improve the overall start-up time, functioning and accelerates the performance. JIT
enhances the development system and refreshes the UI without putting extra effort into building a
new one.
 Widgets: The Flutter framework offers widgets, which are capable of developing customizable
specific designs. Most importantly, Flutter has two sets of widgets: Material Design and Cupertino
widgets that help to provide a glitch-free experience on all platforms.

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 10
 UJJAIN ENGINEERING COLLEGE, UJJAIN
 Advantages
1) Cross-platform Operations: Apps made with flutter can be operated on both the platform (iOS
and Android). There is no need for reconfigurations and redesigning.
2) Less Need of Developers: This can be advantageous for the companies, as they require a smaller
number of developers and the app can also work on both the platforms.
3) Less Development Cost: Since there are a smaller number of developers needed, the cost
incurred for the development of the app also reduces.
4) Time Constraint: The time required to launch the app into the market, also reduces as only a
single app has to be made, which would work independently of the platform.
5) Powerful Design: Flutter mobile framework is the latest in the market, and this helps to create a
very powerful app design with minimum efforts.
 Disadvantages
1) The Flutter is a comparatively new language that needs continuous integration support through the
maintenance of scripts.
2) It provides very limited access to SDK libraries. It means a developer does not have a lot of
functionalities to create a mobile application. Such types of functionalities need to be developed by
the Flutter developer themselves.
3) The Flutter apps do not support the browser. It only supports Android and iOS platforms.
4) It uses Dart programming for coding, so a developer needs to learn new technologies. However, it is
easy to learn for developers.
 Installation process of Flutter
System requirements for Windows
To install and run Flutter on the Windows system, you need first to meet these requirements for your
development environment.

Operating System: Windows 7 or Later (I am Windows 10. You can also use Mac or Linux OS.).
Disk Space: 400 MB (It does not include disk space for IDE/tools).
Tools: 1. Windows PowerShell.
2. Git for Windows 2.x (Here, Use Git from Windows Command Prompt option).
SDK: Flutter SDK for Windows.
IDE: Android Studio (Official).

Step 1: To download Git, visit https://git-scm.com/downloads.

Step 2: Run the .exe file to complete the installation. During installation, make sure that you have selected
the recommended option.

Install the Flutter SDK

Step 1: Download the installation bundle of the Flutter Software Development Kit for windows. To
download Flutter SDK, Go to its official website, click on Get started button, you will get the following
screen.

Step 2: Next, to download the latest Flutter SDK, click on the Windows icon. Here, you will find the
download link for SDK.

Step 3: When your download is complete, extract the zip file and place it in the desired installation folder or
location, for example, D: /Flutter.

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 11
 UJJAIN ENGINEERING COLLEGE, UJJAIN
Step 4: To run the Flutter command in regular windows console, you need to update the system path to
include the flutter bin directory. The following steps are required to do this:

Step 4.1: Go to This PC properties -> advanced tab -> environment variables. You will get the following
screen.

Step 4.2: Now, select path -> click on edit. The following screen appears.

Step 4.3: In the above window, click on New->write path of Flutter bin folder in variable value -> OK ->
OK -> OK.

Step 5: Now, run the $ flutter doctor command. This command checks for all the requirements of Flutter
app development and displays a report of the status of your Flutter installation.

Step 6: When you run the above command, it will analyze the system and show its report, as shown in the
below image. Here, you will find the details of all missing tools, which required to run Flutter as well as the
development tools that are available but not connected with the device.

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 12
 UJJAIN ENGINEERING COLLEGE, UJJAIN

Signature of Faculty

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 13
 UJJAIN ENGINEERING COLLEGE, UJJAIN

PRACTICAL - 4
Aim: Create your First Application in Flutter.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main()
{

runApp(
Material(
color:Colors.pink,
child: Center(
child: Text("Hello World",textDirection: TextDirection.ltr,
style: TextStyle(color: Colors.blue,
backgroundColor: Colors.yellow,
fontSize: 40.0
) ) ) ) );
}
*********************************OUTPUT*********************************

Signature of Faculty
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN
(0701CS223D06) 14
 UJJAIN ENGINEERING COLLEGE, UJJAIN

PRACTICAL - 5
Aim: Create an AppBar using ‘AppBar’ Widget in Flutter.
Example I
#CODE

import 'package:flutter/material.dart';
void main()
{
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('AppBar'),
),
body: const Center(
child: Text(
'Hello! I am Prashant Jain creating an AppBar',
style: TextStyle(color: Colors.indigo,backgroundColor: Colors.white38,fontSize: 24),
),
),
),
debugShowCheckedModeBanner: false,
));
}
Example II
#CODE

import "package:flutter/material.dart";
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("AppBar Example II"),
actions: <Widget>[IconButton(icon: Icon(Icons.comment),tooltip: 'Comment Icon',onPressed: () {},),
IconButton(icon: Icon(Icons.settings),tooltip: 'Setting Icon',onPressed: () {},),
], backgroundColor: Colors.black87,
elevation: 50.0,
leading: IconButton(
icon: Icon(Icons.menu),
tooltip: 'Menu Icon',
onPressed: () {},),
brightness: Brightness.dark,),
body: const Center(child: Text("Hello again! This is second exapmle of AppBar",
style: TextStyle(fontSize: 24),
),
),
),
debugShowCheckedModeBanner: false,
));
}

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 15
 UJJAIN ENGINEERING COLLEGE, UJJAIN
*********************************OUTPUT*********************************

Signature of Faculty

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 16
 UJJAIN ENGINEERING COLLEGE, UJJAIN

PRACTICAL - 6
Aim: Create a table using ‘Table’ widget in Flutter.
import 'package:flutter/material.dart';
void main() {runApp(MyApp());}
class MyApp extends StatefulWidget {
@override
_TableCreation createState() => _TableCreation();
}
class _TableCreation extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('An example of Table in Flutter'),
),
body: Center(
child: Column(children: <Widget>[
Container(
margin: EdgeInsets.all(20),
child: Table(
defaultColumnWidth: FixedColumnWidth(250.0),
border: TableBorder.all(
color: Colors.black,
style: BorderStyle.solid,
width: 2),
children: [
TableRow( children: [
Column(children:[Text('S.No.', style: TextStyle(fontSize: 30.0,fontWeight: FontWeight. bold))]),
Column(children:[Text('Name', style: TextStyle(fontSize: 30.0,fontWeight:
FontWeight. bold))]),
Column(children:[Text(Roll Number, style: TextStyle(fontSize: 30.0,fontWeight: FontWeight. bold))]),
]),
TableRow( children: [
Column(children:[Text('1', style: TextStyle(fontSize: 30.0))]),
Column(children:[Text('Harsh Jha', style: TextStyle(fontSize: 30.0))]),
Column(children:[Text('101', style: TextStyle(fontSize: 30.0))]),
]),
TableRow( children: [
Column(children:[Text('2', style: TextStyle(fontSize: 30.0))]),
Column(children:[Text('Mahesh Patidar', style: TextStyle(fontSize: 30.0))]),
Column(children:[Text('102', style: TextStyle(fontSize: 30.0))]),
]),
TableRow( children: [
Column(children:[Text('3', style: TextStyle(fontSize: 30.0))]),
Column(children:[Text('Mohit Sharma', style: TextStyle(fontSize:
30.0))]),Column(children:[Text('David Jones', style: TextStyle(fontSize:
30.0))]),
]),
TableRow( children: [
Column(children:[Text('4', style: TextStyle(fontSize: 30.0))]),
Column(children:[Text('Prashant Jain', style: TextStyle(fontSize: 30.0))]),
Column(children:[Text('104', style: TextStyle(fontSize: 30.0))]),

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 17
 UJJAIN ENGINEERING COLLEGE, UJJAIN
]),
],
),
),
])
)),
);
}
}
*********************************OUTPUT*************************************

Signature of Faculty
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN
(0701CS223D06) 18
 UJJAIN ENGINEERING COLLEGE, UJJAIN

PRACTICAL - 7
Aim: Stateless and Stateful widgets in Flutter.
The state of the widget is the information of the objects that its properties (parameters) are holding at the
time of its creation (when the widget is painted on the screen). The state can also change when it is used for
example the color of RaisedButton widget might change when pressed.

Stateless Widget:

Stateless widgets are the widgets that don’t change i.e. they are immutable. Its appearance and properties
remain unchanged throughout the lifetime of the widget. In simple words, Stateless widgets cannot change
their state during the runtime of the app, which means the widgets cannot be redrawn while the app is in
action.
Examples: Icon, IconButton, and Text are examples of stateless widgets.
To create a Stateless widget, we have to override the build() method as implemented in the code below.

Stateful Widget:

Stateful Widgets are the ones that change its properties during run-time. They are dynamic i.e., they are
mutable and can be drawn multiple times within its lifetime. It can change its appearance in response to
events triggered by user interactions or when it receives data.
Examples : Checkbox, Radio Button, Slider, InkWell, Form, and TextField are examples of Stateful
widgets.
To create a Stateful widget, we have to override the createState() method, which returns the state of the
widget.

Differences Between Stateless and Stateful Widget:

Stateless Widget:

 Stateless Widgets are static widgets.

 They do not depend on any data change or any behavior change.

 Stateless Widgets do not have a state, they will be rendered once and will not update themselves,
but will only be updated when external data changes.

 For Example: Text, Icon, RaisedButton are Stateless Widgets.

Stateful Widget:

 Stateful Widgets are dynamic widgets.

 They can be updated during runtime based on user action or data change.

 Stateful Widgets have an internal state and can re-render if the input data changes or if Widget’s
state changes.

 For Example: Checkbox, Radio Button, Slider are Stateful Widgets

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 19
 UJJAIN ENGINEERING COLLEGE, UJJAIN

STATELESS WIDGET

import 'package:flutter/material.dart';
void main() => runApp(stateless_widget());
class stateless_widget extends StatelessWidget {
@override Widget build(BuildContext context)
{return MaterialApp(
home: Scaffold(
backgroundColor: Colors.greenAccent,
appBar: AppBar(title: Text("STATELESS WIDGET EXAMPLE"), ),
body: Container(child: Center(child: Text("Stateless Widget is implemented",style: TextStyle(fontSize:
30.0,fontWeight: FontWeight.bold)),
),
),
),
);
}}

STATEFUL WIDGET

import 'package:flutter/material.dart';
void main() => runApp(example());
class example extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return statefulWidget();
}
}
class statefulWidget extends State<example> {
List<String> _sports = ['Cricket'];
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('STATEFUL WIDGET EXAMPLE')),
body: Column(children: [
Container(
margin: EdgeInsets.all(10.0),
child: RaisedButton(
onPressed: () {
setState(() {
_sports.add('Football');
});
},
child: Text('Stateful Widget is implemented'))),
Column(children: _sports.map((element) => Card(child: Column(children: <Widget>[
Text(element)],
),
)) .toList()),
]),
),);

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 20
 UJJAIN ENGINEERING COLLEGE, UJJAIN
}
}

*********************************OUTPUT*********************************

Signature of Faculty
2 DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN
(0701CS223D06) 21
 UJJAIN ENGINEERING COLLEGE, UJJAIN

PRACTICAL - 8
Aim: Write a program to create a form in Flutter.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

const MyApp({super.key});

@override
Widget build(BuildContext context) {
const appTitle = 'Form Validation Demo';

return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: const Text(appTitle),
),
body: const MyCustomForm(),
),
);
}
}

// Create a Form widget.

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

@override
MyCustomFormState createState() {
return MyCustomFormState();
}
}

// Create a corresponding State class.

// This class holds data related to the form.
class MyCustomFormState extends State<MyCustomForm> {
// Create a global key that uniquely identifies the Form widget
// and allows validation of the form.
//
// Note: This is a GlobalKey<FormState>,
// not a GlobalKey<MyCustomFormState>.
final _formKey = GlobalKey<FormState>();

@override
Widget build(BuildContext context) {
// Build a Form widget using the _formKey created above.
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextFormField(
2 DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN
(0701CS223D06) 22
 UJJAIN ENGINEERING COLLEGE, UJJAIN
decoration: const InputDecoration(
icon: const Icon(Icons.person),
hintText: 'Enter your name',
labelText: 'Name',
),
),
TextFormField(
decoration: const InputDecoration(
icon: const Icon(Icons.phone),
hintText: 'Enter a phone number',
labelText: 'Phone',
),
),
TextFormField(
decoration: const InputDecoration(
icon: const Icon(Icons.ac_unit),
hintText: 'Enter your Enrollment Number',
labelText: 'ENo',
),
),
TextFormField(
decoration: const InputDecoration(
icon: const Icon(Icons.all_inbox_sharp),
hintText: 'Enter your Branch',
labelText: 'Branch',
),
),
TextFormField(
decoration: const InputDecoration(
icon: const Icon(Icons.calendar_today),
hintText: 'Enter your date of birth',
labelText: 'DOB',
),
),

Padding(
padding: const EdgeInsets.symmetric(vertical: 26.0, horizontal: 20.0),
child: ElevatedButton(
onPressed: () {
// Validate returns true if the form is valid, or false otherwise.
if (_formKey.currentState!.validate()) {
// If the form is valid, display a snackbar. In the real world,
// you'd often call a server or save the information in a database.
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Processing Data')),
);
}
},
child: const Text('Submit'),
),
),
],
),
);
}
}

2 DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 23
 UJJAIN ENGINEERING COLLEGE, UJJAIN

*********************************OUTPUT*********************************

Signature of Faculty

2 DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 24
 UJJAIN ENGINEERING COLLEGE, UJJAIN

PRACTICAL - 9
Aim: Write a program to create a calculator in Flutter.

import 'package:flutter/material.dart';
import 'buttons.dart';
import 'package:math_expressions/math_expressions.dart';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
); // MaterialApp
}
}

class HomePage extends StatefulWidget {

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

class _HomePageState extends State<HomePage> {

var userInput = '';
var answer = '';
final List<String> buttons = ['C', '+/-', '%', 'DEL', '7', '8','9','/','4','5','6','x','1','2','3','-','0', '.', '=','+',];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text("Calculator"),
), //AppBar
backgroundColor: Colors.white38,
body: Column(
children: <Widget>[
Expanded(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
padding: EdgeInsets.all(20),
alignment: Alignment.centerRight,
child: Text(
userInput,
2 DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN
(0701CS223D06) 25
 UJJAIN ENGINEERING COLLEGE, UJJAIN
style: TextStyle(fontSize: 18, color: Colors.white),
),
),
Container(
padding: EdgeInsets.all(15),
alignment: Alignment.centerRight,
child: Text(
answer,
style: TextStyle(
fontSize: 30,
color: Colors.white,
fontWeight: FontWeight.bold),
),
)
]),
),
),
Expanded(
flex: 3,
child: Container(
child: GridView.builder(
itemCount: buttons.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4),
itemBuilder: (BuildContext context, int index) {
// Clear Button
if (index == 0) {
return MyButton(
buttontapped: () {
setState(() {
userInput = '';
answer = '0';
});
},
buttonText: buttons[index],
color: Colors.blue[50],
textColor: Colors.black,
);
}

// +/- button
else if (index == 1) {
return MyButton(
buttonText: buttons[index],
color: Colors.blue[50],
textColor: Colors.black,
);
}
// % Button
else if (index == 2) {
return MyButton(
2 DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN
(0701CS223D06) 26
 UJJAIN ENGINEERING COLLEGE, UJJAIN
buttontapped: () {
setState(() {
userInput += buttons[index];
});
},
buttonText: buttons[index],
color: Colors.blue[50],
textColor: Colors.black,
);
}
// Delete Button
else if (index == 3) {
return MyButton(
buttontapped: () {
setState(() {
userInput =
userInput.substring(0, userInput.length - 1);
});
},
buttonText: buttons[index],
color: Colors.blue[50],
textColor: Colors.black,
);
}
// Equal_to Button
else if (index == 18) {
return MyButton(
buttontapped: () {
setState(() {
equalPressed();
});
},
buttonText: buttons[index],
color: Colors.orange[700],
textColor: Colors.white,
);
}

// other buttons
else {
return MyButton(
buttontapped: () {
setState(() {
userInput += buttons[index];
});
},
buttonText: buttons[index],
color: isOperator(buttons[index])
? Colors.blueAccent
: Colors.white,
2 DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN
(0701CS223D06) 27
 UJJAIN ENGINEERING COLLEGE, UJJAIN
textColor: isOperator(buttons[index])
? Colors.white
: Colors.black,
);
}
}), // GridView.builder
),
),
],
),
);
}

bool isOperator(String x) {
if (x == '/' || x == 'x' || x == '-' || x == '+' || x == '=') {
return true;
}
return false;
}

// function to calculate the input operation

void equalPressed() {
String finaluserinput = userInput;
finaluserinput = userInput.replaceAll('x', '*');

Parser p = Parser();
Expression exp = p.parse(finaluserinput);
ContextModel cm = ContextModel();
double eval = exp.evaluate(EvaluationType.REAL, cm);
answer = eval.toString();
}
}

2 DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 28
 UJJAIN ENGINEERING COLLEGE, UJJAIN

*********************************OUTPUT*********************************

Signature of Faculty

2 DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 29
 UJJAIN ENGINEERING COLLEGE, UJJAIN
PRACTICAL - 10
Aim: Write a program to create a Bottom Navigation in Flutter.
import 'package:flutter/material.dart';
import 'pages.dart';
void main()
{
runApp(
MaterialApp(
title: "Bottom navigation",
home: BottomAppMenu(),

)
);
}
class BottomAppMenu extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return BottomMenuState();
}
}
class BottomMenuState extends State<BottomAppMenu>{
var pagesData=[Homepage(),Aboutpage(),Servicespage()];
int _selectedItem=0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title:Text("Bottom Navigation")),
body: Center(
child: pagesData[_selectedItem],
),
bottomNavigationBar : BottomNavigationBar(
items: <BottomNavigationBarItem> [
BottomNavigationBarItem(icon: Icon(Icons.home), label:"Home"),
BottomNavigationBarItem(icon: Icon(Icons.info), label:"About"),
BottomNavigationBarItem(icon: Icon(Icons.cleaning_services), label:"Serevices"),
],
currentIndex: _selectedItem,
onTap: (setValue){
setState((){
_selectedItem=setValue;
});
},
),
);
}

2 DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 30
 UJJAIN ENGINEERING COLLEGE, UJJAIN
}

Pages.dart
import 'package:flutter/material.dart';
class Homepage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
boxShadow: const [
BoxShadow(
color: Colors.greenAccent,
blurRadius: 5,
spreadRadius: 1,
offset: Offset(4, 4)),
],
color: Colors.greenAccent[200],
),
padding: EdgeInsets.symmetric(horizontal: 40, vertical: 20),
margin: EdgeInsets.symmetric(horizontal: 0, vertical: 20),
child: Text(
"Ujjain Engineering College",
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 55, color: Colors.white),
textAlign: TextAlign.center,
),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
boxShadow: const [
BoxShadow(
color: Colors.lightBlueAccent,
blurRadius: 5,
spreadRadius: 1,
offset: Offset(4, 4)),
],
color: Colors.white70,
),
padding: EdgeInsets.symmetric(horizontal: 40, vertical: 20),
margin: EdgeInsets.symmetric(horizontal: 20, vertical: 20),

2 DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 31
 UJJAIN ENGINEERING COLLEGE, UJJAIN
child: Text(
"Ujjain Engineering College, Ujjain was established in 1966 by Govt. of M.P. with a
view to improve the technical education. Qualified engineering graduates may thus be produced
who could bear the responsibility of providing impetus to growing industrialization of the country.
Initially there were only three branches of engineering i.e. Civil, Mechanical and Electrical. Later
on Electronics Engineering (1985) and Chemical Engineering (1986) branches were introduced.
From Session 2001-2002 B.E. Computer Science and Engineering course has also been started.",
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 20, color: Colors.black),
textAlign: TextAlign.justify,
),
),
],
),
),
);
}
}

class Aboutpage extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
boxShadow: const [
BoxShadow(
color: Colors.black,
blurRadius: 5,
spreadRadius: 1,
offset: Offset(4, 4)),
],
color: Colors.redAccent[200],
),
padding: EdgeInsets.symmetric(horizontal: 40, vertical: 20),
margin: EdgeInsets.symmetric(horizontal: 0, vertical: 20),
child: Text(
"Computer Science Department",
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 55, color: Colors.white),
textAlign: TextAlign.center,
),

2 DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 32
 UJJAIN ENGINEERING COLLEGE, UJJAIN
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
boxShadow: const [
BoxShadow(
color: Colors.lightBlueAccent,
blurRadius: 5,
spreadRadius: 1,
offset: Offset(4, 4)),
],
color: Colors.white70,
),
padding: EdgeInsets.symmetric(horizontal: 40, vertical: 20),
margin: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
child: Text(
"The Computer Science Department at our college offers students a comprehensive
education in the theory, design, and application of computer systems. Our curriculum covers
programming languages, algorithms, data structures, software engineering, databases, networking,
artificial intelligence, and more. Students learn to analyze complex problems and develop
innovative solutions using cutting-edge technology. Our faculty are experienced researchers and
educators who engage students in hands-on projects, research opportunities, and industry
collaborations. Our graduates are well-prepared for careers in software development, data analysis,
cybersecurity, and other technology-related fields, as well as for graduate studies in computer
science and related disciplines.",
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 20, color: Colors.black),
textAlign: TextAlign.justify,
),
),
],
),
),
);
}
}

class Servicespage extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),

2 DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 33
 UJJAIN ENGINEERING COLLEGE, UJJAIN
boxShadow: const [
BoxShadow(
color: Colors.greenAccent,
blurRadius: 5,
spreadRadius: 1,
offset: Offset(4, 4)),
],
color: Colors.redAccent[200],
),
padding: EdgeInsets.symmetric(horizontal: 40, vertical: 5),
margin: EdgeInsets.symmetric(horizontal: 0, vertical: 20),
child: Text(
"Our Laboratories",
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 55, color: Colors.white),
textAlign: TextAlign.center,
),
),
Container(
margin: EdgeInsets.all(20),
child: Table(
columnWidths: const {
0: FixedColumnWidth(100),
1:FixedColumnWidth(450)
},
border: TableBorder.all(
color: Colors.black, style: BorderStyle.solid, width: 2),
children: [
TableRow(children: [
Column(children: [
Text('S.No.',
style: TextStyle(
fontSize: 20.0, fontWeight: FontWeight.bold))
]),
Column(children: [
Text('Laboratories Name',
style: TextStyle(
fontSize: 20.0, fontWeight: FontWeight.bold))
]),
]),
TableRow(children: [
Column(

children: [Text('1', style: TextStyle(fontSize: 20.0))]),

Column(children: [
Text('MicroProcessor Lab', style: TextStyle(fontSize: 20.0))

2 DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 34
 UJJAIN ENGINEERING COLLEGE, UJJAIN
]),
]),
TableRow(children: [
Column(
children: [Text('2', style: TextStyle(fontSize: 20.0))]),
Column(children: [
Text('Internet Of Things Lab', style: TextStyle(fontSize: 20.0))
]),
]),
TableRow(children: [
Column(
children: [Text('3', style: TextStyle(fontSize: 20.0))]),
Column(children: [
Text('Data Base Managment Lab', style: TextStyle(fontSize: 20.0))
]),
]),
TableRow(children: [
Column(
children: [Text('4', style: TextStyle(fontSize: 20.0))]),
Column(children: [
Text('Mobile Application Lab', style: TextStyle(fontSize: 20.0))
]),
]),
TableRow(children: [
Column(
children: [Text('5', style: TextStyle(fontSize: 20.0))]),
Column(children: [
Text('Data Structure Lab', style: TextStyle(fontSize: 20.0))
]),
]),
TableRow(children: [
Column(
children: [Text('6', style: TextStyle(fontSize: 20.0))]),
Column(children: [
Text('AI & ML Lab', style: TextStyle(fontSize: 20.0))
]),
]),
],
),
),
]),
),
);
}
}

2 DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 35
 UJJAIN ENGINEERING COLLEGE, UJJAIN

*********************************OUTPUT*********************************

2 DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 36
 UJJAIN ENGINEERING COLLEGE, UJJAIN

Signature of Faculty

2 DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING PRASHANT JAIN

(0701CS223D06) 37