flet-dev / flet-dev/flet

Transforming controls leads to interactivity and layout issues

Open
#1,073 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug has-upstream
Dominant language
Python
Stars
17k
Forks
694
Avg merge
1d 14h
Merged PRs (30d)
33

Description

When the offset of flet.Container and the scale property of its content are set, some buttons in the content are not clickable.

Code example to reproduce the issue:

import flet

def main(page: flet.Page):
    page.add(
        flet.Container(
            width = 300, height = 300,
            alignment = flet.alignment.center,
            content = flet.Column(
                alignment = flet.MainAxisAlignment.CENTER,
                controls = [
                    flet.ElevatedButton(text="Elevated button 1"),
                    flet.ElevatedButton(text="Elevated button 2"),
                    flet.ElevatedButton(text="Elevated button 3"),
                    flet.ElevatedButton(text="Elevated button 4"),
                    flet.ElevatedButton(text="Elevated button 5"),
                    flet.ElevatedButton(text="Elevated button 6"),
                ]
            )
        )
    )

def main2(page: flet.Page):
    page.add(
        flet.Container(
            width = 300, height = 300,
            scale = 2,
            offset = flet.transform.Offset(0.5, 0.5),
            alignment = flet.alignment.center,
            content = flet.Column(
                alignment = flet.MainAxisAlignment.CENTER,
                controls = [
                    flet.ElevatedButton(text="Elevated button 1"),
                    flet.ElevatedButton(text="Elevated button 2"),
                    flet.ElevatedButton(text="Elevated button 3"),
                    flet.ElevatedButton(text="Elevated button 4"),
                    flet.ElevatedButton(text="Elevated button 5"),
                    flet.ElevatedButton(text="Elevated button 6")
                ]
            )
        )
    )

def main3(page: flet.Page):
    page.add(
        flet.Container(
            width = 300, height = 300,
            offset = flet.transform.Offset(0.5, 0.5),
            alignment = flet.alignment.center,
            content = flet.Column(
                scale = 2,
                alignment = flet.MainAxisAlignment.CENTER,
                controls = [
                    flet.ElevatedButton(text="Elevated button 1"),
                    flet.ElevatedButton(text="Elevated button 2"),
                    flet.ElevatedButton(text="Elevated button 3"),
                    flet.ElevatedButton(text="Elevated button 4"),
                    flet.ElevatedButton(text="Elevated button 5"),
                    flet.ElevatedButton(text="Elevated button 6")
                ]
            )
        )
    )

flet.app(target = main) # works
flet.app(target = main2) # works
flet.app(target = main3) # the first button is not clickable

Flet version (pip show flet):

Name: flet
Version: 0.4.2
Summary: Flet for Python - easily build interactive multi-platform apps in Python
Home-page:
Author: Appveyor Systems Inc.
Author-email: hello@flet.dev
License: Apache-2.0
Location: C:\Program Files\Python311\Lib\site-packages
Requires: flet-core, httpx, oauthlib, packaging, watchdog, websocket-client, websockets
Required-by:

Operating system: Windows 11

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the three Python examples in the issue and compare main3 with the working main and main2 cases. Investigate hit testing and layout for the transformed Container and Column, then verify that all buttons, including the first, are clickable without breaking the shown scale and offset behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
python
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.