The codebase comes with the following features with particular Flutter packages, including:

$$

State management and dependency injection functionalities using Provider $4\mathrm{.}0$

$$

Sending $($and receiving$)$ HTTP requests $($and responses$)$ using HTTP package

$$

Service locator using Get$\_$it package

The codebase has been structured with an MVVM architecture which consists of the following components:

$$

model $($see file lib$/$models$/$note$.$dart$)$

$$

service $($see the file lib$/$services$/$note$/$note$\_$service.dart$)$

$$

viewmodel $($see file lib$/$screens$/$viewmodel$.$dart$)$

$$

view $($see file lib$/$screens$/$view$.$dart$)$

Question

Using the Flutter framework and an MVVM architecture, develop a mobile application that provides basic features for note taking such as fetching notes from a database, adding new notes, updating and deleting notes.

Details of requirements of the application are given in the following sub$-$sections. Some of them have been provided in the codebase and you are not expected to anything on them. Things that you need to accomplish in this exercise are labelled as tasks, for example Task $1,$ Task $2,$ and so on$.$

Model

A model class named Note has been provided in the codebase. See the file lib$/$models$/$note$.$dart. You are not expected to do anything on the file. However, if you need to add something to the class, you may do so$.$ This is the only model class needed in this project.

Database and Data Service

As for the database, you will test the application on two types of databases:

$$

a mock database.

The database is stored internally as a list in memory. You should expect that the data will be lost once the app closes.

$$

a RESTful database.

The database is stored in a $$real$$ database system. That means, all changes made on the database will remain after the application closes. Here, you will be using a local JSON server for provisioning the backend RESTful service. A sample database has been provided for this purpose in the codebase $($see the file backend$/$json$-$server$/$db$.$json$).$

Regarding the two types of databases above, you will need to test only one type of database at a time. That means, you will need to switch services from one to another and this can be done simply by hard coded in the service registrations $($see file lib$/$app$/$service$\_$locator.dart$).$

Task $1.$

Define two service classes below:

a$.$

Mock service $($with internal memory database$)$

Complete the file lib$/$services$/$note$/$note$\_$service$\_$mock.dart

b$.$

RESTful service

Complete the file lib$/$services$/$note$/$note$\_$service$\_$rest.dart

Two classes have been provided in the codebase to help you accomplishing this task, NoteService $($in note$\_$service.dart$),$ an abstract class for the two services above to extend from, and RestService $($in rest.dart$)$ to handle communications with the backend via the REST style.

Viewmodel

You should separate code about business logics and state management from the user interface code. In this regard, put those code into viewmodels. You will need to define only a viewmodel for this project.

Task $2.$

Define a viewmodel for the main screen. Complete the class in the file lib$/$screens$/$main$/$main$\_$viewmodel.dart. The class should include:

a method that handles fetching notes

a method that handles adding a new note

a method that handles deleting a note

e$.$

a method that handles updating a note

You may add any additional attributes and methods to the class whenever necessary.

User Interfaces and Views

The application has only one screen, which is composed of three main components, app bar, body and floating action button as shown in Figure $1.$ The app bar is composed of an application title and the number of notes. The body is composed of a list of tiles. Each list tile can be of a normal list tile which shows the note$$s information $($Figure $1)$ or an editable list tile in which allows editing $($Figure $2).$ The floating action button component consists of only a button.

Task $3.$

Define all the views of main screen which include following.

a$.$

App Bar

Complete the file lib$/$screens$/$main$/$main$\_$app$\_$bar.dart

b$.$

Body

Complete the file lib$/$screens$/$main$/$main$\_$body.dart

c$.$

Note Tile $($for regular or normal list tile$)$

Complete the file lib$/$screens$/$main$/$note$\_$tile.dart

d$.$

Note Editor Tile $($for editable list tile$)$

Complete the file lib$/$screens$/$main$/$note$\_$editor$\_$tile.dart

e$.$

Floating action button

Complete the file lib$/$screens$/$main$/$main$\_$float.dart

Task $4.$

Implement the operations of the application:

a$.$

When a note tile is long pressed $,$ it will switch to an editable list tile allowing the user to edit the note. Long pressing on the same note tile will switch back to a normal list tile.

b$.$

In editing mode, the note can be edited and it will reflect the changes on the user interface as well as in the database.

c$.$

When the delete button is tapped on$,$ it will remove the note from the database and reflect the changes on the user interface.

d$.$

When the add button is tapped on$,$ it will a new note into the database and reflect the changes on the userFigure $1$: Main components