Skip to content

WebView

WebView #

Bases: ConstrainedControl

Easily load webpages while allowing user interaction.

Note

Works only on the following platforms: iOS, Android, macOS and Web.

animate_offset #

animate_offset: AnimationValue | None = None

Setting control's animate_offset to either True, number or an instance of animation.Animation class enables implicit animation of Control.offset property.

offset property is an instance of transform.Offset class which specifies horizontal x and vertical y offset of a control scaled to control's size. For example, an offset transform.Offset(-0.25, 0) will result in a horizontal translation of one quarter the width of the control.

Offset animation is used for various sliding effects:

import flet as ft

def main(page: ft.Page):

    c = ft.Container(
        width=150,
        height=150,
        bgcolor="blue",
        border_radius=10,
        offset=ft.transform.Offset(-2, 0),
        animate_offset=ft.animation.Animation(1000),
    )

    def animate(e):
        c.offset = ft.transform.Offset(0, 0)
        c.update()

    page.add(
        c,
        ft.ElevatedButton("Reveal!", on_click=animate),
    )

ft.run(main)

animate_opacity #

animate_opacity: AnimationValue | None = None

Setting control's animate_opacity to either True, number or an instance of animation.Animation class enables implicit animation of Control.opacity property.

import flet as ft

def main(page: ft.Page):

    c = ft.Container(
        width=150,
        height=150,
        bgcolor="blue",
        border_radius=10,
        animate_opacity=300,
    )

    def animate_opacity(e):
        c.opacity = 0 if c.opacity == 1 else 1
        c.update()

    page.add(
        c,
        ft.ElevatedButton(
            "Animate opacity",
            on_click=animate_opacity,
        ),
    )

ft.app(main)

animate_position #

animate_position: AnimationValue | None = None

Setting control's animate_position to either True, number or an instance of animation.Animation class (see above) enables implicit animation of Control's left, top, right and bottom properties.

Please note Control position works inside Stack control only.

import flet as ft

def main(page: ft.Page):

    c1 = ft.Container(width=50, height=50, bgcolor="red", animate_position=1000)

    c2 = ft.Container(
        width=50, height=50, bgcolor="green", top=60, left=0, animate_position=500
    )

    c3 = ft.Container(
        width=50, height=50, bgcolor="blue", top=120, left=0, animate_position=1000
    )

    def animate_container(e):
        c1.top = 20
        c1.left = 200
        c2.top = 100
        c2.left = 40
        c3.top = 180
        c3.left = 100
        page.update()

    page.add(
        ft.Stack([c1, c2, c3], height=250),
        ft.ElevatedButton("Animate!", on_click=animate_container),
    )

ft.run(main)

animate_rotation #

animate_rotation: AnimationValue | None = None

Setting control's animate_rotation to either True, number or an instance of animation.Animation class enables implicit animation of Control.rotate property.

from math import pi
import flet as ft

def main(page: ft.Page):

    c = ft.Container(
        width=100,
        height=70,
        bgcolor="blue",
        border_radius=5,
        rotate=ft.transform.Rotate(0, alignment=ft.Alignment.CENTER),
        animate_rotation=ft.animation.Animation(300, ft.AnimationCurve.BOUNCE_OUT),
    )

    def animate(e):
        c.rotate.angle += pi / 2
        page.update()

    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.spacing = 30
    page.add(
        c,
        ft.ElevatedButton("Animate!", on_click=animate),
    )

ft.run(main)

animate_scale #

animate_scale: AnimationValue | None = None

Setting control's animate_scale to either True, number or an instance of animation.Animation class enables implicit animation of Control.scale property.

import flet as ft

def main(page: ft.Page):

    c = ft.Container(
        width=100,
        height=100,
        bgcolor="blue",
        border_radius=5,
        scale=ft.transform.Scale(scale=1),
        animate_scale=ft.animation.Animation(600, ft.AnimationCurve.BOUNCE_OUT),
    )

    def animate(e):
        c.scale = 2
        page.update()

    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.spacing = 30
    page.add(
        c,
        ft.ElevatedButton("Animate!", on_click=animate),
    )

ft.run(main)

animate_size #

animate_size: AnimationValue | None = None

TBD

aspect_ratio #

aspect_ratio: OptionalNumber = None

TBD

badge #

badge: BadgeValue | None = None

The badge property supports both strings and Badge objects.

bgcolor #

bgcolor: ColorValue | None = None

Defines the background color of the WebView.

bottom #

bottom: OptionalNumber = None

