Add more InkWell event in container.dart

[isaffathir]

InkWell Control from Flutter

https://api.flutter.dev/flutter/material/InkWell-class.html

• Revert change to default (Duplicate InkWell control)
• Add on_release event (Callback after click)
• Add ink_color event (Able to change ink color)

Test Code:

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Container(
            content=ft.Text(
                "Login",
                style=ft.TextStyle(
                    size=14,
                    color=ft.colors.GREY_700,
                    weight=ft.FontWeight.BOLD,
                ),
            ),
            margin=ft.margin.only(left=30, right=30, top=10),
            padding=20,
            alignment=ft.alignment.center,
            bgcolor=ft.colors.GREY_100,
            border_radius=10,
            ink=True,
            ink_color=ft.colors.CYAN,
            on_release=lambda e: print("onrelease"),
            on_click=lambda e: print("onclick"),
        ),
    )

ft.app(target=main)

[FeodorFitsner]

It does look like a duplicate of Container control with ink=True.

[lekshmanmj]

@isaffathir You may be interest in solving this issue, Please have a look at this issue #2628

[isaffathir]

It does look like a duplicate of Container control with ink=True.

i look into Container and yes it use ink = True for InkWell, but what if i want to make ink for Text and Icon,or any?
thats InkWell control works, it will make any widget clickable. Its seems like gesture_detector.py do,but gesturedetector doesnt have splash/ripple effect when we on_tap the widget

Make Text clickable by InkWell :

ft.InkWell(
                    on_tap=lambda e: print("Sign Up"),
                    content=ft.Text("Click me for Sign Up", color=ft.colors.BLUE),
                ),

Make Text clickable by GestureDetector :

ft.GestureDetector(
                    on_tap=lambda e: print("Sign Up"),
                    content=ft.Text("Click me for Sign Up", color=ft.colors.BLUE),
                ),

[FeodorFitsner]

You can put any control inside Container and make it clickable, no?

[isaffathir]

You can put any control inside Container and make it clickable, no?

It does,but i just suggest to make other more flexible to create clickable widget, just like gesture_detector.py do

[FeodorFitsner]

I mean InkWell is already part of Container when ink=True: https://github.com/flet-dev/flet/blob/main/packages/flet/lib/src/controls/container.dart#L153

and you can wrap container with gesture detector as well.

[isaffathir]

I mean InkWell is already part of Container when ink=True: https://github.com/flet-dev/flet/blob/main/packages/flet/lib/src/controls/container.dart#L153

and you can wrap container with gesture detector as well.

I got it, should i add other InkWell event such a splashColor,highlightColor,etc on container.dart? but i think if python InkWell exist is more better right?

[ndonkoHenri]

Hey @isaffathir, great work on this PR!
The Flet-idea is actually not to implement the Flutter API one-to-one:

Flet does not just "wrap" Flutter widgets, but adds its own "opinion" by combining smaller widgets, hiding complexities, implementing UI best-practices, applying reasonable defaults

I read this answer from stack-overflow, and it seems like GestureDetector and Inkwell are almost exactly thesame, with main difference that Inkwell offers a customisable ripple effect, while GD doesn't.
However, you may not have noticed it, but the Flet Container control, already wraps/makes use of Ink and Inkwell internally as seen below:

flet/packages/flet/lib/src/controls/container.dart

Lines 148 to 153 in fe1a4d1

	if ((onClick || url != "" || onLongPress || onHover) &&
	ink &&
	!disabled) {
	var ink = Ink(
	decoration: boxDecor,
	child: InkWell(

So, to be brief, the only thing Flet lacks atm is the possibility of customising the ripple effect. The solution will then be to further expose Ink/Inkwell properties (related to ripple) found in this container.dart.

If you find the addition of this interesting/useful, you could perhaps work in that direction instead. 🙂

[isaffathir]

Thanks for answer @ndonkoHenri, your answer make me know Flet further. in this case i should add other InkWell event such a splashColor,highlightColor,etc on container.dart

[ndonkoHenri]

in this case i should add other InkWell event such a splashColor,highlightColor,etc on container.dart

Definitely! Go on...

[FeodorFitsner]

Close as dup of #2701