Make a Flet CRUD App

Coming Soon

September 21, 2024

You will learn how to make a Flet CRUD app Peewee ORM.

Note

You will be able to purchase the full app with the UI on the Dev Shop (Coming Soon)

What you will need:

• Flet - Library for building mobile and desktop apps in Python
• Peewee ORM - A small and intuitive Sqlite ORM for persistent relational DB storage

Data Models

This app will have one-to-one and many-to-many relationships.

Person

A task to complete

Column	Type	Description
id	int	unique id for the person
first_name	text	unique first name for the person
last_name	text	unique first name for the person
password	text	password for the person
info_id	int	More information about the person

Item

A generic item. Edit these fields to your needs

Column	Type	Description
id	int	unique id for the person
name	text	unique name for the item
description	text	password for the item
image	text	url to image for item
numeral	int	a number
numeral_name	text	the name of the numeral
created_at	text	date item was created
updated_at	text	date item was updated
...	...	...

PersonItems

A person has many items and an item belongs to many persons.

Column	Type	Description
id	int	unique id for the person detail
person_id	text	id of the person
item_id	text	id of the item

PersonInfo

More details about a person. Edit these fields to your needs

Column	Type	Description
id	int	unique id for the person's info
person_id	text	id of the person
...	...	...

UI/UX

Mockup By SaaSProduct

Requirements

Functional Requirements

• CRUD

Non Functional Requirements

• Beautiful - Nice looking UI
• Useful - could be used for real work
• Stable - No bugs

Technical Requirements

• Desktop
• Responsive

Business Rules

These business rules were generated by Google Gemini. These are only ideas for future features and are not included in this project (TBA):

Create a new Flet App

Create the folders for your Flet app. You should be able to copy the content below and paste it into your terminal. You can also create the folders manually using your mouse and keyboard. the app_name/ folder can be called whatever the name of your app is. For example you can do mkdir inventory_app instead of mkdir app_name.

mkdir app_name
cd app_name
touch main.py
touch config.py
mkdir assets
mkdir assets/images
mkdir assets/docs
mkdir components
touch components/base.py
mkdir business
touch business/base.py
mkdir db

This is the folder structure of the app. The data.db file will be created in main.py

	app_name/
		assets/
            images/
            docs/
        components/
            base.py
        business/
            base.py
        db/
            data.db
		main.py
		config.py

Install dependencies

pip3 install flet
pip3 install peewee

The Code

Copy the code in the files below to the appropriate files in your project.

main.py

from flet import *
from peewee import SqliteDatabase,Model,CharField,DateField,ForeignKeyField
from datetime import date
from pathlib import Path

def main(page):
    # db_path = Path(__file__).parent.joinpath("db/data.db")
    db = SqliteDatabase("db/data.db")
    
    class BaseModel(Model):
        class Meta:
            database = db
    
    class PersonInfo(BaseModel):
        address = CharField()

    class Person(BaseModel):
        first_name = CharField()
        last_name = CharField()
        birthday = DateField()
        info = ForeignKeyField(PersonInfo, backref='person')

    class Item(BaseModel):
        owner = ForeignKeyField(Person, backref='items')
        name = CharField()
        item_type = CharField()

    class PersonItems(BaseModel):
        owner = ForeignKeyField(Person, backref='items')
        item = ForeignKeyField(Item, backref='items')
    
    db.create_tables([Person, Item, PersonItems,PersonInfo])

    first_name = TextField(label="First name", autofocus=True)
    last_name = TextField(label="Last name")
    people = Column()
    
    def delete_person(e):
        # page.add(Text("Action clicked: " + e.control.text))
        person = Person.select().where(Person.first_name == e.control.text).get()
        person.delete_instance()
        people.controls = [Row([TextButton(person.first_name,on_click=delete_person),TextButton(person.last_name)]) for person in Person.select()]
        page.update()
    
    people.controls = [Row([TextButton(person.first_name,on_click=delete_person),TextButton(person.last_name)]) for person in Person.select()]

    def btn_click(e):
        information = PersonInfo(address="123 safe street")
        information.save()
        uncle_bob = Person(first_name=first_name.value, last_name=last_name.value, birthday=date(1960, 1, 15),info=information)
        uncle_bob.save() # bob is now stored in the database
        first_name.value = ""
        last_name.value = ""
        first_name.focus()
        people.controls = [Row([TextButton(person.first_name,on_click=delete_person),TextButton(person.last_name)]) for person in Person.select()]
        page.update()

    page.add(
        first_name,
        last_name,
        Text("Click first name to delete"),
        ElevatedButton("Create", on_click=btn_click),
        people
    )

app(target=main)

Test the App

flet run

Publish the App

The app will be published to dist/main.app

flet pack main.py

Notes

I really enjoyed this project. Flet and the Peewee ORM work really well together. One thing to consider with Flet is that it does take some time to load.

Update - Oct 15, 2024

In order to package the app for the newest version of flet, I had to make sure pyinstaller was installed and I used it to package the app. The flet pack main.py command didn't work for me.

I exported the directory I wanted to use to store the apps data

export FLET_APP_DATA = '/Users/username/Desktop/app_directory/data'

Then I updated the path to the SQlite database:

os.environ['FLET_APP_DATA'] = "/Users/username/Desktop/app_directory/data"
db = SqliteDatabase(os.environ['FLET_APP_DATA'] + "/data.db")

Now to package the app:

pip3 install pyinstaller
pyinstaller --onefile --windowed main.py

Resources

• Controls
• Icons
• Colors
• Publish
• Custom Flet UI Elements