Missing overflow control?

[mikaelho]

With this code:

import flet
from flet import Column, Container, Page, border, colors

def main(page: Page):

    root = Container(border=border.all(3, colors.BLACK), expand=True)

    content = Column([Container(bgcolor=colors.GREEN, height=200)], expand=True)

    root.content = content

    page.add(root)
    page.update()

flet.app(target=main)

The Column overflows the bottom of the Container when it does not fit.

If I add scroll="auto" to the Column, the content no longer overflows:

Is there an existing way to not overflow the containing control (not necessarily a Container), and not scroll?

[FeodorFitsner]

If you add "scroll" it becomes scrollable, right, which is maybe not exactly what you need? Maybe...this could be solved with min_height? I didn't add min_/max_ to keep it simple, but maybe it's time?

[mikaelho]

Yes, I do not want it to scroll, I just want the child control to respect the clip bounds of the parent. In other UI frameworks that has even been the default, letting the child overflow the parent had to be set explicitly.

Sorry, I did not yet understand the role of min_height in this.

[FeodorFitsner]

Oh, I probably meant max_height, so it could be less or equal. I will experiment on that.

[mikaelho]

Do flutter controls really have no concept of clip bounds? You should not need to handle this ”manually” by dimension (would probably not work anyway if translation or rotation is applied).

[mikaelho]

https://docs.flutter.dev/release/breaking-changes/clip-behavior

[mikaelho]

Looks like flutter at some point changed the default to ”not clip”. Seems surprising as that in my experience leads to easily breaking UIs.

[FeodorFitsner]

So, it makes sense to expose clip_behavior for some controls only, like Column, Row, Stack: https://api.flutter.dev/flutter/widgets/Flex/clipBehavior.html

Not sure about Container - it's related to decoration somehow, not a child content: https://api.flutter.dev/flutter/widgets/Container/clipBehavior.html

[mikaelho]

I see, that’s a pity as Container and Stack would definitely be the ones that I would expect to have this property, coming to flet as a new user.

[FeodorFitsner]

I've just discovered that Stack has hardClip behavior enabled by default, so if you put anything to Stack with fixed size or expand its contents will be clipped.

So, your example could be changed like:

import flet
from flet import Column, Container, Page, border, colors
from flet.stack import Stack

def main(page: Page):

    root = Container(
        Stack(controls=[Container(bgcolor=colors.GREEN, height=200)], expand=True),
        border=border.all(3, colors.BLACK),
        expand=True,
    )

    page.add(root)

flet.app(target=main)

[mikaelho]

Thanks, yes, your example works.

But if I put a e.g. a Column in that Stack, it will "break free" again, so it does not seem to be dependent on the Stack parameters only.

Here I have only added the Column, same result regardless of whether the Column uses expand or not.

import flet
from flet import Column, Container, Page, border, colors
from flet import Stack

def main(page: Page):

    root = Container(
        Stack(controls=[Column([Container(bgcolor=colors.GREEN, height=200)])], expand=True),
        border=border.all(3, colors.BLACK),
        expand=True,
    )

    page.add(root)
    page.update()

flet.app(target=main)

So, a bit fiddly.

[FeodorFitsner]

So, in the current Flutter it's impossible to set clipBehavior to Column or Row - that parameter is absent from their constructors.

Some googling suggests you should use Positioned inside stack: https://stackoverflow.com/questions/55091863/flutter-detect-content-overflow-and-clip-it https://stackoverflow.com/questions/68313457/flutter-stack-positioning-and-overflow

In Flet it's achieved by setting one of top, left, right or bottom properties (works inside Stack only).

You can try doing this:

import flet
from flet import Column, Container, Page, Stack, Text, border, colors

def main(page: Page):

    root = Container(
        Stack(
            controls=[
                Column(
                    [Container(Text("aaa"), bgcolor=colors.GREEN, width=1000, height=200)],
                    left=0,
                )
            ],
            expand=True,
        ),
        border=border.all(3, colors.BLACK),
        expand=True,
    )

    page.add(root)
    page.update()

flet.app(target=main)

but you have to set container's width as well as it's absolutely positioned now.

[mikaelho]

Would be excellent to expose the clip attribute for Stack. Currently I can play with a Row/Stack combination to move things outside the parent, but then mouse clicks are not detected as they are outside the hit box. (And Stack is a must as it is the only way to freely control positioning.)

[FeodorFitsner]

What clip behaviour are you interested in: https://api.flutter.dev/flutter/dart-ui/Clip.html?

[mikaelho]

I understand the question so that clip would be a boolean, without finessing the clipping behaviour. Then I would start with the default hardEdge when clipped.

[FeodorFitsner]

Right, the thing is there is already hardEdge as it's default constructor parameter which is not overridden by Flet: https://api.flutter.dev/flutter/widgets/Stack/Stack.html

[mikaelho]

Yes, and for Stack it would be nice to be able to set it to none in some cases.

[FeodorFitsner]

Ah, I see. OK, you got it. Will add that shortly to the next release coming today.

[mikaelho]

Wow, thanks!

Would be nice to be able to trial these kind of easy API changes before bothering you, but I guess that would require a Go build pipeline, right?

[FeodorFitsner]

Added Stack.clip_behavior: https://flet.dev/docs/controls/stack#clip_behavior

Shall we close this issue?

[mikaelho]

Closed with thanks.