Effective inside Stack only. The distance that the child's bottom edge is inset from the bottom of the stack.

col #

col: ResponsiveNumber = 12

If a parent of the control is ResponsiveRow, col property is used to determine how many virtual columns of a screen the control will span.

Can be a number or a dictionary configured to have a different value for specific breakpoints, for example col={"sm": 6}. Breakpoints are named dimension ranges:

Breakpoint Dimension
xs <576px
sm ≥576px
md ≥768px
lg ≥992px
xl ≥1200px
xxl ≥1400px

If col property is not specified, it spans the maximum number of columns (12).

data #

data: Any = skip_field()

Arbitrary data of any type that can be attached to a control.

disabled #

disabled: bool = False

Every control has disabled property which is False by default - control and all its children are enabled. disabled property is mostly used with data entry controls like TextField, Dropdown, Checkbox, buttons. However, disabled could be set to a parent control and its value will be propagated down to all children recursively.

For example, if you have a form with multiple entry controls you can disable them all together by disabling container:

c = ft.Column(controls=[
    ft.TextField(),
    ft.TextField()
])
c.disabled = True
page.add(c)

enable_javascript #

enable_javascript: bool | None = None

Enable or disable the JavaScript execution on the page.

Note that disabling the JavaScript execution on the page may result to unexpected web page behaviour.

expand #

expand: bool | int | None = None

When a child Control is placed into a Column or a Row you can "expand" it to fill the available space. expand property could be a boolean value (True - expand control to fill all available space) or an integer - an "expand factor" specifying how to divide a free space with other expanded child controls.

For more information and examples about expand property see "Expanding children" sections in Column or Row.

Here is an example of expand being used in action for both Column and Row:

import flet as ft

def main(page: ft.Page):
    page.spacing = 0
    page.padding = 0
    page.add(
        ft.Column(
            controls=[
                ft.Row(
                    [
                        ft.Card(
                            content=ft.Text("Card_1"),
                            color=ft.Colors.ORANGE_300,
                            expand=True,
                            height=page.height,
                            margin=0,
                        ),
                        ft.Card(
                            content=ft.Text("Card_2"),
                            color=ft.Colors.GREEN_100,
                            expand=True,
                            height=page.height,
                            margin=0,
                        ),
                    ],
                    expand=True,
                    spacing=0,
                ),
            ],
            expand=True,
            spacing=0,
        ),
    )

ft.app(main)

expand_loose #

expand_loose: bool | None = None

Effective only if expand is True.

If expand_loose is True, the child control of a Column or a Row will be given the flexibility to expand to fill the available space in the main axis (e.g., horizontally for a Row or vertically for a Column), but will not be required to fill the available space.

The default value is False.

Here is the example of Containers placed in Rows with expand_loose = True: 

import flet as ft


class Message(ft.Container):
    def __init__(self, author, body):
        super().__init__()
        self.content = ft.Column(
            controls=[
                ft.Text(author, weight=ft.FontWeight.BOLD),
                ft.Text(body),
            ],
        )
        self.border = ft.border.all(1, ft.Colors.BLACK)
        self.border_radius = ft.border_radius.all(10)
        self.bgcolor = ft.Colors.GREEN_200
        self.padding = 10
        self.expand = True
        self.expand_loose = True


def main(page: ft.Page):
    chat = ft.ListView(
        padding=10,
        spacing=10,
        controls=[
            ft.Row(
                alignment=ft.MainAxisAlignment.START,
                controls=[
                    Message(
                        author="John",
                        body="Hi, how are you?",
                    ),
                ],
            ),
            ft.Row(
                alignment=ft.MainAxisAlignment.END,
                controls=[
                    Message(
                        author="Jake",
                        body="Hi I am good thanks, how about you?",
                    ),
                ],
            ),
            ft.Row(
                alignment=ft.MainAxisAlignment.START,
                controls=[
                    Message(
                        author="John",
                        body="Lorem Ipsum is simply dummy text of the printing and 
                        typesetting industry. Lorem Ipsum has been the industry's 
                        standard dummy text ever since the 1500s, when an unknown 
                        printer took a galley of type and scrambled it to make a 
                        type specimen book.",
                    ),
                ],
            ),
            ft.Row(
                alignment=ft.MainAxisAlignment.END,
                controls=[
                    Message(
                        author="Jake",
                        body="Thank you!",
                    ),
                ],
            ),
        ],
    )

    page.window.width = 393
    page.window.height = 600
    page.window.always_on_top = False

    page.add(chat)


ft.run(main)

