A sharp and modern components library for Flet.
Accessible. Customizable. Open Source.

Documentation • Support Me

Installation

• from PyPI

  pip install fletmint

• from source

  git clone https://github.com/Bbalduzz/fletmint.git
  
  
  cd fletmint
  
  py311 setup.py install

Documentation

Tip	every component inherits its parent’s class methods

fletmint.Button

The Button component inherits the flet.TextButton

params

• width: int = width of the button

• height:int = height of the button

• disabled: bool = make the button disabled

• label: str = button’s label

• icon: ft.icons = button’s icon

methods

• on_click = fires when the button is clicked

example:

import flet as ft
from fletmint import *

def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.DARK
    page.bgcolor = "#22242a"

    page.add(
        ft.Row(
            [
                Button(),
                Button(disabled=True),
            ]
        )
    )

ft.app(target=main)

fletmint.TextInput

The TextInput component inherits the flet.Container

params

• prefix: Any

• suffix: Any

• on_focus_additional: Any = set a function to fire when the field is focused

• on_blur_additional: Any = set a function to fire when the field is not focused

• theme: ThemeMode

methods

• every in the TextButton

example:

import flet as ft
from fletmint import *

def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.DARK
    page.bgcolor = "#22242a"

    page.add(
        ft.Row(
            [
                TextInput(),
                TextInput(password=True)
            ]
        )
    )

ft.app(target=main)

It offers less style modifications, but enhances the flet.TextField accepting by default a prefix and a suffix:

text_input_with_suffix_and_prefix = TextInput(
    prefix=ft.Icon(name=ft.icons.SEARCH, color=ft.colors.GREY_200, size=18),
    suffix=ft.CircleAvatar(
        foreground_image_src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png",
        radius=30,
    ),
)

def show_password(e):
    e.control.parent.parent.controls[0].password ^= True
    e.control.parent.parent.controls[0].update()
    e.control.icon = (
        ft.icons.LOCK_OPEN_ROUNDED
        if e.control.icon == ft.icons.LOCK_ROUNDED
        else ft.icons.LOCK_ROUNDED
    )
    e.control.update()
password_input = TextInput(
    password=True,
    suffix=ft.IconButton(
        icon=ft.icons.LOCK_ROUNDED,
        icon_color="#e3e2e2",
        icon_size=10,
        splash_radius=0,
        on_click=show_password,
    ),
)

fletmint.TagsInput

The TagsInput component inherits the flet.Container. The tags are fletmint.Badge.

params

• max_width: int

• max_tags: int

• theme: ThemeMode

methods

example:

import flet as ft
from fletmint import *

def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.DARK
    page.bgcolor = "#22242a"

    page.add(
        TagsInput(max_width=300, max_tags=2)
    )

ft.app(target=main)

fletmint.Stepper

The Stepper component inherits the flet.Container.

params

• initial_value: int

• suffix: str

methods

example:

import flet as ft
from fletmint import *

def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.DARK
    page.bgcolor = "#22242a"

    page.add(
        Stepper(initial_value=123, suffix="px")
    )

ft.app(target=main)

fletmint.TabSwitch

The TabSwitch component inherits the flet.Container.

params

• tab_labels: list

• initial_value: 0 | 1

• theme: ThemeMode

methods

• on_switch: return the selected label

example:

import flet as ft
from fletmint import *

def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.DARK
    page.bgcolor = "#22242a"

    page.add(
        TabSwitch(
            ["Label", "Label", "Label"],
            on_switch=lambda value: print(f"Switched to tab {value}"),
        )
    )

ft.app(target=main)

fletmint.Dropdown

The Dropdown component inherits the flet.Container.

params

• controls: list = could be both plain strings or other flet components

• dropdown_icons: list[ft.icons]

• max_width: int

• theme: ThemeMode

methods

• on_select: return the selected control

example:

import flet as ft
from fletmint import *

def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.DARK
    page.bgcolor = "#22242a"

    page.add(
        Dropdown(
            max_width=250,
            controls=[
                "figma",
                "sketch",
                "invision studio",
                "framer",
                "adobe xd",
            ],
            on_select=lambda e: print(f"Selected: {e}"),
        )
    )

ft.app(target=main)

fletmint.DatePicker

The DatePicker component inherits the flet.UserControl.

params

• is_dropdown: bool = if the calendar is dropdown (default False)

