APPLICATION DEVELOPMENT

USING FLUTTER
This presentation covers a summer internship focused on
developing four diverse mobile applications using Flutter. The
project demonstrated Flutter's capabilities for cross-platform
development with native-like performance.

by Kota Om Srikar(Y22CS094)
 CONTENTS:
1. Abstract
2. Introduction to Flutter
3. Flutter Architecture
4. Widget-Based UI
5. App Architecture and Workflow
6. Comparison with other platforms
7. Key Algorithms and Data Management
8. Performance Results
9. Cross-Platform Consistency
10.Conclusion
 Abstract

In recent years, it is difficult to develop applications for both iOS

and Android within less time. To overcome this, Google introduced a new
framework called Flutter.

It is a new reactive framework and platform for building high-

performance and beautiful mobile apps. It is used extensively at Google to
build business-critical apps, and by third-party developers to build popular
apps. It is also used as a SDK which provides the support to build beautiful
mobile apps in record time.

Flutter is highly customizable, which allows it to build apps that

are brand-centric, or with the look and feel of native Android and iOS apps
from a single code base.
Introduction to Flutter
Flutter is Google's UI toolkit for building natively compiled
applications across mobile, web, and desktop from a single
codebase. It uses the Dart programming language and offers fast
development with a rich set of pre-designed widgets.

1 Cross-Platform 2 Fast Development

Build apps for iOS, Hot reload feature allows
Android, web and desktop quick experimentation
from one codebase. and bug fixes.

3 Expressive UI 4 Native Performance

Rich set of customizable Apps compile directly to
widgets for building native code for high
native interfaces. performance.

4
Flutter Architecture
Flutter's architecture consists of the Dart framework, Flutter engine, and
platform-specific embedders. This layered approach allows for efficient
rendering and platform integration.

1 Dart Framework
Provides the foundation for building Flutter apps using Dart
language.

2 Flutter Engine
Handles low-level rendering using Skia graphics library and
interfaces with platform SDKs.

3 Platform Embedders
Integrate Flutter with specific platforms like Android, iOS, and
web.
 Widget-Based UI
Flutter uses a widget-based approach for building UIs. Everything in Flutter is a widget, from layout elements to
styling and animations. This consistent model simplifies development and customization.

Stateless Widgets Stateful Widgets

Immutable widgets that describe part of the user Mutable widgets that can change dynamically. Maintain
interface. Rebuild when configuration changes. state separately from the widget configuration.

6
App Architecture and Workflow
The apps followed a common architecture with presentation, business logic, and data layers.
Workflows varied by app complexity, from simple state updates to multi-step processes with
data persistence.

User Input
User interacts with the app interface.

State Update
App state is updated based on user actions.

UI Refresh
Interface is redrawn to reflect new state.

Data Persistence
Changes are saved locally or to remote storage.
1.React Native
React Native allows native applications to be built using
JavaScript. The actual controls the application uses are native
platform controls, so the end user gets the feel of a native app.
For apps that require customization beyond what React Native’s
abstraction provides, native development could still be needed.
In cases where the amount of customization required is
substantial, the benefit of working within React Native’s
abstraction layer lessens to the point where in some cases
developing the app natively would be more beneficial.

2.Xamarin
There are two different approaches that need to be evaluated.
For their most cross-platform approach, there is
Xamarin.Forms. Although the technology is very different to
React Native, conceptually it offers a similar approach in that it
abstracts native controls. Likewise, it has similar downsides
with regard to customization.
Unlike these alternatives, Flutter attempts to give developers a
more complete cross-platform solution, with code reuse, high-
performance, fluid user interfaces, and excellent tooling.
 Task Sorting Algorithm (To-Do List App):
dart
List<Task> sortTasks(List<Task> tasks) {
return tasks.sort((a, b) {

Key Algorithms and Data if (a.isCompleted == b.isCompleted) {

return a.dueDate.compareTo(b.dueDate);
}

Management return a.isCompleted ? 1 : -1;

});
}
This algorithm sorts tasks by completion status and due date, ensuring
that incomplete tasks appear first, sorted by their due dates.
The project implemented various algorithms for task sorting, recipe Recipe Search Algorithm (Recipe App):
searching, expense summarization, and playlist shuffling. Data dart
management solutions included local databases, SharedPreferences, List<Recipe> searchRecipes(String query, List<Recipe> allRecipes) {
return allRecipes.where((recipe) =>
and file system interactions. recipe.name.toLowerCase().contains(query.toLowerCase()) ||
recipe.ingredients.any((ingredient) =>
ingredient.toLowerCase().contains(query.toLowerCase())
)
Task Sorting Recipe Search ).toList();
}
Sorts tasks by completion Filters recipes based on name This algorithm filters recipes based on a search query, matching against
recipe names and ingredients. 20
status and due date. and ingredients.
Expense Summarization Algorithm (Personal Expense Tracker App):

dart
Expense Summarization Map<String, double> summarizeExpenses(List<Expense> expenses,
DateTime start, DateTime end) {
Summarizes expenses by return expenses
.where((e) => e.date.isAfter(start) && e.date.isBefore(end))
category within a date range. .fold<Map<String, double>>({}, (sum, e) {
sum[e.category] = (sum[e.category] ?? 0) + e.amount;
return sum;
});
}
Performance Results
The apps demonstrated excellent performance across various
metrics. Startup times ranged from 0.8 to 2.5 seconds, with
consistent 60fps rendering. Memory usage varied by app
complexity, from 30MB for the counter to 100MB for the music
player.
App Startup Time Memory Usage

To-Do List 1.0s 45MB

Counter 0.8s 30MB

Recipe 2.0s 60MB

Expense Tracker 1.8s 55MB

Music Player 2.5s 70-100MB

 Cross-Platform Consistency
Flutter enabled near-identical behavior and appearance across Android and iOS platforms. This consistency was achieved
with minimal platform-specific code, even for system-intensive apps like the music player.

UI Consistency Code Sharing

Identical user interfaces across platforms with Flutter's High percentage of shared code between Android and iOS
widget system. versions.
To-Do List App: Recipe App:
 Recipe Search Expense Tracker

GitHub repository Link: https://github.com/KOTA-OMSRIKAR/CODSOFT

Conclusion and Future Work
The internship successfully demonstrated Flutter's capabilities for
efficient cross-platform development. Future work could include cloud
synchronization, advanced animations, API integration, and exploring
Flutter's web and desktop capabilities.

1 Efficient Development 2 Cross-Platform

Success
Flutter enabled rapid
creation of diverse, high- Achieved consistent
performance apps. behavior and appearance
across Android and iOS.

3 Future Enhancements
Potential for cloud features, animations, and expansion to
web/desktop platforms.