height #

height: OptionalNumber = None

Imposed Control height in virtual pixels.

key #

key: (
    str | int | float | bool | ValueKey | ScrollKey | None
) = None

left #

left: OptionalNumber = None

Effective inside Stack only. The distance that the child's left edge is inset from the left of the stack.

offset #

offset: OffsetValue | None = None

Applies a translation transformation before painting the control.

The translation is expressed as a transform.Offset scaled to the control's size. For example, an Offset with a x of 0.25 will result in a horizontal translation of one quarter the width of the control.

The following example displays container at 0, 0 top left corner of a stack as transform applies -1 * 100, -1 * 100 (offset * control_size) horizontal and vertical translations to the control:

import flet as ft

def main(page: ft.Page):

    page.add(
        ft.Stack(
            [
                ft.Container(
                    bgcolor="red",
                    width=100,
                    height=100,
                    left=100,
                    top=100,
                    offset=ft.transform.Offset(-1, -1),
                )
            ],
            width=1000,
            height=1000,
        )
    )

ft.run(main)

on_animation_end #

on_animation_end: OptionalControlEventHandler[
    ConstrainedControl
] = None

All controls with animate_* properties have on_animation_end event handler which is called when animation complete and can be used to chain multiple animations.

Event's object data field contains the name of animation:

  • opacity
  • rotation
  • scale
  • offset
  • position
  • container

For example:

c = ft.Container(
        ft.Text("Animate me!"),
        # ...
        animate=ft.animation.Animation(1000, "bounceOut"),
        on_animation_end=lambda e: print("Container animation end:", e.data)
    )

on_console_message #

on_console_message: (
    EventHandler[WebViewConsoleMessageEvent] | None
) = None

Fires when a log message is written to the JavaScript console.

Note

Works only on the following platforms: iOS, Android and macOS.

on_javascript_alert_dialog #

on_javascript_alert_dialog: (
    EventHandler[WebViewJavaScriptEvent] | None
) = None

Fires when the web page attempts to display a JavaScript alert() dialog.

Note

Works only on the following platforms: iOS, Android and macOS.

on_page_ended #

on_page_ended: ControlEventHandler[WebView] | None = None

Fires when all the webview page loading processes are ended.

Event handler argument's data property is of type str and contains the URL.

Note

Works only on the following platforms: iOS, Android and macOS.

on_page_started #

on_page_started: ControlEventHandler[WebView] | None = None

Fires soon as the first loading process of the webview page is started.

Event handler argument's data property is of type str and contains the URL.

Note

Works only on the following platforms: iOS, Android and macOS.

on_progress #

on_progress: ControlEventHandler[WebView] | None = None

Fires when the progress of the webview page loading is changed.

Event handler argument's data property is of type int and contains the progress value.

Note

Works only on the following platforms: iOS, Android and macOS.

on_scroll #

on_scroll: EventHandler[WebViewScrollEvent] | None = None

Fires when the web page's scroll position changes.

Note

Works only on the following platforms: iOS, Android and macOS.

on_url_change #

on_url_change: ControlEventHandler[WebView] | None = None

Fires when the URL of the webview page is changed.

Event handler argument's data property is of type str and contains the new URL.

Note

Works only on the following platforms: iOS, Android and macOS.

on_web_resource_error #

on_web_resource_error: (
    ControlEventHandler[WebView] | None
) = None

Fires when there is error with loading a webview page resource.

Event handler argument's data property is of type str and contains the error message.

Note

Works only on the following platforms: iOS, Android and macOS.

opacity #

opacity: Number = 1.0

Defines the transparency of the control.

Value ranges from 0.0 (completely transparent) to 1.0 (completely opaque without any transparency) and defaults to 1.0.

page #

page: Page | PageView | None

The page (of type Page or PageView) to which this control belongs to.

parent #

parent: BaseControl | None

The direct ancestor(parent) of this control.

It defaults to None and will only have a value when this control is mounted (added to the page tree).

The Page control (which is the root of the tree) is an exception - it always has parent=None.

prevent_links: list[str] | None = None

List of url-prefixes that should not be followed/loaded/downloaded.

right #

right: OptionalNumber = None

Effective inside Stack only. The distance that the child's right edge is inset from the right of the stack.

rotate #

rotate: RotateValue | None = None

Transforms control using a rotation around the center.

The value of rotate property could be one of the following types:

  • number - a rotation in clockwise radians. Full circle 360° is math.pi * 2 radians, 90° is pi / 2, 45° is pi / 4, etc.
  • transform.Rotate - allows to specify rotation angle as well as alignment - the location of rotation center.