• left_content: Any = set the left content of the calendars' footer

• multi_select_mode: bool = if the user can select multiple dates (default True)

• dropdown_icons: list[ft.icons]

• max_width: int = set the width of the dropdown

methods

• on_date_choosen: return the selected date/dates as a datetime object. Here you can specify the date string formatting ex. "%Y-%m-%d", "%d/%m/%Y" etc..

• on_cancel: return nothing, if datepicker is in dropdown mode it closes it

example:

import flet as ft
from fletmint import *

def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.DARK
    page.bgcolor = "#22242a"

    page.add(
        DatePicker(
            is_dropdown=False,
            multi_select_mode=True,
            on_date_choosen=lambda value: print(f"Selected dates: {value}"),
        )
    )

ft.app(target=main)

is_dropdown=False	is_dropdown=True

fletmint.Badge

The Badge component inherits the flet.Container.

The component offers predefined colors: BadgeColors.

• success: BadgeColors.SUCCESS (default)

• warning: BadgeColors.WARNING

• error: BadgeColors.ERROR

or you can define custom colors in the colors param

params

• colors: dict | BadgeColors = the dict must be in the form: {"bgcolor": "#xxxxxx", "color": "#xxxxxx"}

• badge_text: str = text inside the badge

• icon: ft.icons = icon on the right of the text

methods

• on_click: fires when the badge is clicked (check the TagsInput code to see an example)

example:

import flet as ft
from fletmint import *

def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.DARK
    page.bgcolor = "#22242a"

    page.add(
        ft.Row([
            Badge(
                badge_text="Success",
                colors=BadgeColors.WARNING,
                icon=ft.icons.CLOSE,
                on_click=lambda e: print("cliked"),
            ),
            Badge(
                badge_text="Warning",
                colors=BadgeColors.SUCCESS,
                icon=ft.icons.CLOSE,
                on_click=lambda e: print("cliked"),
            ),
            Badge(
                badge_text="Error",
                colors=BadgeColors.ERROR,
                icon=ft.icons.CLOSE,
                on_click=lambda e: print("cliked"),
            )
        ])
    )

ft.app(target=main)

fletmint.CheckBox

The CheckBox component inherits the flet.Container.

params

• disabled: bool = checkbox is disabled

• label: str = text of the right of the checkbox

• checked: bool = checkbox starts checked

• size: int = checkbox size

• font_size: int = set the label font size

• theme: str | ThemeMode = programall set the theme

methods

• on_click: fires when the checkbox is clicked

example:

import flet as ft
from fletmint import *

def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.DARK
    page.bgcolor = "#22242a"

    page.add(
        ft.Column(
            [
                CheckBox(
                    disabled=False, label="Label", checked=False, on_click=lambda e: print(e)
                ),
                CheckBox(
                    disabled=False, label="Label", checked=True, on_click=lambda e: print(e)
                ),
                CheckBox(
                    disabled=True, label="Label", checked=False, on_click=lambda e: print(e)
                ),
            ]
        )
    )

ft.app(target=main)

fletmint.Radio

The Radio component inherits the flet.Radio.

params

• value: str = value of the radio checkbox

• label: str = text of the right of the radio

methods

example:

import flet as ft
from fletmint import *

def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.DARK
    page.bgcolor = "#22242a"

    page.add(
        ft.RadioGroup(
            content=ft.Column(
                [
                    Radio(
                        value="red",
                        label="Label",
                    ),
                    Radio(
                        value="blue",
                        label="Label",
                    ),
                    Radio(
                        value="green",
                        label="Label",
                    ),
                ]
            )
        )
    )

ft.app(target=main)

fletmint.ToggleSwitch

The ToggleSwitch component inherits the flet.Container.

params

methods

• on_switch: fires when the switch is clicked

example:

import flet as ft
from fletmint import *

def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.DARK
    page.bgcolor = "#22242a"

    page.add(
        ToggleSwitch(on_switch=change_theme)
    )

ft.app(target=main)

fletmint.Slider

The Slider component inherits the flet.Slider.

params

• theme_mode: page.theme_mode

methods

• on_switch: fires when the switch is clicked

example:

import flet as ft
from fletmint import *

def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.DARK
    page.bgcolor = "#22242a"

    page.add(
        Slider(theme_mode=page.theme_mode)
    )

ft.app(target=main)

