EXPERIMENT NUMBER: 1

Date of Performance :

Date of Submission :

AIM : To install and configure Flutter Environment

Theory: Flutter is Google’s portable UI toolkit for crafting beautiful, natively

compiled applications for mobile, desktop and web from a single codebase.
Flutter enables developers to write a single codebase that can be used to
target multiple platforms, including Android, iOS, web, and desktop.This
single-codebase approach reduces development time and effort while
maintaining a consistent user experience across platforms.
Flutter apps are natively compiled, which means they can achieve high
performance levels on both Android and iOS devices.The framework provides
a consistent 60 frames per second (fps) performance by default, ensuring
smooth animations and responsive user interfaces.

Steps to install and configure Flutter Environment:

Step 1: Download Flutter SDK

● Visit the official Flutter website: “https://flutter.dev/” and click on
“Get Started” Button
● Choose your operating system (Windows, macOS, or
Linux).Download the Flutter SDK package for your OS.
Step 2: Extract the Flutter SDK:
● After downloading, extract the folder to your preferred location. On
Linux, you can use the terminal:
`tar xf flutter_linux_vx.x.x-stable.tar.xz -C ~/development/`
● Replace “x.x.x” with the actual version number and
“~/development/” with your desired installation directory.
Step 3: Add Flutter to Your PATH:
To use Flutter globally from the command line, add the Flutter binary
directory to your system's PATH:
● On Linux, you can edit your shell profile file (e.g., `~/.bashrc` or
`~/.zshrc`)and add the following line:
export PATH="$PATH:`pwd`/flutter/bin"
● On Windows, you can add a system environment variable pointing to
the Flutter binary folder.
Step 4: Verify Flutter Installation:
● Open a new terminal window and run the following command to verify
that Flutter is correctly installed:
`flutter doctor`
Step 5: Install Required Dependencies:
Based on the output of `flutter doctor`, you may need to install additional
dependencies. Common dependencies include:
● Android Studio: If you plan to develop Android apps.
● Xcode: If you plan to develop iOS apps (only available on macOS).
● Android and iOS SDKs: Required for mobile app development.
● Visual Studio Code (VS Code): A popular code editor with
Flutter extensions, though you can use other editors.
Follow the instructions provided by `flutter doctor` to install these
dependencies. Step6: Set up an Emulator(optional):
● If you're developing for mobile, you can set up an emulator or use a
physical device. To set up an emulator for Android, you can use
Android Studio's AVD (Android Virtual Device) Manager.
Step7: Create a Flutter Project:
● `flutter create my_flutter_app`
Replace “my_flutter_app” with your preferred project
name. Step8: Run Your Flutter App:
● `cd my_flutter_app`
● `flutter run`

Conclusion:

R1 R2 R3 Total Signature
(5 Marks) (5 Marks) (5 Marks) (15 Marks)
 EXPERIMENT NUMBER: 2

Date of Performance :

Date of Submission:
AIM: To design Flutter UI by including common widgets.

THEORY: After installing Flutter, we can start building the Flutter project
and debug on an emulator rather than a physical device.

PROCEDURE:
Step1: Create a New Flutter Project:
Open your terminal or command prompt and navigate to the directory
where you want to create your Flutter project. Then, run the following
command to create a new Flutter project:
`flutter create
my_flutter_app` Step 2: Open
Your Flutter Project:
● Navigate to the project directory you just created using your IDE of
choice (e.g., Visual Studio Code, Android Studio, or IntelliJ IDEA).
Step3: Modify the `lib/main.dart` File:
● Open the `lib/main.dart` file in your project and replace
its content Step4: Save and Run Your App:
● Save the changes to your `main.dart` file, and then run your app
using your IDE or by running the following command in the terminal:
`flutter run`
●
CONCLUSION:

R1 R2 R3 Total Signature
(5 Marks) (5 Marks) (5 Marks) (15 Marks)
 EXPERIMENT NUMBER: 3

