Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style.shape property has on effect on FilledTonalButton and FilledButton in Flet 0.25.2 #4568

Open
1 task done
Klu1d opened this issue Dec 14, 2024 · 4 comments
Open
1 task done
Assignees
Labels
bug Something isn't working

Comments

@Klu1d
Copy link

Klu1d commented Dec 14, 2024

Duplicate Check

Describe the bug

Hello,

After upgrading to Flet 0.25.2, I encountered two issues that seem to be related, so I am reporting them together:
Issue 1: FilledTonalButton and FilledButton not displaying

When running a statically packed Flet application (using flet publish), FilledTonalButton and FilledButton do not render. This behavior was not observed in version 0.24.1.
Issue 2: Rounded corners for buttons not working

In version 0.25.2, the shape property for buttons (e.g., ft.RoundedRectangleBorder) no longer works as expected for FilledTonalButton and FilledButton. This issue also appears to have been introduced with the update.

Code sample

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Column(
            expand=True,
            controls=[
                ft.Column(
                    expand=1,
                    controls=[
                        ft.Text('Issue 1: Problem with displaying FilledTonalButton and FilledButton on a static Flet.'),
                        ft.ElevatedButton('ElevatedButton'),
                        ft.OutlinedButton('OutlinedButton'),
                        ft.FilledButton('FilledButton'),
                        ft.FilledTonalButton('FilledTonalButton'),
                    ]
                ),
                ft.Column(
                    expand=1,
                    controls=[
                        ft.Text('Issue 2: Problem with button rounding on a static Flet.'),
                        ft.ElevatedButton(
                            'ElevatedButton',
                            style=ft.ButtonStyle(shape=ft.RoundedRectangleBorder(radius=5))
                        ),
                        ft.OutlinedButton(
                            'OutlinedButton',
                            style=ft.ButtonStyle(shape=ft.RoundedRectangleBorder(radius=5))
                        ),
                        ft.FilledButton(
                            'FilledButton',
                            style=ft.ButtonStyle(shape=ft.RoundedRectangleBorder(radius=5))
                        ),
                        ft.FilledTonalButton(
                            'FilledTonalButton',
                            style=ft.ButtonStyle(shape=ft.RoundedRectangleBorder(radius=5))
                        ),
                    ]
                ),
            ]
        )
    )

ft.app(main)

To reproduce

Steps to Reproduce:

  1. Save the code above as main.py.
  2. Use the following commands to publish the app and serve it locally:
    flet publish main.py --assets assets --app-name FletIsAwesome --app-description FletIsAwesome
    python.exe -m http.server 8080 --bind 127.0.0.1 --directory dist
    
  3. Access the app in the browser (e.g., http://127.0.0.1:8080).
  4. Observe the following issues:
    • Buttons FilledButton and FilledTonalButton do not appear.
    • Rounded corners do not apply to these buttons.

Expected behavior

I expect that when packaging a static application, it should work visually the same as a desktop application. At least in terms of appearance, as shown in the video.

Screenshots / Videos

flet run:
Expected behavior

12-14_18-30-38.mp4

flet publish:
Result

12-14_18-31-29.mp4

Operating System

Windows

Operating system details

Windows 11 24H2

Flet version

0.25.2

Regression

Yes, it used to work in a previous Flet version (please specify the version in additional details)

Suggestions

No response

Logs

No response

Additional details

No response

@FeodorFitsner
Copy link
Contributor

It could be browser cache. Try in InPrivate/Incognito mode. I'm getting this:

image

@Klu1d
Copy link
Author

Klu1d commented Dec 14, 2024

It could be browser cache. Try in InPrivate/Incognito mode. I'm getting this:
image

I think you're right about the cache. However, clearing it completely or opening it in a new window hasn't worked for me so far. I'll try it on another computer.

I see that issue №1 is not present in your screenshot, but issue №2 is there. If you ran my example code, the corner radius should be set to 5. In other words, it should look more rectangular than what you currently have.

изображение

@Klu1d
Copy link
Author

Klu1d commented Dec 15, 2024

Yes, I was able to achieve the desired result in incognito mode, which means it should also be possible without it. Yes, this is related to caching, and it needs to be cleared.

@Klu1d Klu1d closed this as completed Dec 15, 2024
@FeodorFitsner
Copy link
Contributor

I can confirm #2 issue exists and I can reproduce it. Will be looking into that.

@FeodorFitsner FeodorFitsner changed the title Issues with FilledTonalButton and FilledButton in Flet 0.25.2 style.shape property has on effect on FilledTonalButton and FilledButton in Flet 0.25.2 Dec 17, 2024
@FeodorFitsner FeodorFitsner added the bug Something isn't working label Dec 17, 2024
@FeodorFitsner FeodorFitsner self-assigned this Dec 17, 2024
@ndonkoHenri ndonkoHenri reopened this Dec 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
Status: 🆕 New
Development

No branches or pull requests

3 participants