VISVESVARAYA TECHNOLOGICAL UNIVERSITY

Jnana Sangama, Santhibastawad Road, Machhe

Belagavi - 590018, Karnataka, India

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
INFORMATION SCIENCE AND ENGINEERING
For the Academic Year 2021-2022
Submitted by

Nischitha M Ragi 1JS18IS060

Shilpa V 1JS18IS081
Spoorthi Kulkarni 1JS18IS091
Srivasu U Vasista 1JS18IS094
Vinayak S 1JS18IS123
Under the Guidance of
Dr. Dayananda P
Professor, Dept. of ISE, JSSATE

2021-2022
DEPARTMENT OF INFORMATION SCIENCE AND ENGINEERING
JSS ACADEMY OF TECHNICAL EDUCATION
JSS Campus, Dr.Vishnuvardhan Road, Bengaluru-560060
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/