For example:

ft.Image(
    src="https://picsum.photos/100/100",
    width=100,
    height=100,
    border_radius=5,
    rotate=Rotate(angle=0.25 * pi, alignment=ft.Alignment.CENTER_LEFT)
)

rtl #

rtl: bool = False

True to set text direction to right-to-left.

scale #

scale: ScaleValue | None = None

Scale control along the 2D plane. Default scale factor is 1.0 - control is not scaled. 0.5 - the control is twice smaller, 2.0 - the control is twice larger.

Different scale multipliers can be specified for x and y axis, but setting Control.scale property to an instance of transform.Scale class.

Either scale or scale_x and scale_y could be specified, but not all of them, for example:

ft.Image(
    src="https://picsum.photos/100/100",
    width=100,
    height=100,
    border_radius=5,
    scale=Scale(scale_x=2, scale_y=0.5)
)

tooltip #

tooltip: TooltipValue | None = None

The tooltip property supports both strings and Tooltip objects.

top #

top: OptionalNumber = None

Effective inside Stack only. The distance that the child's top edge is inset from the top of the stack.

url #

url: str

The URL of the web page to load.

visible #

visible: bool = True

Every control has visible property which is True by default - control is rendered on the page. Setting visible to False completely prevents control (and all its children if any) from rendering on a page canvas. Hidden controls cannot be focused or selected with a keyboard or mouse and they do not emit any events.

width #

width: OptionalNumber = None

Imposed Control width in virtual pixels.

before_event #

before_event(e: ControlEvent)

before_update #

before_update()

can_go_back_async #

can_go_back_async() -> bool

Whether there's a back history item.

RETURNS DESCRIPTION
bool

True if there is a back history item, False otherwise.
Note

Works only on the following platforms: iOS, Android and macOS.

can_go_forward #

can_go_forward() -> bool

Whether there's a forward history item.

RETURNS DESCRIPTION
bool

True if there is a forward history item, False otherwise.
Note

Works only on the following platforms: iOS, Android and macOS.

clean #

clean() -> None

clear_cache #

clear_cache()

Clears all caches used by the WebView.

The following caches are cleared
  • Browser HTTP Cache
  • Cache API caches. Service workers tend to use this cache.
  • Application cache
Note

Works only on the following platforms: iOS, Android and macOS.

clear_cache_async #

clear_cache_async()

Clears all caches used by the WebView.

The following caches are cleared
  • Browser HTTP Cache
  • Cache API caches. Service workers tend to use this cache.
  • Application cache
Note

Works only on the following platforms: iOS, Android and macOS.

clear_local_storage #

clear_local_storage()

Clears the local storage used by the WebView.

Note

Works only on the following platforms: iOS, Android and macOS.

clear_local_storage_async #

clear_local_storage_async()

Clears the local storage used by the WebView.

Note

Works only on the following platforms: iOS, Android and macOS.

did_mount #

did_mount()

disable_zoom #

disable_zoom()

Disable zooming using the on-screen zoom controls and gestures.

Note

Works only on the following platforms: iOS, Android and macOS.

disable_zoom_async #

disable_zoom_async()

Disable zooming using the on-screen zoom controls and gestures.

Note

Works only on the following platforms: iOS, Android and macOS.

enable_zoom #

enable_zoom()

Enable zooming using the on-screen zoom controls and gestures.

Note

Works only on the following platforms: iOS, Android and macOS.

enable_zoom_async #

enable_zoom_async()

Enable zooming using the on-screen zoom controls and gestures.

Note

Works only on the following platforms: iOS, Android and macOS.

get_current_url_async #

get_current_url_async() -> str | None

Returns the current URL that the WebView is displaying or None if no URL was ever loaded.

RETURNS DESCRIPTION
str | None

The current URL that the WebView is displaying or None if no URL was ever loaded.
Note

Works only on the following platforms: iOS, Android and macOS.

get_title_async #

get_title_async() -> str | None

Returns the title of the currently loaded page.

RETURNS DESCRIPTION
str | None

The title of the currently loaded page.
Note

Works only on the following platforms: iOS, Android and macOS.

get_user_agent_async #

get_user_agent_async() -> str | None

Returns the value used for the HTTP User-Agent: request header.

RETURNS DESCRIPTION
str | None

The value used for the HTTP User-Agent: request header.
Note

Works only on the following platforms: iOS, Android and macOS.

go_back #

go_back()

