How to set the theme to look like (e.g.) a Windows desktop application

[vindevoy]

I am creating a small application in Flet and this will run as a desktop application. It must replace an old TKinter GUI.

The problem I have for the moment, is that the layout of my application is not the layout I would expect from a Windows desktop application. I was able to make it look that way, but it meant that I had to:

• make the TextField smaller in size vertically
• make the ElevatedButton not rounded
• change the padding of the Dropdown

This was tedious and I would like to know if there is code somewhere available to change the default theme of Flet to make the GUI look like a native Windows 10 or 11 application made with Visual Studeo, or further, like a Mac OSX application made with Xcode ?

[ndonkoHenri]

There isn't to my knowledge.

Flutter (the framework behind Flet) uses the Material design (version 3 at the moment) as default for its controls design. Hence ...

A way around your issue could probably be to create a file with custom flet controls you need, made windows10-like, and from there, import them into your application.

Let me know what you think.

[vindevoy]

This is what I did. I have some examples from what I did. But I was wondering if I was going the correct way.
I was also thinking it may be easier if I update the Theme somehow.

from typing import Callable

import flet as ft

from arcelormittal.gui.controls.event import do_nothing


def button(text: str, width: int = 100, on_click: Callable = do_nothing):
    from arcelormittal.gui.controls import default_control_height, label

    label = label(text)  # We need to do this to control the font size

    return ft.ElevatedButton(bgcolor=ft.colors.GREY_400,
                             color=ft.colors.BLACK,
                             content=label,
                             elevation=0,
                             height=default_control_height - 2,  # it has 1 pixel border by default, I guess (sidviny)
                             on_click=on_click,
                             style=ft.ButtonStyle(shape=ft.RoundedRectangleBorder(radius=0)),
                             text=text,
                             width=width)

from typing import Callable

import flet as ft

from arcelormittal.gui.controls import do_nothing


def label(text: str) -> ft.Text:
    from arcelormittal.gui.controls import default_text_size, default_control_height

    return ft.Text(size=default_text_size,
                   value=text)


def right_aligned_label(text: str, width: int):
    from arcelormittal.gui.controls.container import right_align

    lbl = label(text)
    container = right_align(control=lbl,
                            width=width)

    return lbl, container


def text_field(width: int, name: str = None) -> ft.TextField:
    from arcelormittal.gui.controls import default_text_size

    data = {} if name is None else {"name": name}

    return ft.TextField(border_color=ft.colors.BLACK,
                        border_radius=0,
                        color=ft.colors.BLACK,
                        content_padding=8,
                        data=data,
                        dense=True,
                        focused_color=ft.colors.DEEP_ORANGE,
                        text_size=default_text_size,
                        width=width)


def dropdown(options: list[str], width: int, on_change: Callable = do_nothing, name: str = None) -> ft.Dropdown:
    from arcelormittal.gui.controls import default_text_size, default_control_height

    data = {} if name is None else {"name": name}

    return ft.Dropdown(border_color=ft.colors.BLACK,
                       border_radius=0,
                       content_padding=6,
                       data=data,
                       dense=True,
                       height=default_control_height - 2,
                       focused_color=ft.colors.DEEP_ORANGE,
                       on_change=on_change,
                       options=[ft.dropdown.Option(o) for o in options],
                       text_size=default_text_size,
                       width=width)

[FeodorFitsner]

Theming in Flet is on its early stage, so let us know if you miss any customization points and we'll look into it.

[vindevoy]

Here at ArcelorMittal Ghent (BE), we code for data scientists. Often they have no programming background and classes and object orientation is too difficult for them.

But, based on the above code, I wrote an OO version, which will make things more easily. Sample for a TextField()

class TextField(ft.TextField):
    def __init__(self):
        super().__init__()

        self.height = 22
        self.border_color = ft.colors.BLACK
        self.border_radius = 0
        self.color = ft.colors.BLACK
        self.content_padding = 6
        self.dense = True
        self.focused_color = ft.colors.DEEP_ORANGE,
        self.text_size = 12

I have time in the nearby future to make a full toolkit for our GUIs. ArcelorMittal Ghent is not against open sourcing this. An announcement will be made when this is previewable.

[vindevoy]

Is there a simple way to "theme" the options is a dropdown ? I can set padding on the dropdown, size, ... but can I also do this on the options ?

[ogkalu2]

@vindevoy Hey. Is sharing all the adjustments you made to make flet more windows like still possible ?

[vindevoy]

Hi,

I started on this at work. I wrote a first version there, but I made another one at home. But these projects where proof of concepts. I teach evening classes Python and I used them to demo multiple inheritance.

If you want, I can make this project more stable, but for now, see it as proof of concept.

https://gitlab.com/vindevoy/flet-toolkit

You must check the feature/setup branch !

[vindevoy]

One thing: the look is biased. It's more like "Windows desktop application", in ArcelorMittal colors.

[ogkalu2]

@vindevoy
Thanks so much for this. It's good enough for me to use already so that's fine.