Date of Performance :

Date of Submission :

AIM: To design a layout of Flutter app using layout widgets

THEORY: In flutter, everything is a widget- even layout models are

widgets. The images, icons,, and text that you see in flutter app are all
widgets.
Here are some of the most commonly used layout widgets:

1. Row and Column:

A row widget is used to arrange its child widgets in a
horizontal line. It is typically used to create a row of buttons or
icons
The Column widget arranges its children vertically in a single
column.You can control alignment and spacing between children using
properties like” mainAxisAlignment” and “crossAxisAlignment”

2. Expanded:
An Expanded widget makes a child of a Row, Column, or Flex
expand to fill the available space along the main axis (e.g.,
horizontally for a Row or vertically for a Column). If multiple children
are expanded, the available space is divided among them according
to the flex factor.3

3. Container:
A container first surrounds the child with padding (inflated by any
borders present in the decoration) and then applies additional
constraints to the padded extent (incorporating the width and height
as constraints, if either is non-null).
The container is then surrounded by additional empty space described
from the margin.

4. List View:
ListView is the most commonly used scrolling widget. It displays its
children one after another in the scroll direction. In the cross axis,
the children are required to fill the ListView.
If non-null, the itemExtent forces the children to have the given
extent in the scroll direction.
 5. Grid View:
A scrollable, 2D array of widgets.
The main axis direction of a grid is the direction in which it scrolls.
The most commonly used grid layouts are GridView.count, which
creates a layout with a fixed number of tiles in the cross axis, and
GridView.extent, which creates a layout with tiles that have a
maximum cross-axis extent. A custom SliverGridDelegate can produce
an arbitrary 2D arrangement of children, including arrangements that
are unaligned or overlapping.

6. Aspect Ratio:
An Aspect Ratio widget is used to enforce a specific aspect ratio on
its child widgets. It can be used to ensure that a widget maintains a
specific width to height ratio.

7. Card:
A card widget Is used to create a material design card with a shadow
and rounded corners. It can be used to display a group of related
widgets or to provide additional information about a specific widgets.

8. Image:
The image Widget is used to display images in a Flutter app. The
image Widgets supports a variety of image formats, including PNG,
JPEG, SVG, etc. You can load images from different sources such as
network urls, local files, etc.

CONCLUSION:

R1 R2 R3 Total Signature
(5 Marks) (5 Marks) (5 Marks) (15 Marks)
 EXPERIMENT NO. 4

Date of Performance :

Date of Submission :

AIM: To include icons, images, charts, drawers in Flutter app

THEORY: To include icons, images, charts and drawers in a Flutter app you can
use the following widgets:

1. Icons:
To include icons in a Flutter app, you can use the “ICON” widgets. “ICON”
widgets used to display icons from ‘MaterialIcons’ or from a custom icon
font. Here’s an example of using ‘ICON’ widget to display material icon
● Create a flutter Project Using the following command:
`flutter create my_flutter_app`
Replace `my_flutter_app` with your file name
● Open the Dart File: Navigate to the lib directory of your Flutter
project and open the Dart file where you want to include the icon.
Typically, it's the main.dart file.
● Import Flutter Material Library: Ensure that you import the Flutter
material library at the top of your Dart file:
`import 'package:flutter/material.dart';`
● Include the Icon: Inside your app's widget tree (e.g., in the build
method of your MyApp widget), include the Icon widget. You can
choose an icon from the Material Icons set and customize its size and
color if needed.

2. Images:
To include Images in a Flutter app, you can use the ‘IMAGE’ widget. The’
image’ widget can load images from network urls, local files, and assets.
● Prepare Your Image:
○ Make sure you have the image you want to use in your Flutter
app ready. Supported image formats include PNG, JPEG, GIF,
and more.
○ Place the image in a directory within your Flutter project. By
convention, images are often placed in a directory named
`assets`.
● Configure `pubspec.yaml`:
○ Open the `pubspec.yaml` file located at the root of your Flutter
project.
○ Add an `assets` section to specify the path to your image file.
Here's an example:
■ flutter: assets: - assets/my_image.png
 ○ Make sure the indentation is correct, and the path is
relative to your project's root directory.
● Import the Flutter Material Library:
○ Ensure that you've imported the Flutter material library at the
top of your Dart file:
■ import 'package:flutter/material.dart';
● Display the Image:
○ Use the `Image.asset` widget to display the image. You can
place this widget within your app's widget tree.
○ Ensure that you provide the correct image path relative to the
`pubspec.yaml` file.
● Run Your App:
○ Save your changes and run your Flutter app using the following
command:
■ flutter run

3. Charts:
To include charts in Flutter app, you can use chart library such as “chart-
flutter”. The chart-flutter library provides a variety of chart types, which
includes line chart and pie charts.
● Create a Flutter Project: If you haven't already, create a new Flutter
project using the following command:
○ `flutter create my_chart_app`
Replace `my_chart_app` with your preferred project name.
● Add the `fl_chart` Package:
○ Open the `pubspec.yaml` file in your project's root directory.
○ Under the `dependencies` section, add the `fl_chart` package:
■ dependencies: flutter: sdk: flutter
■ fl_chart: ^0.40.0 # Use the latest version from pub.dev
○ Save the `pubspec.yaml` file.
● Import the Necessary Packages
● Create a Chart Widget:
○ Create a widget that represents the chart. You can use one of
the chart types provided by the fl_chart package, such as
“LineChart”,” BarChart”, or “PieChart”
● Configure the Chart Data
● Add the Chart Widget to Your App
● Run Your App

4. Drawers:
 To include a drawer in flutter app, you can use the ‘Drawer’ widget. The
‘Drawer’ widget provides a sliding panel that can be used to display
navigation items and other content.
● Create a Flutter Project
● Open Your Main Dart File: Open the Dart file where you want to
include the drawer. Typically, this will be the main.dart file.
● Import the Necessary Packages
● Create a Drawer Widget:
○ Define a `Drawer` widget that contains the items you want to
display in the side menu. You can use the `ListView` widget to
create a scrollable list of items
● Add a Scaffold with an App Bar:
○ Wrap your app's main content with a `Scaffold` widget.
○ Add an `AppBar` to your `Scaffold` if you don't have one
already.
○ Assign the `drawer` property of the `Scaffold` to the `Drawer`
widget you created earlier.
● Run Your App

CONCLUSION:

R1 R2 R3 Total Signature
(5 Marks) (5 Marks) (5 Marks) (15 Marks)
 EXPERIMENT NUMBER 5
Date of Performance :

Date of Submission :
AIM: To create an interactive Form using form widget

THEORY: In flutter the form widget is used to build a form that can be used
to collect user input. A form widget contains one or more ‘FormFilled’
widgets, which are used to define individual input field in the form.Each
individual form field should be wrapped in a ‘FormField’ widget, with the
‘Form’ widget as a common ancestor of all of those. Call methods on
‘FormState’ to save, reset, or validate each ‘FormField’ that is a descendant
of this ‘Form’.

PROCEDURE:
Step1: Create a Flutter Project
Step2: Open the Project in Your Preferred Code
Editor Step3: Design Your Interactive Form:
In Flutter, you can use various form-related widgets to build your
interactive form. Some commonly used form-related widgets include:
● Form: The ‘Form’ widget is the container for your form and
manages the form's state.
● TextFormField: Use TextFormField to create text input fields.
You can customize it with validation and other properties.
● Checkbox: To create checkboxes for multiple choices.
● Radio: For creating radio buttons for single choices.
● DropdownButton: To create dropdown
menus. Step4: Run the Flutter App
Step5: Test and Interact with Your Form
CONCLUSION:

