Map
Map
#
Bases: ConstrainedControl
An interactive map that displays various layers.
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)
animation_curve
#
animation_curve: AnimationCurve = FAST_OUT_SLOWIN
The default animation curve to be used for map-animations
when calling instance methods like zoom_in()
,
rotate_from()
,
move_to()
etc.
animation_duration
#
animation_duration: DurationValue = field(
default_factory=lambda: Duration(milliseconds=500)
)
The default animation duration to be used for map-animations
when calling instance methods like zoom_in()
,
rotate_from()
,
move_to()
etc.
bottom
#
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).
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:
expand
#
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)
initial_camera_fit
#
initial_camera_fit: CameraFit | None = None
Defines the visible bounds when the map is first loaded.
Takes precedence over initial_center
/initial_zoom
.
initial_center
#
initial_center: MapLatitudeLongitude = field(
default_factory=lambda: MapLatitudeLongitude(
latitude=50.5, longitude=30.51
)
)
The initial center of the map.
initial_rotation
#
initial_rotation: Number = 0.0
The rotation (in degrees) when the map is first loaded.
initial_zoom
#
initial_zoom: Number = 13.0
The zoom when the map is first loaded. If initial_camera_fit is defined this has no effect.
interaction_configuration
#
interaction_configuration: InteractionConfiguration = field(
default_factory=lambda: InteractionConfiguration()
)
The interaction configuration.
keep_alive
#
keep_alive: bool = False
Whether to enable the built in keep-alive functionality.
If the map is within a complex layout, such as a ListView
,
the map will reset to it's inital position after it appears back into view.
To ensure this doesn't happen, enable this flag to prevent it from rebuilding.
left
#
Effective inside Stack
only. The distance
that the child's left edge is inset from the left of the stack.
max_zoom
#
max_zoom: Number | None = None
The maximum (highest) zoom level of every layer. Each layer can specify additional zoom level restrictions.
min_zoom
#
min_zoom: Number | None = None
The minimum (smallest) zoom level of every layer. Each layer can specify additional zoom level restrictions.
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:
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:
on_long_press
#
on_long_press: EventHandler[MapTapEvent] | None = None
Fires when a long press event occurs.
on_pointer_cancel
#
on_pointer_cancel: EventHandler[MapPointerEvent] | None = (
None
)
Fires when a pointer cancel event occurs.
on_pointer_down
#
on_pointer_down: EventHandler[MapPointerEvent] | None = None
Fires when a pointer down event occurs.
on_pointer_up
#
on_pointer_up: EventHandler[MapPointerEvent] | None = None
Fires when a pointer up event occurs.
on_position_change
#
on_position_change: (
EventHandler[MapPositionChangeEvent] | None
) = None
Fires when the map position changes.
on_secondary_tap
#
on_secondary_tap: EventHandler[MapTapEvent] | None = None
Fires when a secondary tap event occurs.
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
#
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
.
right
#
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 circle360°
ismath.pi * 2
radians,90°
ispi / 2
,45°
ispi / 4
, etc.transform.Rotate
- allows to specify rotationangle
as well asalignment
- the location of rotation center.
For example:
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:
tooltip
#
tooltip: TooltipValue | None = None
The tooltip
property supports both strings
and Tooltip
objects.
top
#
Effective inside Stack
only. The distance
that the child's top edge is inset from the top of the stack.
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.
center_on
#
center_on(
point: MapLatitudeLongitude | None,
zoom: Number | None,
animation_curve: AnimationCurve | None = None,
animation_duration: DurationValue | None = None,
cancel_ongoing_animations: bool = False,
) -> None
Centers the map on the given point.
PARAMETER | DESCRIPTION |
---|---|
point
|
The point on which to center the map.
TYPE:
|
zoom
|
The zoom level to be applied.
TYPE:
|
animation_curve
|
The curve of the animation. If None (the default),
TYPE:
|
animation_duration
|
The duration of the animation.
If None (the default),
TYPE:
|
cancel_ongoing_animations
|
Whether to cancel/stop all ongoing map-animations before starting this new one.
TYPE:
|
center_on_async
#
center_on_async(
point: MapLatitudeLongitude,
zoom: Number | None,
animation_curve: AnimationCurve | None = None,
animation_duration: DurationValue | None = None,
cancel_ongoing_animations: bool = False,
) -> None
Centers the map on the given point.
PARAMETER | DESCRIPTION |
---|---|
point
|
The point on which to center the map.
TYPE:
|
zoom
|
The zoom level to be applied.
TYPE:
|
animation_curve
|
The curve of the animation. If None (the default),
TYPE:
|
animation_duration
|
The duration of the animation.
If None (the default),
TYPE:
|
cancel_ongoing_animations
|
Whether to cancel/stop all ongoing map-animations before starting this new one.
TYPE:
|
move_to
#
move_to(
destination: MapLatitudeLongitude | None = None,
zoom: Number | None = None,
rotation: Number | None = None,
animation_curve: AnimationCurve | None = None,
animation_duration: DurationValue | None = None,
offset: OffsetValue = Offset(0, 0),
cancel_ongoing_animations: bool = False,
) -> None
Moves to a specific location.
PARAMETER | DESCRIPTION |
---|---|
destination
|
The destination point to move to.
TYPE:
|
zoom
|
The zoom level to be applied. If provided,
must be greater than or equal to
TYPE:
|
rotation
|
Rotation (in degrees) to be applied.
TYPE:
|
offset
|
The offset to be used. Only works when
TYPE:
|
animation_curve
|
The curve of the animation. If None (the default),
TYPE:
|
animation_duration
|
The duration of the animation.
If None (the default),
TYPE:
|
cancel_ongoing_animations
|
Whether to cancel/stop all ongoing map-animations before starting this new one.
TYPE:
|
RAISES | DESCRIPTION |
---|---|
AssertionError
|
If |
move_to_async
#
move_to_async(
destination: MapLatitudeLongitude | None = None,
zoom: Number | None = None,
rotation: Number | None = None,
animation_curve: AnimationCurve | None = None,
animation_duration: DurationValue | None = None,
offset: OffsetValue = Offset(0, 0),
cancel_ongoing_animations: bool = False,
) -> None
Moves to a specific location.
PARAMETER | DESCRIPTION |
---|---|
destination
|
The destination point to move to.
TYPE:
|
zoom
|
The zoom level to be applied. If provided,
must be greater than or equal to
TYPE:
|
rotation
|
Rotation (in degrees) to be applied.
TYPE:
|
offset
|
The offset to be used. Only works when
TYPE:
|
animation_curve
|
The curve of the animation. If None (the default),
TYPE:
|
animation_duration
|
The duration of the animation.
If None (the default),
TYPE:
|
cancel_ongoing_animations
|
Whether to cancel/stop all ongoing map-animations before starting this new one.
TYPE:
|
RAISES | DESCRIPTION |
---|---|
AssertionError
|
If |
reset_rotation
#
reset_rotation(
animation_curve: AnimationCurve | None = None,
animation_duration: DurationValue = None,
cancel_ongoing_animations: bool = False,
) -> None
Resets the map's rotation to 0 degrees.
PARAMETER | DESCRIPTION |
---|---|
animation_curve
|
The curve of the animation. If None (the default),
TYPE:
|
animation_duration
|
The duration of the animation.
If None (the default),
TYPE:
|
cancel_ongoing_animations
|
Whether to cancel/stop all ongoing map-animations before starting this new one.
TYPE:
|
reset_rotation_async
#
reset_rotation_async(
animation_curve: AnimationCurve | None = None,
animation_duration: DurationValue | None = None,
cancel_ongoing_animations: bool = False,
) -> None
Resets the map's rotation to 0 degrees.
PARAMETER | DESCRIPTION |
---|---|
animation_curve
|
The curve of the animation. If None (the default),
TYPE:
|
animation_duration
|
The duration of the animation.
If None (the default),
TYPE:
|
cancel_ongoing_animations
|
Whether to cancel/stop all ongoing map-animations before starting this new one.
TYPE:
|
rotate_from
#
rotate_from(
degree: Number,
animation_curve: AnimationCurve | None = None,
animation_duration: DurationValue | None = None,
cancel_ongoing_animations: bool = False,
) -> None
Applies a rotation of degree
to the current rotation.
PARAMETER | DESCRIPTION |
---|---|
degree
|
The number of degrees to increment to the current rotation.
TYPE:
|
animation_curve
|
The curve of the animation. If None (the default),
TYPE:
|
animation_duration
|
The duration of the animation.
If None (the default),
TYPE:
|
cancel_ongoing_animations
|
Whether to cancel/stop all ongoing map-animations before starting this new one.
TYPE:
|
rotate_from_async
#
rotate_from_async(
degree: Number,
animation_curve: AnimationCurve | None = None,
animation_duration: DurationValue | None = None,
cancel_ongoing_animations: bool = False,
) -> None
Applies a rotation of degree
to the current rotation.
PARAMETER | DESCRIPTION |
---|---|
degree
|
The number of degrees to increment to the current rotation.
TYPE:
|
animation_curve
|
The curve of the animation. If None (the default),
TYPE:
|
animation_duration
|
The duration of the animation.
If None (the default),
TYPE:
|
cancel_ongoing_animations
|
Whether to cancel/stop all ongoing map-animations before starting this new one.
TYPE:
|
zoom_in
#
zoom_in(
animation_curve: AnimationCurve | None = None,
animation_duration: DurationValue | None = None,
cancel_ongoing_animations: bool = False,
) -> None
Zooms in by one zoom-level from the current one.
PARAMETER | DESCRIPTION |
---|---|
animation_curve
|
The curve of the animation. If None (the default),
TYPE:
|
animation_duration
|
The duration of the animation.
If None (the default),
TYPE:
|
cancel_ongoing_animations
|
Whether to cancel/stop all ongoing map-animations before starting this new one.
TYPE:
|
zoom_in_async
#
zoom_in_async(
animation_curve: AnimationCurve | None = None,
animation_duration: DurationValue | None = None,
cancel_ongoing_animations: bool = False,
) -> None
Zooms in by one zoom-level from the current one.
PARAMETER | DESCRIPTION |
---|---|
animation_curve
|
The curve of the animation. If None (the default),
TYPE:
|
animation_duration
|
The duration of the animation.
If None (the default),
TYPE:
|
cancel_ongoing_animations
|
Whether to cancel/stop all ongoing map-animations before starting this new one.
TYPE:
|
zoom_out
#
zoom_out(
animation_curve: AnimationCurve | None = None,
animation_duration: DurationValue | None = None,
cancel_ongoing_animations: bool = False,
) -> None
Zooms out by one zoom-level from the current one.
PARAMETER | DESCRIPTION |
---|---|
animation_curve
|
The curve of the animation. If None (the default),
TYPE:
|
animation_duration
|
The duration of the animation.
If None (the default),
TYPE:
|
cancel_ongoing_animations
|
Whether to cancel/stop all ongoing map-animations before starting this new one.
TYPE:
|
zoom_out_async
#
zoom_out_async(
animation_curve: AnimationCurve | None = None,
animation_duration: DurationValue | None = None,
cancel_ongoing_animations: bool = False,
) -> None
Zooms out by one zoom-level from the current one.
PARAMETER | DESCRIPTION |
---|---|
animation_curve
|
The curve of the animation. If None (the default),
TYPE:
|
animation_duration
|
The duration of the animation.
If None (the default),
TYPE:
|
cancel_ongoing_animations
|
Whether to cancel/stop all ongoing map-animations before starting this new one.
TYPE:
|
zoom_to
#
zoom_to(
zoom: Number,
animation_curve: AnimationCurve | None = None,
animation_duration: DurationValue | None = None,
cancel_ongoing_animations: bool = False,
) -> None
Zoom the map to a specific zoom level.
PARAMETER | DESCRIPTION |
---|---|
zoom
|
The zoom level to zoom to.
TYPE:
|
animation_curve
|
The curve of the animation. If None (the default),
TYPE:
|
animation_duration
|
The duration of the animation.
If None (the default),
TYPE:
|
cancel_ongoing_animations
|
Whether to cancel/stop all ongoing map-animations before starting this new one.
TYPE:
|
zoom_to_async
#
zoom_to_async(
zoom: Number,
animation_curve: AnimationCurve | None = None,
animation_duration: DurationValue | None = None,
cancel_ongoing_animations: bool = False,
) -> None
Zoom the map to a specific zoom level.
PARAMETER | DESCRIPTION |
---|---|
zoom
|
The zoom level to zoom to.
TYPE:
|
animation_curve
|
The curve of the animation. If None (the default),
TYPE:
|
animation_duration
|
The duration of the animation.
If None (the default),
TYPE:
|
cancel_ongoing_animations
|
Whether to cancel/stop all ongoing map-animations before starting this new one.
TYPE:
|