InteractiveViewer

Allows you to pan, zoom, and rotate its content.

Inherits: LayoutControl

Properties

• alignment(Alignment | None) –

  Alignment of the content within.

• boundary_margin(MarginValue) –

  A margin for the visible boundaries of the content.

• clip_behavior(ClipBehavior) –

  How to clip the content.

• constrained(bool) –

  Whether the normal size constraints at this point in the widget tree are applied

• content(Control) –

  The Control to be transformed.

• interaction_end_friction_coefficient(Number) –

  Changes the deceleration behavior after a gesture.

• interaction_update_interval(int) –

  The interval (in milliseconds) at which the on_interaction_update event is fired.

• max_scale(Number) –

  The maximum allowed scale.

• min_scale(Number) –

  The minimum allowed scale.

• pan_enabled(bool) –

  Whether panning is enabled.

• scale_enabled(bool) –

  Whether scaling is enabled.

• scale_factor(Number) –

  The amount of scale to be performed per pointer scroll.

• trackpad_scroll_causes_scale(bool) –

  Whether scrolling up/down on a trackpad should cause scaling instead of panning.

Events

• on_interaction_end(EventHandler[ScaleEndEvent[InteractiveViewer]] | None) –

  Called when the user ends a pan or scale gesture.

• on_interaction_start(EventHandler[ScaleStartEvent[InteractiveViewer]] | None) –

  Called when the user begins a pan or scale gesture.

• on_interaction_update(EventHandler[ScaleUpdateEvent[InteractiveViewer]] | None) –

  Called when the user updates a pan or scale gesture.

Methods

• pan –
• reset –
• restore_state –
• save_state –
• zoom –

Examples

Live example

Handling events

import flet as ft


def main(page: ft.Page):
    page.add(
        ft.InteractiveViewer(
            min_scale=0.1,
            max_scale=15,
            boundary_margin=ft.margin.all(20),
            on_interaction_start=lambda e: print(e),
            on_interaction_end=lambda e: print(e),
            on_interaction_update=lambda e: print(e),
            content=ft.Image(
                src="https://picsum.photos/500/500",
            ),
        )
    )


ft.run(main)

Properties

alignment

alignment: Alignment | None = None

Alignment of the content within.

boundary_margin

boundary_margin: MarginValue = 0

A margin for the visible boundaries of the content.

clip_behavior

clip_behavior: ClipBehavior = HARD_EDGE

How to clip the content.

constrained

constrained: bool = True

Whether the normal size constraints at this point in the widget tree are applied to the child.

content

content: Control

The Control to be transformed.

Must be visible.

Raises:

• ValueError –

  If content is not visible.

interaction_end_friction_coefficient

interaction_end_friction_coefficient: Number = 1.35e-05

Changes the deceleration behavior after a gesture.

Note

Must be greater than 0.

Raises:

• ValueError –

  If interaction_end_friction_coefficient is not greater than 0.

interaction_update_interval

interaction_update_interval: int = 200

The interval (in milliseconds) at which the on_interaction_update event is fired.

max_scale

max_scale: Number = 2.5

The maximum allowed scale.

Note

Must be greater than or equal to min_scale.

Raises:

• ValueError –

  If max_scale is not greater than 0 or is less than min_scale.

min_scale

min_scale: Number = 0.8

The minimum allowed scale.

Note

Must be greater than 0 and less than or equal to max_scale.

Raises:

• ValueError –

  If min_scale is not greater than 0.

pan_enabled

pan_enabled: bool = True

Whether panning is enabled.

scale_enabled

scale_enabled: bool = True

Whether scaling is enabled.

scale_factor

scale_factor: Number = 200

The amount of scale to be performed per pointer scroll.

trackpad_scroll_causes_scale

trackpad_scroll_causes_scale: bool = False

Whether scrolling up/down on a trackpad should cause scaling instead of panning.

Events

on_interaction_end

on_interaction_end: (
    EventHandler[ScaleEndEvent[InteractiveViewer]] | None
) = None

Called when the user ends a pan or scale gesture.

on_interaction_start

on_interaction_start: (
    EventHandler[ScaleStartEvent[InteractiveViewer]] | None
) = None

Called when the user begins a pan or scale gesture.

on_interaction_update

on_interaction_update: (
    EventHandler[ScaleUpdateEvent[InteractiveViewer]] | None
) = None

Called when the user updates a pan or scale gesture.

Methods

pan

pan(dx: Number, dy: Number = 0, dz: Number = 0)

reset

reset(animation_duration: DurationValue | None = None)

restore_state

restore_state()

save_state

save_state()

zoom

zoom(factor: Number)