R1 R2 R3 Total Signature
(5 Marks) (5 Marks) (5 Marks) (15 Marks)
 EXPERIMENT NUMBER 6

Date of Performance :

Date of Submission :
AIM: To apply navigation, routing and gestures in Flutter app

THEORY:
Navigation and Routing:
Navigation and routing are used to move from one screen to another in a
flutter app. Flutter provides several navigation widget such as
‘Navigator’,’MaterialPageRoute’,etc. ‘Navigator’ manages a stack of ‘route’
objects that presents screen or pages.
Step 1: Create a New Flutter
Project Step 2: Define the Screens
● In your Flutter project, you'll typically have multiple screens or
pages. Define these screens as separate widgets.
Step 3: Set Up Routes
● In your Flutter app, define the routes to map screen names to
screen widgets. This is typically done in the ‘main.dart’ file within
the ‘MaterialApp’ widget:
Step 4: Navigate to a Screen
● To navigate from one screen to another, use the ‘Navigator.push’
method with the desired route name. In the ‘HomeScreen’ widget, we
used this to navigate to the ‘SecondScreen’:
○ Navigator.push(
○ context,
○ MaterialPageRoute(builder: (context) => SecondScreen()),
○ );
Step 5: Return to the Previous Screen
● To navigate back to the previous screen, use ‘Navigator.pop’:
○ Navigator.pop(conte
xt); Step 6: Run Your Flutter App

Gestures:
Gestures are used to detect user input on the screen such as taps, swipes
and drags. Flutter provides several gestures widgets such as
‘GestureDetector’ ‘Draggable’ and more. ‘GestureDetector’ is the most
commonly used for detecting gestures. It allows you to detect a variety of
the gestures and customize their behavior.
Step 1: Create a New Flutter
Project Step 2: Import the Gesture
Detector:
 ● In Flutter, you can use the ‘GestureDetector’ widget to wrap other
widgets and detect various gestures such as taps, drags, and swipes.
Make sure to import the ‘flutter’ package.
○ import
'package:flutter/material.dart'; Step 3:
Wrap a Widget with GestureDetector:
● Wrap the widget that you want to make interactive with the
‘GestureDetector’ widget. You can use various gesture properties and
callbacks to handle different types of gestures.
Step 4: Handle Other Gestures
● Flutter provides other gesture-related callbacks for various
gestures, such as ‘onDoubleTap’, ‘onLongPress’, and
‘onVerticalDrag’
Step 5: Run Your Flutter App

CONCLUSION:

R1 R2 R3 Total Signature
(5 Marks) (5 Marks) (5 Marks) (15 Marks)
 EXPERIMENT NUMBER 7

Date of Performance :

Date of Submission :
AIM: To connect Flutter UI with Firebase database

THEORY: Firebase is very easy to use for beginners, it provides many

functionalities like Firebase Authentication, Cloud Firestore, Realtime
Database, Firebase Storage, etc which help to build and optimize the
application.

Step1: Set Up a Firebase Project:

● If you haven't already, create a Firebase project in the Firebase
Console: ‘https://console.firebase.google.com/’

Step 2: Add Your Flutter App to Firebase

● In the Firebase Console, click "Add app" and select the Flutter platform.
● Follow the setup instructions to add the configuration files to your Flutter
project.

Step 3: Add Firebase Dependencies to Your Flutter Project

● In your Flutter project's ‘pubspec.yaml’ file, add the Firebase
dependencies:
○ dependencies:
○ flutter:
○ sdk: flutter
○ firebase_core: ^latest_version
○ cloud_firestore: ^latest_version
Run ‘flutter pub get’ to fetch the dependencies.

Step 4: Initialize Firebase

● In your Flutter app's entry point (usually ‘main.dart’), initialize
Firebase using ‘Firebase.initializeApp()’

Step 5: Create a Firestore Database

● In the Firebase Console, navigate to "Firestore Database" and
create a new database.
● Choose the security rules that best fit your application's needs.

