Custom Widget Display Issue on Different Platforms

[Klu1d]

Question

I've created a widget that I need. Initially, I test and develop it in a desktop application, and once I'm done, I check it in the mobile application. So, I've created a widget called Marks, which behaves differently depending on the platform. If it's a desktop application, it works as expected. But if it's a mobile application (in my case, iOS), the elements display a bit wonky.

I've attached a video as proof and provided the code. Could you please explain how I can achieve the same behavior across all platforms and systems?

Desktop

2024-05-30.14-35-11.webm

iOS

IMG_3145.webm

Code sample

import flet as ft


class Marks(ft.Container):
    def __init__(self):
        super().__init__()
        self.animate=ft.animation.Animation(500, ft.AnimationCurve.DECELERATE)
        self.width=40
        self.bgcolor='grey'
        self.border_radius=15 
        self.padding=0
    
        self.colors = ['blue', 'red']

    def build(self):
        self.show_marks_button = ft.IconButton(
            icon=ft.icons.ADD, adaptive=True,
            on_click=self.on_click_show_marks,
        )
        self.content = ft.Row(controls=[self.show_marks_button], alignment=ft.MainAxisAlignment.END)

    def on_click_show_marks(self, e: ft.ControlEvent):
        e.control.icon = ft.icons.ARROW_BACK_IOS_ROUNDED
        e.control.on_click = self.on_click_close_marks

        self.width = 40 * (len(self.colors) + 1.5)
        for color in self.colors:
            self.content.controls.insert(0, 
            ft.IconButton(icon=ft.icons.ADD, width=30, height=30, padding=0,
                style = ft.ButtonStyle(
                    shape=ft.RoundedRectangleBorder(radius=5),
                    bgcolor=color, 
                    color=ft.colors.ON_SECONDARY_CONTAINER,
                    shadow_color=ft.colors.BLACK,
                ),
                
            )
        ) 
        self.update()

    def on_click_close_marks(self, e: ft.ControlEvent):
        e.control.icon = ft.icons.ADD
        e.control.on_click=self.on_click_show_marks

        self.width = 40
        self.content.controls = [self.show_marks_button]
        self.update()



def main(page: ft.Page):
    page.theme_mode = 'light'
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    page.add(Marks())

ft.app(target=main)

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[ndonkoHenri]

The Flet app update will hopefully fix this: #3096