Flet is a fast-evolving framework with a new functionality and bug fixes being committed every other day.

The development model with one pull request per release didn't work well for the project as users waited for weeks to get hands on a new release and, honestly, from development perspective producing large "heroic" releases takes a lot of energy 🫠.

From now on we'll be breaking releases into multiple pull requests with one feature/bugfix per PR.

Every PR merged into main branch will be publishing pre-release (developmental release) package to pypi.org having version format of X.Y.Z.devN.

Installing pre-releases​

To install Flet pre-release package use the following command:

pip install flet --pre

Flet versioning​

Flet is switching to Semanting Versioning with a version number MAJOR.MINOR.PATCH:

1. MAJOR will be incremented when there are "incompatible API changes". Right now it's 0 and we expect to make it 1 when we feel that Flet API is stable enough.
2. MINOR will be incremented when a new functionality added in a backwards compatible manner.
3. PATCH will be incremented when we make backward compatible bug fixes.

According to that rule, upcoming Flet release will have version 0.2.0. Bug fixes for that release will be labeled as 0.2.1, 0.2.2, etc. The release after that release will be 0.3.0 and so on.

Flet pre-releases will have a format of MAJOR.{LAST_MINOR + 1}.0.dev{BUILD} where LAST_MINOR is MINOR version of the last release and {BUILD} is a build number set by CI. For example, if the last published release is 0.1.65 pre-releases will have versions 0.2.0.dev{BUILD}. Pre-releases after 0.2.0 release will be labeled as 0.3.0.dev{BUILD}.

We just released Flet 0.1.65 which is adding a bunch of mobile-optimized controls, fixing some bugs and introducing a new layout control - ResponsiveRow.

ResponsiveRow control​

ResponsiveRow borrows the idea of grid layout from Bootstrap web framework.

ResponsiveRow allows aligning child controls to virtual columns. By default, a virtual grid has 12 columns, but that can be customized with ResponsiveRow.columns property.

Similar to expand property every control now has col property which allows specifying how many columns a control should span. For example, to make a layout consisting of two columns spanning 6 virtual columns each:

import flet as ft

ft.ResponsiveRow([
    ft.Column(col=6, controls=ft.Text("Column 1")),
    ft.Column(col=6, controls=ft.Text("Column 2"))
])

ResponsiveRow is "responsive" because it can adapt the size of its children to a changing screen (page, window) size. col property in the example above is a constant number which means the child will span 6 columns for any screen size.

If ResponsiveRow's child doesn't have col property specified it spans the maximum number of columns.

col can be configured to have a different value for specific "breakpoints". Breakpoints are named dimension ranges:

For example, the following example collapses content into a single column on a mobile device and takes two columns on larger screens:

import flet as ft

ft.ResponsiveRow([
    ft.Column(col={"sm": 6}, controls=ft.Text("Column 1")),
    ft.Column(col={"sm": 6}, controls=ft.Text("Column 2"))
])

Here is more elaborate example of responsive layout:

import flet as ft

def main(page: ft.Page):
    def page_resize(e):
        pw.value = f"{page.width} px"
        pw.update()

    page.on_resize = page_resize

    pw = ft.Text(bottom=50, right=50, style="displaySmall")
    page.overlay.append(pw)
    page.add(
        ft.ResponsiveRow(
            [
                ft.Container(
                    ft.Text("Column 1"),
                    padding=5,
                    bgcolor=ft.colors.YELLOW,
                    col={"sm": 6, "md": 4, "xl": 2},
                ),
                ft.Container(
                    ft.Text("Column 2"),
                    padding=5,
                    bgcolor=ft.colors.GREEN,
                    col={"sm": 6, "md": 4, "xl": 2},
                ),
                ft.Container(
                    ft.Text("Column 3"),
                    padding=5,
                    bgcolor=ft.colors.BLUE,
                    col={"sm": 6, "md": 4, "xl": 2},
                ),
                ft.Container(
                    ft.Text("Column 4"),
                    padding=5,
                    bgcolor=ft.colors.PINK_300,
                    col={"sm": 6, "md": 4, "xl": 2},
                ),
            ],
        ),
        ft.ResponsiveRow(
            [
                ft.TextField(label="TextField 1", col={"md": 4}),
                ft.TextField(label="TextField 2", col={"md": 4}),
                ft.TextField(label="TextField 3", col={"md": 4}),
            ],
            run_spacing={"xs": 10},
        ),
    )
    page_resize(None)