Step 6: Connect Your Flutter UI to Firestore

● Now, you can interact with Firestore from your Flutter app to read and
write data.
Step 7: Read Data from Firestore
● To read data from Firestore, you can use a

‘StreamBuilder’ widget Step 8: Run Your Flutter App

CONCLUSION:

R1 R2 R3 Total Signature
(5 Marks) (5 Marks) (5 Marks) (15 Marks)
 EXPERIMENT NUMBER 8

Date of Performance :

Date of Submission :
AIM: To test and deploy production ready Flutter app on Android platform

THEORY: Now our app is completed with front and backend now it's time to
deploy it for user use, follow the following steps to deploy the Flutter app:

1. Develop Your Flutter App:

● Write and test your Flutter app code using the Flutter
framework and Dart programming language.

2. Prepare Your App for Release:

● Make sure your app is optimized, stable, and ready for production.
● Remove any debug-related code or logs.
● Configure app icons and splash screens.
● Update the app's version and build numbers in the ‘pubspec.yaml’ file.

3. Generate a Keystore (for signing):

● Create a keystore file to sign your app. You can use the ‘keytool’
command-line tool that comes with the Java Development Kit (JDK).
○ ‘keytool -genkey -v -keystore my-release-key.keystore -keyalg RSA
-keysize 2048 -validity 10000 -alias my-key-alias’

4. Configure Build Settings:

● In your Flutter project's ‘android/app/build.gradle’ file,
configure the signingConfigs to use the keystore you
generated in the previous step.

5. Build the Release Version:

● Build the release version of your app using the following command:
○ `flutter build apk --release`

6. Test Your Release Build:

● Before deploying to production, test the release build of your app
thoroughly to ensure there are no issues.

7. Deploy
CONCLUSION:

R1 R2 R3 Total Signature
(5 Marks) (5 Marks) (5 Marks) (15 Marks)
 EXPERIMENT NUMBER 9

Date of Performance :

Date of Submission :

AIM: To create a responsive User Interface using jQuery Mobile/ Material UI/
Angular UI/React UI for Ecommerce application.

THEORY:
React Native : React Native is a popular Framework which was designed by
Facebook to build mobile applications. Earlier frameworks used to have a
WebView based design but react native is primarily build using native
capabilities of mobile. The best react native are platform agnostic which
means the same application can be build on Android as well as iOS. This
saves time, money and allows you to have zero code duplications.

Using Material-UI for React:

Material-UI is a popular UI framework for building React applications with
a Material Design look and feel.

1. Setup:
● Create a React project if you haven't already: ‘npx create-
react-app ecommerce-app’
● Install Material-UI: ‘npm install @mui/material @mui/icons-material’
2. Building the UI:
● Design your e-commerce app's UI using Material-UI components like
‘AppBar’, ‘Drawer’,’ Card’,’ Button’, and more.
● Organize your UI components into a responsive layout using ‘Grid’ or
‘Container’ components to adapt to different screen sizes.
CONCLUSION:

R1 R2 R3 Total Signature
(5 Marks) (5 Marks) (5 Marks) (15 Marks)
 EXPERIMENT NUMBER 10
Date of Performance:

Date of Submission:

AIM: To write meta data of your ECommerce PWA in a web app manifest file
to enable “add to home screen feature”

THEORY: To enable the "Add to Home Screen" feature for your E-commerce
Progressive Web App (PWA), you need to create and configure a web app
manifest file. This file contains metadata about your PWA, including
information about how it should appear when added to a user's home screen.
Here are the steps to write the metadata for your E-commerce PWA in a web
app manifest file:
1. Create a Manifest File:
● If you don't already have one, create a file named ‘manifest.json’
in the root directory of your web application.
2. Basic Manifest Structure:
● Begin your’ manifest.json’ file with the basic structure
3. Include Additional Icons:
● You should include multiple icons in different sizes and formats to
support various devices. Add them to the ‘icons’ array as needed.
4. Link to Manifest in HTML:
● In your HTML file's <head> section, include a link to your manifest file:
○ <link rel="manifest" href="/manifest.json">
5. Ensure HTTPS:
● PWAs, including the "Add to Home Screen" feature, require your
website to be served over HTTPS for security reasons.
6. Test and Validate:
● Test your PWA on various browsers and devices to ensure that the
"Add to Home Screen" feature works correctly.
● You can use tools like Lighthouse to validate your manifest file and PWA.
CONCLUSION:

