How to implement pinch-to-zoom?

[Fenryr01]

Question

I am using on_pan_update and on_scale to handle movement and zoom. The problem is that on mobile, it only detects on_pan_update and doesn't allow me to zoom. How can I implement pinch-to-zoom for mobile?

Code sample

def show_fullscreen_image(page: ft.Page, imagen_path):
    global zoom_factor, offset_x, offset_y, start_offset_x, start_offset_y, start_zoom_factor
    offset_x = 0
    offset_y = 0
    start_offset_x = 0
    start_offset_y = 0
    start_zoom_factor = 1.0
    

    def on_scale_start(e):
        global start_zoom_factor
        start_zoom_factor = zoom_factor
        start_zoom_factor = zoom_factor

    def on_scale_update(e):
        global zoom_factor
        zoom_factor = start_zoom_factor * e.scale
        update_image_position()


    def on_pan_update(e):
        global offset_x, offset_y
        offset_x += e.delta_x
        offset_y += e.delta_y
        update_image_position()

    def on_scroll(e):
        global zoom_factor
        if e.scroll_delta_y > 0:
            zoom_factor *= 1.1
        else:
            zoom_factor /= 1.1
        update_image_position()


    def update_image_position():
        image_container.width = page.width * zoom_factor
        image_container.height = page.height * zoom_factor
        image_container.left = offset_x
        image_container.top = offset_y
        page.update()

    def on_click(e):
        close_fullscreen_image(page, overlay_container)

    # Crear un contenedor semitransparente de pantalla completa
    image_container = ft.Container(
        content=ft.Image(
            src=imagen_path,
            fit=ft.ImageFit.CONTAIN,
            width=page.width,
            height=page.height,
        ),
        width=page.width,
        height=page.height,
    )

    overlay_container = ft.Container(
        width=page.width,
        height=page.height,
        bgcolor=ft.colors.BLACK12,
        alignment=ft.alignment.center,
        content=ft.GestureDetector(
            on_scale_start=on_scale_start,
            on_scale_update=on_scale_update,
            
            on_pan_update=on_pan_update,
            on_scroll=on_scroll,
            on_tap=on_click,
            content=ft.Stack(
                [image_container],
                width=page.width,
                height=page.height,
            ),
        )
    )

    page.overlay.append(overlay_container)
    page.update()

def close_fullscreen_image(page: ft.Page, overlay_container):
    page.overlay.remove(overlay_container)
    page.update()

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[ndonkoHenri]

Subscribe to this PR #3645