Go back in the history of the webview, if can_go_back() is True.

Note

Works only on the following platforms: iOS, Android and macOS.

go_back_async #

go_back_async()

Go back in the history of the webview, if can_go_back() is True.

Note

Works only on the following platforms: iOS, Android and macOS.

go_forward #

go_forward()

Go forward in the history of the webview, if can_go_forward() is True.

Note

Works only on the following platforms: iOS, Android and macOS.

go_forward_async #

go_forward_async()

Go forward in the history of the webview, if can_go_forward() is True.

Note

Works only on the following platforms: iOS, Android and macOS.

init #

init()

is_isolated #

is_isolated()

load_file #

load_file(path: str)

Loads the provided local file.

PARAMETER DESCRIPTION
path

The absolute path to the file.

TYPE: str

Note

Works only on the following platforms: iOS, Android and macOS.

load_file_async #

load_file_async(path: str)

Loads the provided local file.

PARAMETER DESCRIPTION
path

The absolute path to the file.

TYPE: str

Note

Works only on the following platforms: iOS, Android and macOS.

load_html #

load_html(value: str, base_url: str | None = None)

Loads the provided HTML string.

PARAMETER DESCRIPTION
value

The HTML string to load.

TYPE: str

base_url

The base URL to use when resolving relative URLs within the value.

TYPE: str | None DEFAULT: None

Note

Works only on the following platforms: iOS, Android and macOS.

load_html_async #

load_html_async(value: str, base_url: str | None = None)

Loads the provided HTML string.

PARAMETER DESCRIPTION
value

The HTML string to load.

TYPE: str

base_url

The base URL to use when resolving relative URLs within the value.

TYPE: str | None DEFAULT: None

Note

Works only on the following platforms: iOS, Android and macOS.

load_request #

load_request(url: str, method: RequestMethod = GET)

Makes an HTTP request and loads the response in the webview.

PARAMETER DESCRIPTION
url

The URL to load.

TYPE: str

method

The HTTP method to use.

TYPE: RequestMethod DEFAULT: GET

load_request_async #

load_request_async(url: str, method: RequestMethod = GET)

Makes an HTTP request and loads the response in the webview.

PARAMETER DESCRIPTION
url

The URL to load.

TYPE: str

method

The HTTP method to use.

TYPE: RequestMethod DEFAULT: GET

Note

Works only on the following platforms: iOS, Android and macOS.

reload #

reload()

Reloads the current URL.

Note

Works only on the following platforms: iOS, Android and macOS.

reload_async #

reload_async()

Reloads the current URL.

Note

Works only on the following platforms: iOS, Android and macOS.

run_javascript #

run_javascript(value: str)

Runs the given JavaScript in the context of the current page.

PARAMETER DESCRIPTION
value

The JavaScript code to run.

TYPE: str

Note

Works only on the following platforms: iOS, Android and macOS.

run_javascript_async #

run_javascript_async(value: str)

Runs the given JavaScript in the context of the current page.

PARAMETER DESCRIPTION
value

The JavaScript code to run.

TYPE: str

Note

Works only on the following platforms: iOS, Android and macOS.

scroll_by #

scroll_by(x: int, y: int)

Scroll by the provided number of webview pixels.

PARAMETER DESCRIPTION
x

The number of pixels to scroll by on the x-axis.

TYPE: int

y

The number of pixels to scroll by on the y-axis.

TYPE: int

Note

Works only on the following platforms: iOS, Android and macOS.

scroll_by_async #

scroll_by_async(x: int, y: int)

Scroll by the provided number of webview pixels.

PARAMETER DESCRIPTION
x

The number of pixels to scroll by on the x-axis.

TYPE: int

y

The number of pixels to scroll by on the y-axis.

TYPE: int

Note

Works only on the following platforms: iOS, Android and macOS.

scroll_to #

scroll_to(x: int, y: int)

Scroll to the provided position of webview pixels.

PARAMETER DESCRIPTION
x

The x-coordinate of the scroll position.

TYPE: int

y

The y-coordinate of the scroll position.

TYPE: int

Note

Works only on the following platforms: iOS, Android and macOS.

scroll_to_async #

scroll_to_async(x: int, y: int)

Scroll to the provided position of webview pixels.

PARAMETER DESCRIPTION
x

The x-coordinate of the scroll position.

TYPE: int

y

The y-coordinate of the scroll position.

TYPE: int

Note

Works only on the following platforms: iOS, Android and macOS.

update #

update() -> None

will_unmount #

will_unmount()