NEW FEATURES: Drop Zone, Layout Builder, Window Background Blur

[Wanna-Pizza]

Description

New Feature: Layout Builder

Allows to know size,position of widget.

New Feature: DropZone

DropZone - widget that must have child widget (ft.Container as example) to drop files inside of it.

New Feature: WIndow Bacgkround Blur

Adding nice transparency effect to your Flet App.

Motivation

Such functionality should be by default in Flet. Such as DropZone, or LayoutBuilder, for building more complex interfaces. Acrylic - to make it look beautiful ;)

Knows Problem

LayoutBuilder may not be built correctly. In terms of, not fully optimized. But you at least have a working example of LayoutBuilder, maybe you should improve it. Because my knowledge of Dart is not good.

Test Code DropZone

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.DropZone(
            content=ft.Container(ft.Text('Drop here!'),width=500,height=500,alignment=ft.alignment.center,bgcolor='red'),
            on_dropped=lambda e: print(f'Dropped: {e.files}'),
            on_entered=lambda e: print('Entered'),
            on_exited=lambda e: print('Exited')
            )
    )
ft.app(target=main)

Test Code Window Blur

import flet as ft

def main(page: ft.Page):
    page.add(ft.Text('Acrylic!'))
    page.bgcolor = 'transparent'
    page.window.bgblur = ft.bgblur.TABBED #ACRYLIC, MICA, TABBED, AERO
    page.update()
    
ft.app(target=main)

Test Code LayoutBuilder

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.LayoutBuilder(
            content=ft.Container(ft.Text('LayoutBuilder'),expand=True,alignment=ft.alignment.center),
            update_size_on_init=True, # will trigger "on_change" at first build.
            expand=True,
            on_change=lambda e: print(e.width,e.height,e.x,e.y)
        
        )
    )
ft.app(target=main)

Type of change

• This change requires a documentation update
• New feature (non-breaking change which adds functionality)

Checklist

• I signed the CLA.
• I have performed a self-review of my own code
• My changes generate no new warnings
• New and existing tests pass locally with my changes

Screenshots

Additional details

Link to these features:
https://pub.dev/packages/desktop_drop
https://pub.dev/packages/flutter_acrylic
https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html

Summary by Sourcery

Add DropZone, LayoutBuilder, and Window background blur effect controls.

New Features:

• Add a DropZone control that accepts dropped files.
• Add a LayoutBuilder control that allows to know the size and position of a widget.
• Add support for window background blur effect with "mica", "acrylic", "tabbed", "aero", "disabled", and "transparent" options.

[CLAassistant]

All committers have signed the CLA.

[Wanna-Pizza]

@FeodorFitsner

Could you check it please?

[theN1C1]

дай боб проверят 🙏🙏🙏🙏

[zeldridge]

I would love these features added to Flet @FeodorFitsner @ndonkoHenri

[FeodorFitsner]

No worries, we are looking into this PR and will provide the feedback.

[bleudev]

Wow! It's very good improvements! I'm looking forward to this features will release in next flet version

[FeodorFitsner]

Can you give an example of how LayoutBuilder can be used in the app?

[FeodorFitsner]

While I like the added functionality in this PR I'd like to see it split into 3 separate PRs for DropZone, LayoutBuilder and acrylic affect. So we can discuss and merge them separately. Now I'm locked into "all or nothing".

Can you do that please?

[Wanna-Pizza]

While I like the added functionality in this PR I'd like to see it split into 3 separate PRs for DropZone, LayoutBuilder and acrylic affect. So we can discuss and merge them separately. Now I'm locked into "all or nothing".

Can you do that please?

I don't know. Right now I don't have time on that. Maybe some ppl can separate this repo. Maybe later I will be able to do it. At the moment I am adding everything to one repository to quickly update the flet functionality to my requirements. For this reason I did not make separate repositories.

[Wanna-Pizza]

Can you give an example of how LayoutBuilder can be used in the app?

In my case, when I make the application small, I can automatically hide elements that do not fit the small window size.

For example, you have a side menu, and the main viewer of the application. Make it, for example, 500 pixels wide - the left menu is hidden.

No need to use cv anymore. Plus, the widget size can be calculated when the application starts. I think the code is not needed here.

This functionality has long been available in other frameworks. As in flutter by default.

Previously, to calculate the size of an element that was added using expand - you had to change the window size to understand the size of the element. Now everything is much simpler.

[FeodorFitsner]

OK, got it. No worries. Thanks for the notes about LayoutBuilder.

[nshout]

I don't know. Right now I don't have time on that. Maybe some ppl can separate this repo. Maybe later I will be able to do it. At the moment I am adding everything to one repository to quickly update the flet functionality to my requirements. For this reason I did not make separate repositories.

Sure, I can attempt it shortly. Would love to see this pushed.

"all or nothing"

Thanks a lot @FeodorFitsner.

[bleudev]

Can this PR be merged now? Maybe we need to resolve conflicts and merge! This features are very useful and i need these features in my application. I don't want to use flet-blur in my application because it's not comfortable. flet-blur doesn't fit in flet ecosystem.

[bleudev]

Why we need to separate this PR?

[bleudev]

And if we need to, @Wanna-Pizza i can help with separation, write type alias and properties (lss Python side of features), but i don't understand how Dart (Flutter) side works.

[Wanna-Pizza]

And if we need to, @Wanna-Pizza i can help with separation, write type alias and properties (lss Python side of features), but i don't understand how Dart (Flutter) side works.

Hi! The developer wants to make a split, because it is more convenient to import into the current flet. Mostly, updates are made one package at a time, so that it is clear what is suitable and what is not, and to make edits. You can try to make a split of packages. But if you do not quite understand how the Dart side works, it will be difficult. I can resolve conflicts easily, but for know it doesnt make a sense since I dont have time to split packages.

[Wanna-Pizza]

And if we need to, @Wanna-Pizza i can help with separation, write type alias and properties (lss Python side of features), but i don't understand how Dart (Flutter) side works.

But I can resolve it after some time, and you can download custom flet.