AVN INSTITUTE OF ENGINEERING AND TECHNOLOGY

RAMDASPALLY-HYDERABAD

USER INTERFACE DESIGN (18CS734)

ACTIVITY REPORT
ON
“TO-DO Application Using Flutter”
Submitted in the partial fulfillment of the requirements for the award of the
degree of

BACHELOR OF ENGINEERING
IN
ARTIFICIAL INTELLIGENCE AND MACHINE LEARNING
For the Academic Year 2024-2025
Submitted by

SRAVANI 225U1A6614

TO DO FLUTTER
ABSTRACT
Having known that there is always a list of jobs to be done for all of us, a number
of events to be attended
and a lot of deadlines to be reached, there is a huge possibility of missing out on
things, which would be
erroneous. Running on these errands might be tedious without a systematic plan. A
To-Do Application
gives the service to list down these errands efficiently and plan out the day
comprehensively. One can list
out the errands to run, give due time and date for each of them, and then mark them
as 'completed' once
done.

1. INTRODUCTION

• FLUTTER:

Flutter is an open-source UI software development kit created by Google. It is used

to develop cross
platform applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia, Web
platform, and the
web from a single codebase. The first version of Flutter was known by the codename
"Sky" and ran on
the Android operating system. It was unveiled at the 2015 Dart developer summit
with the stated intent
of being able to render consistently at 120 frames per second.
The major components of Flutter include:
Dart platform
Flutter engine
Foundation library
Design-specific widgets
Flutter Development Tools (DevTools)
Flutter uses a variety of widgets to deliver a fully functioning application. These
widgets are Flutter's
framework architecture. Flutter's Widget Catalog provides a full explanation and
API on the framework.
• DART:

Dart is a programming language designed for client development, such as for the web
and mobile apps.
It is developed by Google and can also be used to build server and desktop
applications.
Dart is an object-oriented, class-based, garbage-collected language with C-style
syntax. Dart
can compile to either native code or JavaScript. It supports interfaces, mixins,
abstract
classes, reified generics, and type inference.

There are four ways to run Dart code:

✓ Web
To run in mainstream web browsers, Dart relies on a source-to-source compiler to
JavaScript. According
to the project site, Dart was "designed to be easy to write development tools for,
well-suited to modern
app development, and capable of high-performance implementations." When running
Dart code in a web
browser the code is precompiled into JavaScript using the dart2js compiler.
Compiled as JavaScript,
Dart code is compatible with all major browsers with no need for browsers to adopt
Dart. Through
optimizing the compiled JavaScript output to avoid expensive checks and operations,
code written in
Dart can, in some cases, run faster than equivalent code hand-written using
JavaScript idioms.
 ✓ Stand-alone
The Dart software development kit (SDK) ships with a stand-alone Dart VM, allowing
Dart code to run
in a command-line interface environment. As the language tools included in the Dart
SDK are written
mostly in Dart, the stand-alone Dart VM is a critical part of the SDK. These tools
include the dart2js
compiler and a package manager called pub. Dart ships with a complete standard
library allowing users
to write fully working system apps, such as custom web servers.[25]

✓ Ahead-of-time compiled
Dart code can be AOT-compiled into machine code (native instruction sets). Apps
built with Flutter, a
mobile app SDK built with Dart, are deployed to app stores as AOT-compiled Dart
code.

✓ Native
Dart 2.6 with dart2native compiler to compile to self-contained, native executables
code. Before Dart
2.6, this feature only exposed this capability on iOS and Android mobile devices
via Flutter.

• SWIFT:

Swift is a general-purpose, multi-paradigm, compiled programming language developed

by Apple
Inc. and the open-source community. First released in 2014, Swift was developed as
a replacement for
Apple's earlier programming language Objective-C, as Objective-C had been largely
unchanged since
the early 1980s and lacked modern language features. Swift works with Apple's Cocoa
and Cocoa
Touch frameworks, and a key aspect of Swift's design was the ability to
interoperate with the huge body
of existing Objective-C code developed for Apple products over the previous
decades. It is built with the
open source LLVM compiler framework and has been included in Xcode since version 6,
released in
2014. On Apple platforms,[11] it uses the Objective-C runtime library, which allows
C, Objective-
C, C++ and Swift code to run within one program.

• ANDROID STUDIO:

Android Studio is the official integrated development environment (IDE)

for Google's Android operating system, built on JetBrains' IntelliJ IDEA software
and designed
specifically for Android development. It is available for download
on Windows, macOS and Linux based operating systems or as a subscription-based
service in 2020. It is
a replacement for the Eclipse Android Development Tools (E-ADT) as the primary IDE
for native
Android application development. Android Studio supports all the same programming
languages
of IntelliJ (and CLion) e.g. Java, C++, and more with extensions, such as Go; and
Android Studio 3.0 or
later supports Kotlin and "all Java 7 language features and a subset of Java 8
language features that vary
by platform version." External projects backport some Java 9 features. While
IntelliJ states that Android
Studio supports all released Java versions, and Java 12, it's not clear to what
level Android Studio
supports Java versions up to Java 12 (the documentation mentions partial Java 8
support). At least some
new language features up to Java 12 are usable in Android.

• SQLITE:

SQLite is a relational database management system (RDBMS) contained in a C library.

In contrast to
many other database management systems, SQLite is not a client–server database
engine. Rather, it is
embedded into the end program.
SQLite generally follows PostgreSQL syntax. SQLite uses a dynamically and weakly
typed SQL syntax that does not guarantee the domain integrity. This means that one
can, for example,
insert a string into a column defined as an integer. SQLite will attempt to convert
data between formats
where appropriate, the string "123" into an integer in this case, but does not
guarantee
such conversions and will store the data as-is if such a conversion is not
possible.
SQLite is a popular choice as embedded database software for local/client storage
in application
software such as web browsers. It is arguably the most widely deployed database
engine, as it is used
today by several widespread browsers, operating systems, and embedded systems (such
as mobile
phones), among others. SQLite has bindings to many programming languages.

