Fix container.dart for issue #2628

[isaffathir]

Closes #2628
The Ink or InkWell widget must have a Material widget as an ancestor.

seems container.dart doesn't have:

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

Lines 151 to 153 in fe1a4d1

	var ink = Ink(
	decoration: boxDecor,
	child: InkWell(

so i try to wrap InkWell with Material :
https://github.com/flet-dev/flet/pull/2701/files#diff-3d2babe2e48d8eaf9b1c35294b8c498c905a03e16f8e490258b215a98e5ec568R151-R154

i also remove Ink cause Flet already use Container as parent, because Container can take a BoxDecoration as i read this

This is how i fix this issue, hopefully it will help.

[isaffathir]

2024-02-21.10-31-55.mp4

Test Code:

import flet as ft

def main(page: ft.Page):
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.theme_mode = ft.ThemeMode.DARK
    button = ft.Container(
        bgcolor=ft.colors.GREEN,
        content=ft.Icon(ft.icons.MENU_BOOK_ROUNDED, color=ft.colors.BLUE, size=30),
        padding=18,
        alignment=ft.alignment.center,
        border_radius=20,
        border=ft.Border(
            top=ft.BorderSide(width=2, color=ft.colors.RED),
            left=ft.BorderSide(width=2, color=ft.colors.RED),
            bottom=ft.BorderSide(width=2, color=ft.colors.RED),
            right=ft.BorderSide(width=2, color=ft.colors.RED),
        ),
        shadow=ft.BoxShadow(
            blur_radius=20,
            color=ft.colors.YELLOW_ACCENT_700,
            blur_style=ft.ShadowBlurStyle.OUTER,
        ),
        on_click=lambda e: print("Clicked"),
        ink=True,
        bottom=20,
        right=20,
    )
    simply_container = ft.Container(
        bgcolor=ft.colors.with_opacity(1, ft.colors.BLACK),
        height=page.height * 0.8,
        width=page.width * 0.8,
        bottom=20,
        right=40,
    )

    stack = ft.Stack(controls=[simply_container, button], expand=True)
    page.add(stack)


ft.app(target=main)

[ndonkoHenri]

Thanks @isaffathir.

But each new/non-existing dart property you add should be "exposed" in Flet's python API. Just like you did in the first PR.

[isaffathir]

Thanks @isaffathir.

But each new/non-existing dart property you add should be "exposed" in Flet's python API. Just like you did in the first PR.

Material is imported from material.dart

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

Line 5 in fe1a4d1

import 'package:flutter/material.dart';

i just wrap InkWell with Material. are this new? let me know if im wrong answer or misunderstand

[lekshmanmj]

Thanks @isaffathir for fixing the bug and that too immediately when I mentioned you with this issue.

[ndonkoHenri]

i just wrap InkWell with Material. are this new? let me know if im wrong answer or misunderstand

Ah, i forgot to check which issue you were trying to fix.

[isaffathir]

As suggestion from this that need transparent Material also here, yes we can use Ink if don't want use Material instead,but because flet add Container as parent for the return using Ink as a child will cause #2628 problem,thats why need transparent Material as ancestor