R1 R2 R3 Total Signature
(5 Marks) (5 Marks) (5 Marks) (15 Marks)
 EXPERIMENT NUMBER 11

Date of Performance:

Date of Submission:

AIM: To code and register a service worker, and complete the install and
activation process for a new service worker for the E-commerce PWA

THEORY: To code and register a service worker for your E-commerce

Progressive Web App (PWA), as well as complete the install and activation
process, follow these steps:

1. Create a Service Worker File:

● Create a new JavaScript file (e.g., ‘service-worker.js’) in your
project's root directory. This file will contain your service worker
code.

2. Register the Service Worker:’

● In your main HTML file (usually ‘index.html’), add the code within a
script tag to register the service worker

3. Service Worker Code (service-worker.js):

● Within your ‘service-worker.js’ file, you need to define the
following lifecycle events for service workers:
○ install: This event is fired when the service worker is first installed.
○ activate: This event is fired when the service worker is
activated, usually after installation.

4. Testing and Debugging:

● Open your website in a browser and check the browser's DevTools to
see if the service worker is registered and functioning correctly.
● Debug and test the caching and service worker behavior to ensure it's
working as expected.

5. HTTPS Requirement:
● Ensure that your website is served over HTTPS, as service workers
are only available in secure contexts for security reasons.

6. Updating the Service Worker:

 ● When you make changes to your service worker or the resources it
caches, increment the cache version (‘cacheName’) in your ‘service-
worker.js’ file. This will trigger the installation of the new service
worker.

CONCLUSION:

R1 R2 R3 Total Signature
(5 Marks) (5 Marks) (5 Marks) (5
Marks)
 EXPERIMENT NUMBER 12
Date of Performance:

Date of Submission:

AIM: To study and implement deployment of Ecommerce PWA to GitHub pages

THEORY: Deploying your E-commerce Progressive Web App (PWA) to GitHub

Pages involves a series of steps. Here's a guide to help you study and
implement the
deployment process:

1. Create a GitHub Repository:

● If you haven't already, create a GitHub repository for your project.
Make sure to include all the necessary files, including your PWA
source code, web app manifest, and any other assets.

2. Configure the GitHub Repository:

● Go to your GitHub repository's settings and scroll down to the
"GitHub Pages" section.
● Under the "Source" section, choose the branch you want to deploy
(usually the ‘main’ or ‘master’ branch).
● Optionally, select a custom domain if you have one.

3. Build Your PWA:

● Ensure that your E-commerce PWA is ready for deployment. This
includes testing, optimizing assets, and making sure it works as
expected.

4. Configure Your PWA for GitHub Pages:

● Ensure that your web app manifest file (‘manifest.json’) and any
paths in your PWA code (like service worker registration) are
configured correctly to work on the GitHub Pages domain.

5. Build Your PWA for Production:

● If you haven't already, build your PWA for production. This
typically involves minifying and bundling your code and assets.

6. Commit and Push Your Code:

● Commit your changes and push them to your GitHub repository.
○ git add .
○ git commit -m "Prepare for GitHub Pages deployment"
 ○ git push origin main

7. Deploy Your PWA:

● GitHub Pages should automatically start the deployment process
once you've configured it. It may take a few minutes for your PWA
to be accessible.

CONCLUSION:

R1 R2 R3 Total Signature
(5 Marks) (5 Marks) (5 Marks) (15 Marks)