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 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.

BACKEND 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/