Markdown
Examples#
Basic Example#
import flet as ft
sample = """
# Markdown Example
Markdown allows you to easily include formatted text, images, and even formatted Dart code in your app.
## Titles
Setext-style
This is an H1
=============
This is an H2
-------------
Atx-style
# This is an H1
## This is an H2
###### This is an H6
Select the valid headers:
- [x] `# hello`
- [ ] `#hello`
## Links
[inline-style](https://www.google.com)
## Images
## Tables
|Syntax |Result |
|---------------------------------------|-------------------------------------|
|`*italic 1*` |*italic 1* |
|`_italic 2_` | _italic 2_ |
|`**bold 1**` |**bold 1** |
|`__bold 2__` |__bold 2__ |
|`This is a ~~strikethrough~~` |This is a ~~strikethrough~~ |
|`***italic bold 1***` |***italic bold 1*** |
|`___italic bold 2___` |___italic bold 2___ |
|`***~~italic bold strikethrough 1~~***`|***~~italic bold strikethrough 1~~***|
|`~~***italic bold strikethrough 2***~~`|~~***italic bold strikethrough 2***~~|
## Styling
Style text as _italic_, __bold__, ~~strikethrough~~, or `inline code`.
- Use bulleted lists
- To better clarify
- Your points
## Code blocks
Formatted Dart code looks really pretty too:
"""
def main(page: ft.Page):
page.scroll = ft.ScrollMode.AUTO
def handle_link_tap(e: ft.Event[ft.Markdown]):
page.launch_url(e.data)
page.add(
ft.Markdown(
value=sample,
selectable=True,
extension_set=ft.MarkdownExtensionSet.GITHUB_WEB,
on_tap_link=handle_link_tap,
)
)
ft.run(main)
Code syntax highlight#
import flet as ft
sample = """
# Flet
<img src="https://raw.githubusercontent.com/flet-dev/flet/flet-widget/media/logo/flet-logo.svg" width="50%"/>
Flet is a framework for adding server-driven UI (SDUI) experiences to existing Flutter apps or building standalone web, mobile and desktop apps with Flutter UI.
Add an interactive `FletApp` widget to your Flutter app whose content is controlled by a remote Python script.
It is an ideal solution for building non-core or frequently changing functionality such as product catalog, feedback form, in-app survey or support chat. Flet enables your team to ship new features faster by reducing the number of App Store validation cycles. Just re-deploy a web app hosting a Python script and your users will get an instant update!
On the server side Flet provides an easy to learn programming model that enables Python developers without prior Flutter (or even front-end) experience to participate in development of your larger Flutter app or build their own apps with Flutter UI from scratch.
## Getting started with Flet
### Install `flet` Python module
Flet requires Python 3.7 or above. To start with Flet, you need to install flet module first:
### Create Python program
Create a new Python program using Flet which will be driving the content of `FletApp` widget.
Let's do a simple `counter.py` app similar to a Flutter new project template:
```python
import flet
from flet import IconButton, Page, Row, TextField, icons
def main(page: Page):
page.title = "Flet counter example"
page.vertical_alignment = "center"
txt_number = TextField(value="0", text_align="right", width=100)
def minus_click(e):
txt_number.value = int(txt_number.value) - 1
page.update()
def plus_click(e):
txt_number.value = int(txt_number.value) + 1
page.update()
page.add(
Row(
[
IconButton(icons.REMOVE, on_click=minus_click),
txt_number,
IconButton(icons.ADD, on_click=plus_click),
],
alignment="center",
)
)
flet.app(main, port=8550)
Run the app:
You should see the app running in a native OS window.
There is a web server (Fletd) running in the background on a fixed port 8550. Fletd web server is a "bridge" between Python and Flutter.
FletApp widget in your Flutter application will be communicating with Fletd web server via WebSockets to receive UI updates and send user-generated UI events.
For production use Python app along with Fletd could be deployed to a public web host and be accessible via HTTPS with domain name.
Add Flet widget to a Flutter app#
Create a new or open existing Flutter project.
Install Flutter flet package:
For a new project replace main.dart with the following:
import 'package:flet/flet.dart';
import 'package:flutter/material.dart';
void main() async {
await setupDesktop();
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flet Flutter Demo',
home: FletApp(pageUrl: "http://localhost:8550"),
);
}
}
In the app above FletApp widget is hosted inside MaterialApp widget.
If Flet app must be able to handle page route change events (web browser URL changes, mobile app deep linking) it must be the top most widget as it contains its own MaterialApp widget handling route changes:
import 'package:flet/flet.dart';
import 'package:flutter/material.dart';
void main() async {
await setupDesktop();
runApp(const FletApp(pageUrl: "http://localhost:8550"));
}
Run the program and see Flet app running inside a Flutter app.
When adding FletApp widget to the existing desktop Flutter app make sure setupDesktop() is called before runApp() to initialize Flet's built-in window manager.
Flet learning resources#
Flet community#
FAQ#
Coming soon.
Adding custom Flutter widgets#
Coming soon. """
def main(page: ft.Page): page.scroll = ft.ScrollMode.AUTO
page.fonts = {
"Roboto Mono": "RobotoMono-VariableFont_wght.ttf",
}
page.add(
ft.Markdown(
value=sample,
selectable=True,
extension_set=ft.MarkdownExtensionSet.GITHUB_WEB,
code_theme=ft.MarkdownCodeTheme.ATOM_ONE_DARK,
code_style_sheet=ft.MarkdownStyleSheet(
code_text_style=ft.TextStyle(font_family="Roboto Mono")
),
on_tap_link=lambda e: page.launch_url(e.data),
)
)
ft.run(main)
{width="80%"}
/// caption
///
### Custom text theme
```python
import flet as ft
def main(page: ft.Page):
page.theme_mode = ft.ThemeMode.DARK
def change_theme_mode(e: ft.Event[ft.Switch]):
if page.theme_mode == ft.ThemeMode.DARK:
page.theme_mode = ft.ThemeMode.LIGHT
switch.thumb_icon = ft.Icons.LIGHT_MODE
else:
switch.thumb_icon = ft.Icons.DARK_MODE
page.theme_mode = ft.ThemeMode.DARK
page.update()
switch = ft.Switch(thumb_icon=ft.Icons.DARK_MODE, on_change=change_theme_mode)
page.add(
ft.Row(
alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
controls=[
ft.Container(
content=ft.Markdown("I can read this!"),
bgcolor="#550000",
padding=20,
theme=ft.Theme(
text_theme=ft.TextTheme(
body_medium=ft.TextStyle(color=ft.Colors.WHITE),
body_large=ft.TextStyle(color=ft.Colors.WHITE),
body_small=ft.TextStyle(color=ft.Colors.WHITE),
)
),
),
ft.Container(
content=switch,
padding=ft.Padding.only(bottom=50),
alignment=ft.Alignment.TOP_RIGHT,
),
],
)
)
ft.run(main)
Bases: ConstrainedControl
Renders text in markdown format.
animate_offset: AnimationValue | None = None
animate_opacity: AnimationValue | None = None
animate_position: AnimationValue | None = None
animate_rotation: AnimationValue | None = None
animate_scale: AnimationValue | None = None
auto_follow_links: bool = False
Automatically open URLs in the document.
If registered, on_tap_link event is fired after that.
auto_follow_links_target: UrlTarget | None = None
Where to open URL in the web mode.
bottom: Number | None = None
The distance that the child's bottom edge is inset from the bottom of the stack.
Note
Effective only if this control is a descendant of one of the following:
Stack control, Page.overlay list.
code_style_sheet: MarkdownStyleSheet | None = None
The styles to use when displaying the code blocks.
code_theme: (
MarkdownCodeTheme | MarkdownCustomCodeTheme | None
) = None
A syntax highlighting theme for code blocks.
Defaults to MarkdownCodeTheme.GITHUB.
col: ResponsiveNumber = 12
If a parent of this control is a ResponsiveRow,
this property is used to determine
how many virtual columns of a screen this control will span.
Can be a number or a dictionary configured to have a different value for specific
breakpoints, for example col={"sm": 6}.
This control spans the 12 virtual columns by default.
Dimensions
| Breakpoint | Dimension |
|---|---|
| xs | <576px |
| sm | ≥576px |
| md | ≥768px |
| lg | ≥992px |
| xl | ≥1200px |
| xxl | ≥1400px |
disabled: bool = False
Every control has disabled property which is False by default - control and all
its children are enabled.
Note
The value of this property will be propagated down to all children controls recursively.
expand_loose: bool = False
Allows the control to expand along the main axis if space is available, but does not require it to fill all available space.
More information here.
extension_set: MarkdownExtensionSet = NONE
The extensions to use when rendering the markdown content.
image_error_content: Control | None = None
The control to display when an image fails to load.
left: Number | None = None
The distance that the child's left edge is inset from the left of the stack.
Note
Effective only if this control is a descendant of one of the following:
Stack control, Page.overlay list.
md_style_sheet: MarkdownStyleSheet | None = None
The styles to use when displaying the markdown.
offset: OffsetValue | None = None
Applies a translation transformation before painting the control.
The translation is expressed as an Offset scaled to the control's size.
So, Offset(x=0.25, y=0), for example, will result in a horizontal translation
of one quarter the width of this control.
Example
The following example displays container at 0, 0 top left corner of a stack as
transform applies -1 * 100, -1 * 100 (offset * control's size) horizontal and
vertical translations to the control:
on_animation_end: (
ControlEventHandler[ConstrainedControl] | None
) = None
Called when animation completes.
Can be used to chain multiple animations.
The data property of the event handler argument contains the name of the animation.
More information here.
on_selection_change: (
EventHandler[TextSelectionChangeEvent[Markdown]] | None
) = None
Called when the text selection changes.
on_tap_link: ControlEventHandler[Markdown] | None = None
Called when a link within Markdown document is clicked/tapped.
The data property of the event handler argument contains the clickedURL.
on_tap_text: ControlEventHandler[Markdown] | None = None
Called when some text is clicked/tapped.
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).
The page (of type Page or PageView) to which this control belongs to.
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: Number | None = None
The distance that the child's right edge is inset from the right of the stack.
Note
Effective only if this control is a descendant of one of the following:
Stack control, Page.overlay list.
rotate: RotateValue | None = None
Transforms this control using a rotation around its center.
The value of rotate property could be one of the following types:
number- a rotation in clockwise radians. Full circle360°ismath.pi * 2radians,90°ispi / 2,45°ispi / 4, etc.Rotate- allows to specify rotationangleas well asalignment- the location of rotation center.
scale: ScaleValue | None = None
Scales this control along the 2D plane. Default scale factor is 1.0, meaning no-scale.
Setting this property to 0.5, for example, makes this control twice smaller, while 2.0 makes it twice larger.
Different scale multipliers can be specified for x and y axis, by setting
Control.scale property to an instance of Scale class.
Either scale or scale_x and scale_y could be specified, but not all of them.
shrink_wrap: bool = True
Whether the extent of the scroll view in the scroll direction should be determined by the contents being viewed.
soft_line_break: bool = False
The soft line break is used to identify the spaces at the end of a line of text and the leading spaces in the immediately following the line of text.
tooltip: TooltipValue | None = None
The tooltip ot show when this control is hovered over.
top: Number | None = None
The distance that the child's top edge is inset from the top of the stack.
Note
Effective only if this control is a descendant of one of the following:
Stack control, Page.overlay list.
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.