ft.app(target=main)

ResponsiveRow docs, example.

Other new controls​

This release adds new visual and non-visual controls requested by Flet community and also required to build UI of the upcoming Flet Studio.

BottomSheet​

Shows a modal Material Design bottom sheet:

BottomSheet docs, example.

NavigationBar​

Bottom Navigation bar which offers a persistent and convenient way to switch between primary destinations in an app:

NavigationBar docs, example.

Tooltip​

A tooltip control:

Tooltip docs, example.

HapticFeedback​

Allows access to the haptic feedback (clicks and vibrates) interface on the device.

HapticFeedback docs.

ShakeDetector​

A control to detect phone shakes. Based on shake widget.

ShakeDetector docs.

Other improvements​

Markdown code syntax highlight​

Sample code.

Variable fonts support​

Flutter has finally supported variable fonts and we bring that into Flet too!

Sample code.

Upgrade Flet module to the latest version (pip install flet --upgrade) and let us know what you think!

Enjoy!

We are thrilled to introduce Matplotlib and Plotly charting controls in Flet 0.1.63!

Matplotlib and Plotly are the most recognized Python charting libraries with a ton of features. They are greatly compatible with other scientific Python libraries such as Numpy or Pandas.

No doubt, it would be nearly impossible to replicate their functionality as pure Flutter widgets. Fortunately, both Matplotlib and Plotly can export charts into various formats, such as SVG. On the other hand Flet can display SVG images and that gives a perfect combination - Flet charting controls for Matplotlib and Plotly!

The resulting solution works so great that it's possible to display almost any example from Matplotlib and Plotly galleries - your imagination is the only limit!

Plot a simple bar chart:

a nice scatter with legend:

or some multi-chart contour plot:

Check the docs for Matplotlib and Plotly charting controls:

• MatplotlibChart
• PlotlyChart

Explore Flet chart examples.

Learn Python libraries by examples:

• Matplotlib gallery
• Plotly gallery

In the future releases, we may add an interactive "toolbar" for Matplotlib charts by implementing a custom backend. Or maybe it's a great exercise for Flet users? 😉

Also, when it's time for Flet to support other languages we would need to re-visit charting to make it language-agnostic as the current charting implementation relies on Python libraries.

Upgrade Flet module to the latest version (pip install flet --upgrade), integrate auth in your app and let us know what you think!

Enjoy!

We've just released Flet 0.1.62 with support of gestures processing!

There is a new control - GestureDetector which allows handling all sorts of gestures: single and double taps with a left (primary) and right (secondary) mouse (pointer) buttons, vertical, horizontal and bi-directional drags, zoom (pinch-in and pinch-out) gestures as well as hover events. Now, by wrapping it into GestureDetector, you can make any Flet control "clickable" and "draggable"!

Here is a simple example of an app which allows you to drag containers inside a Stack:

import flet as ft

def main(page: ft.Page):
    def on_pan_update(e: ft.DragUpdateEvent):
        e.control.top = max(0, e.control.top + e.delta_y)
        e.control.left = max(0, e.control.left + e.delta_x)
        e.control.update()

    gd = ft.GestureDetector(
        mouse_cursor=ft.MouseCursor.MOVE,
        on_vertical_drag_update=on_pan_update,
        left=100,
        top=100,
        content=ft.Container(bgcolor=ft.colors.BLUE, width=50, height=50, border_radius=5),
    )

    page.add( ft.Stack([gd], expand=True))

ft.app(target=main)

Gesture detector is yet another great addition to a collection of Flet primitives that allows you to build apps limited only by your imagination. 2D drawing coming later this month is going to complete that ensemble!

That release wasn't about only gestures though - that was a "stabilization" release too. We fixed a number of bugs and added a bunch of other small features which you can see here.

Upgrade Flet module to the latest version (pip install flet --upgrade), integrate auth in your app and let us know what you think!