fletmint.Toggle

The Slider component inherits the flet.Slider.

params

• label: page.theme_mode

• value: bool = default value

• theme: ThemeMode

methods

• on_change: fires when the toggle is clicked

example:

import flet as ft
from fletmint import *

def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.DARK
    page.bgcolor = "#22242a"

    page.add(
        ft.Column(
            [
                Toggle(label="Light", value=False, on_change=lambda e: print(e)),
                Toggle(label="Dark", on_change=lambda e: print(e)),
            ]
        )
    )

ft.app(target=main)

fletmint.UserProfile

The UserProfile component inherits the flet.Container.

The component offers predefined profile statuses: ProfileStatus.

• private: ProfileStatus.PRIVATE (default)

• public: ProfileStatus.OPEN

params

• username: str = username shown in the profile

• avatar_foreground_img: str = profile photo, local or url

• status: ProfileStatus

methods

example:

import flet as ft
from fletmint import *

def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.DARK
    page.bgcolor = "#22242a"

    page.add(
        UserProfile(
            username="Edoardo B.",
            avatar_foreground_img="https://fiverr-res.cloudinary.com/image/upload/t_profile_original,q_auto,f_auto/v1/attachments/profile/photo/e6ee5c5f29487a42edba6bd2914fee74-1707225777335/002e6712-84fc-4d83-9b26-e5fd2f26739a.jpg",
            status=ProfileStatus.PRIVATE,
        )
    )

ft.app(target=main)

fletmint.Carousel

The Carousel component inherits the flet.UserControl.

params

• images_list: list[tuple] = list of images with their descriptions

• animations: list = animations, IN and OUT

• compact: bool = determine the type of the image carousel

• descriptive: bool = show descriptions of the images

• transform_factor: float = image carousel scale factor (to resize it)

methods

example:

import flet as ft
from fletmint import *

def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.DARK
    page.bgcolor = "#22242a"

    page.add(
        Carousel(
            images_list=[
                (
                    "https://images.unsplash.com/photo-1714891203404-b25f32706e0a?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
                    "image description 1",
                ),
                (
                    "https://images.unsplash.com/photo-1714837291207-4985c06c9a60?q=80&w=2371&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
                    "image description 2",
                ),
                (
                    "https://images.unsplash.com/photo-1715109429876-e00fbe6c4ae3?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
                    "image description 3",
                ),
                (
                    "https://plus.unsplash.com/premium_photo-1714115035000-023149febb01?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
                    "image description 4",
                ),
                (
                    "https://images.unsplash.com/photo-1714836992953-b8f7b4dc8afc?q=80&w=2371&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
                    "image description 5",
                ),
            ],
            animations=[ft.AnimationCurve.EASE_IN, ft.AnimationCurve.EASE_IN_OUT_CUBIC_EMPHASIZED],
            compact=False,
            descriptive=False,
            transform_factor=0.5,
        )
    )

ft.app(target=main)

compact=False	is_dropdown=True

fletmint.AudioPlayer

The AudioPlayer component inherits the flet.Container.

params

• url: str = audio source

methods

example:

import flet as ft
from fletmint import *

def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.DARK
    page.bgcolor = "#22242a"

    page.add(
        audio_player := AudioPlayer(
            url="https://github.com/mdn/webaudio-examples/blob/main/audio-analyser/viper.mp3?raw=true"
        )
    )
    page.overlay.append(audio_player.audio)

ft.app(target=main)

fletmint.VideoPlayer

The VideoPlayer component inherits the flet.Container.

params

• playlist: list[ft.VideoMedia] = set VideoPlayer video sources

• player_title: str = player title

methods

example:

import flet as ft
from fletmint import *

def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.DARK
    page.bgcolor = "#22242a"

    page.add(
        VideoPlayer(
            playlist=[
                ft.VideoMedia(
                    "https://user-images.githubusercontent.com/28951144/229373720-14d69157-1a56-4a78-a2f4-d7a134d7c3e9.mp4"
                ),
                ft.VideoMedia(
                    "https://user-images.githubusercontent.com/28951144/229373718-86ce5e1d-d195-45d5-baa6-ef94041d0b90.mp4"
                ),
                ft.VideoMedia(
                    "https://user-images.githubusercontent.com/28951144/229373716-76da0a4e-225a-44e4-9ee7-3e9006dbc3e3.mp4"
                ),
            ],
            player_title="Demo video by Bbalduzz",
        )
    )

