A simple CRUD Flutter application with f-orm-m8-sqlite

In this article we will learn to quickly create a simple CRUD application using the f-orm-m8-sqlite.

We will learn how to use:

• f-orm-m8 framework to annotate models
• f-orm-m8-sqlite to generate sqlite fixture
• Flutter ORM M8 Generator a Visual Studio Code extension (optional step for VS Code fans)

First, I will give you some clues on the meaning of f-orm-m8. As its name suggests, it is an ORM, a simple one with a simple annotation set (DataTable and DataColumn). Moving forward with the story line f-orm-m8-sqlite is a f_orm_m8 implementation for Sqlite, with mapping capability out of the box. And finally the VS Code extension that eases the generation of new models and sqlite fixture.

The application will be as simple as possible with a single screen and will be developed following an MVP design pattern with a Model, a View and a Presenter.

Step 1. A Flutter project

Start a new Flutter project in your preferred IDE (VS Code or Android Studio). Name the project hello_world_f_orm_m8

Step 2. The prerequisites

If you give a try to VS Code extension you may skip this step.

a. Add f_orm_m8, sqflite, build_runner, f_orm_m8_sqlite dependencies to pubspec.yaml

Before

The original pubspec.yaml

After

The pubspec.yaml after adding dependencies

b. Refresh packages. In a terminal console, in order to install newly added dependencies, run:

flutter packages get

Step 3. The Model

If you give a try to VS Code extension you may skip this step too.

In the lib folder create a new one named models

In the lib/models/ folder create a new one named independent

To keep the simplicity as the leading word we will use a model implementing DbEntity (which constraints a model with a mandatory integer id field). In the lib/models/independent folder add a new file named gym_location.dart with the following content:

lib/models/independent/gym_locatio.dart content

You may notice the DataTable and DataColumn annotations. If you want to learn more on the annotation conventions visite f-orm-m8 page. The new model contains two fields: id and description.

Step 4. Generating the sqlite fixture

If you give a try to VS Code extension you may skip this step too.

The added dependencies take care of the scaffolding. You must run two commands in the terminal console:

flutter packages pub run build_runner clean
flutter packages pub run build_runner build --delete-conflicting-outputs

After the execution of the commands two new files will be automatically generated:

• lib/models/independent/gym_location.g.m8.dart containing the model proxy and the related mixin
• lib/main.adapter.g.m8.dart containing the databaseAdapter and databaseProvider

Step 2, 3, 4 wrapped in VS Code extension

Using the dedicated VS Code extension Flutter ORM M8 Generator (installation instructions are available on the provided link) the steps trinity will be replaced by a single command. Go to View/Command Pallette and type: f-orm-m8: Generate Sqlite Fixture. Press Enter. An input field will ask for the Independent model name in pascal case. Type GymLocation, press Enter to confirm, followed by Escape two times (one to quit the Independent stage and the second to cancel Account Related models as we don’t require for the purpose of this article)

The extension will do its job and will automatically add the dependencies and will generate the same files as step 3 and step 4. As you can see in the video above, the tool will confirm tasks completion with the message “All tasks completed”.

Note: The extension generates models with a naming convention based on the class name provided by the user. Each class will have the mandatory fields according to its type (in our case the id). A default description field is added. All supported types are also added and marked as ColumnMetadata.ignore. So don’t be scared if you will find your model populated by the following content, because it does not harm your code in any way.

Step 5. Prepare for MVP

We will prepare ourselves to a Model-View-Presenter application architecture. We will add folders and interfaces.

In the lib folder create two new folders:

• presenters
• views

In the presenters folder add a new file abstract_presenter.dart with the following content:

In the views folder add a new file abastract_view.dart with the following content:

At this stage we have all the gems to start the concrete implementation.

Step 6. The concrete implementation

We will not insist on UI format because this is a subject for other articles. The aim of this article is to provide a start form which handles all the CRUD operations.

In the presenters folder add a new file gym_location_page.dart with the following content:

As you can see, for the model we are using the GymLocationProxy which was generated based on our GymLocation model blueprint. For all the database operations we will use the DatabaseProvider instance.

In order to handle the rows UI we will add, in the views folder a new file named gym_location_row.dart . It renders the description field and provides two buttons for edit and delete. It uses two callbacks to notify the parent. The content is:

For the main form, in the views folder, we will create a new file name gym_location_page.dart

To route the main application to the Gym Location page, change main.dart as it follows:

That’s it!

All the code provided is open source. The full source may be found on GitHub