Enjoy!

User authentication in Flet is here! 🎉

Now you can implement user authentication ("Login with X" buttons) in your Flet app using 3rd-party identity providers such as GitHub, Google, Azure, Auth0, LinkedIn and others:

Traditionally, this release is not just about authentication, but it adds a ton of accompanying functionality and small improvements:

Authentication​

Flet authentication features:

• Works with Flet desktop, web and mobile apps.
• Using multiple authentication providers in one app.
• Built-in OAuth providers with automatic user details fetching:
  • GitHub
  • Azure
  • Google
  • Auth0
• Optional groups fetching.
• Automatic token refresh.
• Login with a saved token ("Remember me").
• Custom OAuth providers.

A simple example on how to add "Login with GitHub" button to your Flet app:

import os

import flet as ft
from flet.auth.providers.github_oauth_provider import GitHubOAuthProvider

def main(page: ft.Page):

    provider = GitHubOAuthProvider(
        client_id=os.getenv("GITHUB_CLIENT_ID"),
        client_secret=os.getenv("GITHUB_CLIENT_SECRET"),
        redirect_url="http://localhost:8550/api/oauth/redirect",
    )

    def login_click(e):
        page.login(provider)

    def on_login(e):
        print("Access token:", page.auth.token.access_token)
        print("User ID:", page.auth.user.id)

    page.on_login = on_login
    page.add(ft.ElevatedButton("Login with GitHub", on_click=login_click))

ft.app(target=main, port=8550, view=ft.AppView.WEB_BROWSER)

$ export GITHUB_CLIENT_ID="<client_id>"
$ export GITHUB_CLIENT_SECRET="<client_secret>"

Read Authentication guide for more information and examples.

Client storage​

Flet's client storage API that allows storing key-value data on a client side in a persistent storage. Flet implementation uses shared_preferences Flutter package.

Writing data to the storage:

page.client_storage.set("key", "value")

Reading data:

value = page.client_storage.get("key")

Read Client storage guide for more information and examples.

Session storage​

Flet introduces an API for storing key-value data in user's session on a server side.

Writing data to the session:

page.session.set("key", "value")

Reading data:

value = page.session.get("key")

Read Session storage guide for more information and examples

Encryption API​

In this release Flet introduces utility methods to encrypt and decrypt sensitive text data using symmetric algorithm (where the same key is used for encryption and decryption). It uses Fernet implementation from cryptography package, which is AES 128 with some additional hardening, plus PBKDF2 to derive encryption key from a user passphrase.

Encrypting data:

from flet.security import encrypt, decrypt
secret_key = "S3CreT!"
plain_text = "This is a secret message!"
encrypted_data = encrypt(plain_text, secret_key)

Decrypting data:

from flet.security import encrypt, decrypt
secret_key = "S3CreT!"
plain_text = decrypt(encrypted_data, secret_key)
print(plain_text)

Continue reading for more information and examples.

Other improvements​

• SVG image support (example) and new images properties:
  • Image.color
  • Image.color_blend_mode
  • Image.semantics_label
  • Image.gapless_playback
• on_animation_end callback to chain animations.
• Container.clip_behavior property.
• page.window_bgcolor to make cool transparent app window:

import flet as ft
def main(page: ft.Page):
    page.window_bgcolor = ft.colors.TRANSPARENT
    page.bgcolor=ft.colors.TRANSPARENT
    page.window_title_bar_hidden = True
    page.window_frameless = True
    page.window_left = 400
    page.window_top = 400
    page.add(ft.ElevatedButton("I'm a floating button!"))
ft.app(target=main)

• page.get_clipboard()
• page.launch_url() - better control with additional arguments:
  • web_window_name - window tab/name to open URL in: _self - the same tab, _blank - a new tab or <your name> - a named tab.
  • web_popup_window - set to True to display a URL in a browser popup window. Default is False.
  • window_width - optional, popup window width.
  • window_height - optional, popup window height.
• page.window_to_front()
• page.close_in_app_web_view()

Upgrade Flet module to the latest version (pip install flet --upgrade), integrate auth in your app and let us know what you think!

Enjoy!