-
from PyPI
pip install fletmint -
from source
git clone https://github.com/Bbalduzz/fletmint.git cd fletmint py311 setup.py install
|
Tip
|
every component inherits its parent’s class methods |
The Button component inherits the flet.TextButton
-
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
The TextInput component inherits the flet.Container
-
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
-
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,
),
)The TagsInput component inherits the flet.Container.
The tags are fletmint.Badge.
The Stepper component inherits the flet.Container.
The TabSwitch component inherits the flet.Container.
-
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)
The Dropdown component inherits the flet.Container.
-
controls: list = could be both plain strings or other flet components -
dropdown_icons: list[ft.icons] -
max_width: int -
theme: ThemeMode
-
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)
The DatePicker component inherits the flet.UserControl.
-
is_dropdown: bool = if the calendar is dropdown (defaultFalse) -
left_content: Any = set the left content of the calendars' footer -
multi_select_mode: bool = if the user can select multiple dates (defaultTrue) -
dropdown_icons: list[ft.icons] -
max_width: int = set the width of the dropdown
-
on_date_choosen: return the selected date/dates as adatetimeobject. 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)
|
|
|
|
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
-
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
-
on_click: fires when the badge is clicked (check theTagsInputcode 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)
The CheckBox component inherits the flet.Container.
-
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
-
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)
The Radio component inherits the flet.Radio.
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)
The ToggleSwitch component inherits the flet.Container.
The Slider component inherits the flet.Slider.
The Slider component inherits the flet.Slider.
-
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)
The UserProfile component inherits the flet.Container.
The component offers predefined profile statuses: ProfileStatus.
-
private:
ProfileStatus.PRIVATE(default) -
public:
ProfileStatus.OPEN
-
username: str = username shown in the profile -
avatar_foreground_img: str = profile photo, local or url -
status: ProfileStatus
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)
The Carousel component inherits the flet.UserControl.
-
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)
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)
|
|
|
|
The AudioPlayer component inherits the flet.Container.
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)
The VideoPlayer component inherits the flet.Container.
-
playlist: list[ft.VideoMedia] = setVideoPlayervideo sources -
player_title: str = player title
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)
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
-
-
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
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)
The Picker component inherits the flet.UserControl.
-
color: str = start color picker’s color -
width: int = color picker width -
height: int = color picker height
-
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)
The component shows in the page’s overlay the fletmint.Toast
-
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
-
-
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
The Toast component inherits the flet.Container.
-
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
-
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,
)
)
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.
|
-
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)
|
|
|
|
|
not tested |
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent