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

Image for post
Image for post

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

Image for post
Image for post

We will learn how to use:

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

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

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 folder create a new one named

In the folder create a new one named

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 folder add a new file named 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 cleanflutter packages pub run build_runner build --delete-conflicting-outputs

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

  • containing the model proxy and the related mixin
  • containing the and

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: . Press Enter. An input field will ask for the Independent model name in pascal case. Type , 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 folder add a new file with the following content:

In the folder add a new file 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 folder add a new file with the following content:

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

In order to handle the rows UI we will add, in the folder a new file named . 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 folder, we will create a new file name

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

That’s it!

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

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store