ft.app(target=main)

fletmint.Code

The Code component inherits the flet.UserControl.

The component offers predefined code editor themes: CodeTheme. As of now it’s supported:

• Ayu:

  • dark mode: CodeTheme.AYU_DARK

  • light mode: CodeTheme.AYU_LIGHT

• Github:

  • dark mode: CodeTheme.GITHUB_DARK (default)

• One Dark Pro:

  • dark mode: CodeTheme.ONE_DARK_PRO

params

• language: str = set the code editor language’s syntax rules

• code: str = code to show

• font: str = editor’s font (ttf), can be online url, local path or page font

• theme: CodeTheme = editor’s theme

• read_only: bool = enables edit mode (default: False)

• height: int = editor’s height

methods

example:

import flet as ft
from fletmint import *


def main(page: ft.Page):
    page.fonts = {
        "JetBrainsMono": "C:\\path\\to\\font\\JetBrainsMono-Regular.ttf",
        "SourceCodePro": "/path/to/font/SourceCodePro.ttf",
    }
    page.theme_mode = ft.ThemeMode.DARK
    code_editor = Code(
        # code=initial_code,
        language="python",
        font="https://github.com/JetBrains/JetBrainsMono/raw/master/fonts/ttf/JetBrainsMono-Regular.ttf'",
        height=800,
        theme=CodeTheme.ONE_DARK_PRO,
        read_only=False,
    )
    page.add(code_editor)


ft.app(target=main)

fletmint.ColorPicker

The Picker component inherits the flet.UserControl.

params

• color: str = start color picker’s color

• width: int = color picker width

• height: int = color picker height

methods

• on_color_select: def = fires when the color is selected

example:

import flet as ft
from fletmint import *


def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.DARK
    color_picker = ColorPicker(
        color="#00ff00", on_color_select=lambda value: print("selected color:", value)
    )
    page.add(color_picker)


ft.app(target=main)

fletmint.Toaster

The component shows in the page’s overlay the fletmint.Toast

params

• page: ft.Page = pass the flet page (mandatory)

• expand: bool = decide if the toaster should be expanded by default

• position: ToastPosition = set the toaster position

  • ToastPosition.TOP_LEFT

  • ToastPosition.TOP_RIGHT

  • ToastPosition.BOTTOM_LEFT

  • ToastPosition.BOTTOM_RIGHT

methods

• show_toast:

  • message: str,

  • text: str,

  • description: str,

  • toast: fletmint.Toast,

  • duration: int,

  • toast_type: fletmint.ToastType | str = check the fletmint.Toast documentation

• show_promise_toast:

  • function: def,

  • success_message: str,

  • error_message: str,

  • descriptive: bool = this shows the function’s output as the toast’s desctiption

• remove_toast:

  • toast: fletmint.Toast,

example:

import flet as ft
from fletmint import *