• DB BROWSER FOR SQLITE:

DB Browser for SQLite (DB4S) is a high quality, visual, open source tool to create,
design, and edit
database files compatible with SQLite.
DB4S is for users and developers who want to create, search, and edit databases.
DB4S uses a familiar
spreadsheet-like interface, and complicated SQL commands do not have to be learned.
This program is not a visual shell for the sqlite command line tool, and does not
require familiarity with
SQL commands. It is a tool to be used by both developers and end users, and must
remain as simple to
use as possible in order to achieve these goals.

2. SYSTEM SPECIFICATIONS

▪ Flutter (Channel stable, 2.8.1, on Microsoft Windows [Version 10.0.19042.1415],

locale en-IN)
▪ Android toolchain - develop for Android devices (Android SDK version 30.0.3)
▪ Android Studio (version 2020.3)
▪ DB Browser for Sqlite [Version - 3.12.2 -win64]

Emulator Details
▪ Name: Nexus 5X API 30
▪ Resolution 1080 x 1920 420dpi
▪ API: 30
▪ Target: google_apis_playstore [Google Play] (API level 30)
▪ CPU/ABI: Google Play Intel Atom (x86)
▪ SD Card: 512M

Software Specifications
▪ Operating System: Windows 10
▪ Front end: Flutter
▪ Backend: Sqlite

Hardware Specifications
▪ Processor: 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz 2.42 GHz
▪ RAM: 550 MB or more
▪ Hard Disk: 20 GB or greater
▪ Monitor: 39.6-cm. display
▪ Keyboard: 104 keys standard
▪ Mouse: 2/3 button. Optical/Mechanical.
3. IMPLEMENTATION DETAILS

Fig : Process Architecture

UI PART IMPLEMENTATION

The designed application is programmed and executed. On successful compilation, the

app is installed in
the emulator and the screen is displayed. The first screen generally displays the
three sections – All Tasks,
Completed Tasks and Incomplete Tasks. Initially, the status variable is set to 0 by
default indicating that
there are no active tasks to be completed. A ‘+’ sign is clicked to add a new task.
On clicking, a new page
appears asking the user to enter the task title and task details. On clicking the
‘Add Task’ button, the task
is added and the status sets to 1. On adding another task, the status variable
increments. All the added
tasks are displayed on the ‘All Tasks’ section. Checking (selecting) a particular
task would mean the task
has been completed which is then viewed on the ‘Completed Tasks’ section.
Unchecking (deselecting) it
will remove that task from the ‘Completed Task’ and that is viewed on the ‘All
Tasks’ section. The
incomplete tasks can be viewed in the ‘Incomplete Task’ section.

DATABASE PART IMPLEMENTATION

✓ Steps and functionalities of SQLITE database

1. Add the dependencies.
2. Define the data model.
3. Open the database.
4. Create the tables.
5. Insert the items into the database.
6. Retrieve the list of items.
7. Update the item in the database.
8. Delete the item from the database.
✓ Steps to view the database tables.
1. Open the Device File Explorer
2. Click on data
3. Select data again
4. Search for the package name of the app(com.example.flutter_app)
5. Expand flutter assets
6. Save the database in your local folder of your choice
7. Open the database in DB Browser for SQLite
8. Left click on the respective table to click on browse table to view them

Source Code

Creation of database:

class DatabaseConnection{
setDatabase() async{
var directory = await getApplicationDocumentsDirectory();
var path = join(directory.path,'db_taskApp');
var database = await openDatabase(path,version: 1,onCreate:
_onCreatingDatabase);
return database;
}

_onCreatingDatabase(Database database,int version) async{

await database.execute("CREATE TABLE tasks(id INTEGER PRIMARY KEY
AUTOINCREMENT, "
"title TEXT, description TEXT, status INTEGER)");
}
}

Insert an element in the database

isnertDatabase(table,data) async{
var connection = await database;
return await connection.insert(table, data);
}

Read a table in the database

readData(table) async {
var connection = await database;
return await connection.query(table);
}
Read a selected element in the database

readSelectedData(status) async {
var connection = await database;
return await connection.rawQuery("select * from tasks where status =
$status");
}

Delete an item in database

deleteItem(table,id) async {
var connection = await database;
return await connection.rawDelete("DELETE FROM tasks WHERE id = $id");
}

Update an item in database

updateItem(id,status) async {
var connection = await database;
return await connection.rawUpdate("UPDATE tasks SET status = $status WHERE
id = $id");
}
4. SCREENSHOTS

• USER INTERFACE DESIGN

• LOADING OF THE APPLICATION IN THE EMULATOR

• ADDITION OF TASK WITH THE RESULT

• COMPLETED TASK PAGE

• DATABASE STORAGE AND LOCATION

• DB BROWSER FOR SQLITE

 • TASK TABLE

5. REFERENCES

▪ https://flutter.dev/development
▪ https://en.wikipedia.org/wiki/Flutter_(software)
▪ https://developers.google.com/learn/pathways/intro-to-flutter
▪ https://www.youtube.com/watch?v=xWV71C2kp38&vl=en
▪ https://plugins.jetbrains.com/plugin/9212-flutter
▪ https://developers.googleblog.com/2018/12/flutter-10-googles-portable-ui-
toolkit.html
▪ https://codelabs.developers.google.com/codelabs/first-flutter-app-pt1
▪ https://firebase.google.com/docs/flutter/setup
▪ https://www.syncfusion.com/flutter-widgets
▪ https://pub.dev/