def main(page: ft.Page):
    page.fonts = {
        "JetBrainsMono": "C:\\path\\to\\font\\JetBrainsMono-Regular.ttf",
        "SourceCodePro": "/path/to/font/SourceCodePro.ttf",
    }
    page.theme_mode = ft.ThemeMode.DARK
    toast_manager = Toaster(page, expand=False, position=ToastPosition.TOP_RIGHT)

    def show_action(e):
        toast = Toast(
            content=ft.Row(
                [
                    ft.Row(
                        [
                            ft.Text("This is an custom action"),
                        ]
                    ),
                    ft.TextButton(
                        content=ft.Text(
                            "close",
                            style=ft.TextStyle(
                                size=13,
                                weight=ft.FontWeight.W_200,
                            ),
                        ),
                        style=ft.ButtonStyle(
                            shape=ft.ContinuousRectangleBorder(radius=8),
                            color=ft.colors.WHITE,
                            bgcolor=ft.colors.BLACK,
                        ),
                        on_click=lambda e: toast_manager.remove_toast(toast),
                    ),
                ],
                alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
            )
        )
        toast_manager.show_toast(toast=toast)

    def show_promise(e):
        def long_running_task():
            import time

            time.sleep(5)  # long-running task
            # raise Exception("Something went wrong")
            return "long running task output"

        toast_manager.show_promise_toast(
            long_running_task,
            success_message="Task Completed Successfully",
            error_message="Task Failed",
            descriptive=True,  # shows the function's output as the toast's desctiption
        )

    toast_showcase = ft.Column([
        SecondaryButton(
            label="Action",
            on_click=show_action,
        ),
        SecondaryButton(
            label="Info",
            on_click=lambda e: toast_manager.show_toast(
                toast_type=ToastType.INFO,
                text="This is a info message",
            ),
        ),
        SecondaryButton(
            label="Success",
            on_click=lambda e: toast_manager.show_toast(
                toast_type=ToastType.SUCCESS,
                text="This is a success message",
            ),
        ),
        SecondaryButton(
            label="Warning",
            on_click=lambda e: toast_manager.show_toast(
                toast_type=ToastType.WARNING,
                text="This is a warning message",
            ),
        ),
        SecondaryButton(
            label="Error",
            on_click=lambda e: toast_manager.show_toast(
                toast_type=ToastType.ERROR,
                text="This is a error message",
            ),
        ),
        SecondaryButton(
            label="Promise",
            on_click=show_promise,
        ),
        ft.TextButton(
            content=ft.Text(
                "Remove latest toast",
                color="#e57373",
                size=13,
                weight=ft.FontWeight.W_200,
            ),
            style=ft.ButtonStyle(
                shape=ft.ContinuousRectangleBorder(radius=10),
                side=ft.BorderSide(color="#5a3b3b", width=1),
                bgcolor="#2a1c1c",
                color={
                    ft.MaterialState.HOVERED: "#211717",
                    ft.MaterialState.FOCUSED: "#211717",
                    ft.MaterialState.DEFAULT: "#211717",
                },
            ),
            on_click=lambda e: toast_manager.remove_toast(
                toast_manager.toasts[0]
            ),
        ),
    ])
    page.add(toast_showcase)


ft.app(target=main)

20240608-0848-41.0728743.mp4

fletmint.Toast

The Toast component inherits the flet.Container.

params

• content: Any = the toast content, can be anything. If this is set you cannot set the text and description

• text: str = the toast title

• description: str = the toast description

• toast_type: ToastType = the toast type. This defines colors and icons

  • ToastType.DEFAULT

  • ToastType.INFO

  • ToastType.SUCCESS

  • ToastType.WARNING

  • ToastType.ERROR

  • ToastType.PROMISE

methods

any method that may be defined in the content (see example)

example:

# this creates a custom action toast
toast = Toast(
    content=ft.Row(
        [
            ft.Row(
                [
                    ft.Text("This is an custom action"),
                ]
            ),
            ft.TextButton(
                content=ft.Text(
                    "close",
                    style=ft.TextStyle(
                        size=13,
                        weight=ft.FontWeight.W_200,
                    ),
                ),
                style=ft.ButtonStyle(
                    shape=ft.ContinuousRectangleBorder(radius=8),
                    color=ft.colors.WHITE,
                    bgcolor=ft.colors.BLACK,
                ),
                on_click=lambda e: toast_manager.remove_toast(toast),
            ),
        ],
        alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
    )
)

Utils

fletmint.utils.change_app_icon

This utility let the user chnage the app icon on runtime. This utility works on windows, macos, linux, each os laverage its unique methods.

Note	When building the app, use the --icon flag to set the icon in the build.

params

• icon_path: str | Path = path of your custom icon. This can be png, jpeg, ico, bpm, icns (any)

• app_name: Optional[str] = (macos only)

• app_path: Optional[str] = (macos only)

example:

import os
import flet as ft
from fletmint.utils import change_app_icon

icon_path = os.path.join("icons", "my_custom_icon.png")

def main(page: ft.Page):
    page.window_width, page.window_height = 400, 400
    page.title = "Flet App with Custom Icon"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    page.add(
        ft.Image(src=icon_path, width=64, height=64),
        ft.Text("Hello, this is a Flet app with a custom icon!"),
    )


change_app_icon(icon_path=icon_path)

ft.app(target=main)

macos	windows	linux
		not tested

Support

Maintaining and updating this kit, along with adding new components, is a time-consuming and often challenging process. However, I believe it’s important to make this resource available to everyone because it’s the right thing to do. If you find value in this components library and would like to support its development, please consider contributing in any way you can.

Thank you for your support, even if it’s just leaving a star on the project! Your encouragement means a lot.