Python GUIs: Getting Started With Flet for GUI Development — Your First Steps With the Flet Library

Getting started with a new GUI framework can feel daunting. This guide walks you through the essentials of Flet, from installation and a first app to widgets, layouts, and event handling.

With Flet, you can quickly build modern, high‑performance desktop, web, and mobile interfaces using Python.

Getting to Know Flet

Fletis a cross-platform GUI framework for Python. It enables the development of interactive applications that run as native desktop applications on Windows, macOS, and Linux. Flet apps also run in the browser and even as mobile apps. Flet uses Flutter under the hood, providing a modern look and feel with responsive layouts.

The library's key features include:

• Modern, consistent UIacross desktop, web, and mobile
• No HTML, CSS, or JS required, only write pure Python
• Rich set of widgetsfor input, layout, data display, and interactivity
• Live reloadfor rapid development
• Built-in support fortheming,navigation, andresponsive design
• Easyevent handlingandstatemanagement

Flet is great for building different types of GUI apps, from utilities and dashboards to data-science tools, business apps, and even educational or hobby apps.

Installing Flet

You can install Flet fromPyPIusing the followingpipcommand:

This command downloads and installs Flet into your current Python environment. That's it! You can now write your first app.

Writing Your First Flet GUI App

To build a Flet app, you typically follow these steps:

1. Importfletand define a function that takes aPageobject as an argument.
2. AddUI controls (widgets)to the page.
3. Useflet.app()to start the app by passing the function as an argument.

Here's a quickHello, World!application in Flet:

In themain()function, we get thepageobject as an argument. This object represents the root of our GUI. Then, we set the title and window size and add aTextcontrol that displays the"Hello, World!"text.

Usepage.add()to add controls (UI elements or widgets) to your app. To manipulate the widgets, you can usepage.controls, which is a list containing the controls that have been added to the page.

Run it! Here's what your first app looks like.

First Flet GUI application

You can run a Flet app as you'd run any Python app in the terminal. Additionally, Flet allows you to use theflet runcommand for live reload during development.

Exploring Flet Controls (Widgets)

Flet includes a wide variety of widgets, known ascontrols, in several categories. Some of these categories include the following:

• Buttons
• Input and Selections
• Information Displays
• Navigation
• Charts

In the following sections, you'll code simple examples showcasing a sample of each category's controls.

Buttons

Buttonsare key components in any GUI application. Flet has several types of buttons that we can use in different situations, including the following:

• FilledButton: A filled button without a shadow. Useful for important, final actions that complete a flow, likeSaveorConfirm.
• ElevatedButton: A filled tonal button with a shadow. Useful when you need visual separation from a patterned background.
• FloatingActionButton: A Material Design floating action button.

Here's an example that showcases these types of buttons:

Here, we call theadd()method on ourpageobject to add instances ofElevatedButton,FilledButton, andFloatingActionButton. Flet arranges these controls vertically by default.

Run it! You'll get a window that looks like the following.

Flet buttons demo

Input and Selections

Input and selection controlsenable users to enter data or select values in your app's GUI. Flet provides several commonly used controls in this category, including the following:

• TextField: A common single-line or multi-line text entry control.
• Dropdown: A selection control that lets users pick a value from a list of options.
• Checkbox: A control for boolean input, often useful for preferences and agreement toggles.
• Radio: A selection radio button control commonly used inside aRadioGroupto choose a single option from a set.
• Slider: A control for selecting a numeric value along a track.
• Switch: A boolean on/off toggle.

Here's an example that showcases some of these input and selection controls:

After setting the window's title and size, we create several input controls:

• ATextFieldfor the user's name
• ACheckboxto agree to the terms
• ASliderto select an experience level from 0 to 10
• ADropdownto pick a favorite color
• ARadioGroupwith several framework choices
• ASwitchto enable or disable notifications, which defaults toON

We add all these controls to thepageusingpage.add(), preceded by a simple instruction text. Flet lays out the controls vertically (the default) in the order you pass them.

Run it! You'll see a simple form that uses text input, dropdowns, checkboxes, radio buttons, sliders, and switches.

Flet input and selection controls demo

Navigation

Navigation controlsallow users to move between different sections or views within an app. Flet provides several navigation controls, including the following:

• NavigationBar: A bottom navigation bar with multiple destinations, which is useful for switching between three to five primary sections of your app.
• AppBar: A top app bar that can display a title, navigation icon, and action buttons.

Here's an example that usesNavigationBarto navigate between different views:

TheNavigationBarhas three tabs:Home,Search, andProfile, each with a representative icon that you provide usingft.Icons. Assigning this bar topage.navigation_bartells Flet to display it as the app's bottom navigation component.

The behavior of the bar is controlled by theon_nav_change()callback (more on this in the section on events and callbacks). Whenever the user clicks a tab, Flet callson_nav_change(), which updates the text with the appropriate message.

Run it! Click the different tabs to see the text on the page update as you navigate between sections.

Flet navigation bar demo

Information Displays

We can useinformation-display controlsto present content to the user, such as text, images, and rich list items. These controls help communicate status, context, and details without requiring user input.

Some common information-display controls include the following:

• Text: The basic control for showing labels, paragraphs, and other readable text.
• Image: A control for displaying images from files, assets, or URLs.

Here's an example that combines these controls:

Inmain(), we create aTextwidget calledheaderto show"Latest image"with a larger font size. Theherovariable is anImagecontrol that loads an image from the URL https://picsum.photos/320/320.

We use a fixedwidthandheighttogether withImageFit.COVERso that the image fills its box while preserving aspect ratio and cropping if needed.

Run it! You'll see some text and a random image fromPicsum.photos.

Flet information display demo

Dialogs, Alerts, and Panels

Dialogs, alerts, and panels enable you to draw attention to important information or reveal additional details without leaving the current screen. They are useful for confirmations, warnings, and expandable content.

Some useful controls in this category are listed below:

• AlertDialog: A modal dialog that asks the user to acknowledge information or make a decision.
• Banner: A prominent message bar displayed at the top of the page for important, non-modal information.
• DatePicker: A control that lets the user pick a calendar date in a pop-up dialog.
• TimePicker: A control for selecting a time of day from a dialog-style picker.

Here's an example that shows an alert dialog to ask for exit confirmation:

In this example, we first create anAlertDialogwith a title, some content text, and two action buttons labeledYesandNo.

Theon_dlg_button_click()callback checks which button was clicked and closes the application window if the user selectsYes. The page shows a singleExitbutton that opens the dialog. After the user responds, the dialog is closed.

Run it! Try clicking the button to open the dialog. You'll see a window similar to the one shown below.

Flet dialog demo

Laying Out the GUI With Flet

Controls in this category are often described ascontainer controlsthat can hold child controls. These controls enable you to arrange widgets on an app's GUI to create a well-organized and functional interface.

Flet has many container controls. Here are some of them:

• Page: This control is therootof the control hierarchy or tree. It is also listed as an adaptive container control.
• Column: A container control used to arrange child controls in a column.
• Row: A container control used to arrange child controls horizontally in a row.
• Container: A container control that allows you to modify its size (e.g.,height) and appearance.
• Stack: A container control where properties likebottom,left,right, andtopallow you to place children in specific positions.
• Card: A container control with slightly rounded corners and an elevation shadow.

By default, Flet stacks widgets vertically using theColumncontainer. Here's an example that demonstrates basic layout options in Flet:

In this example, we use aColumnobject as the app's main layout. This layout stacks text labels and buttons vertically, while the innerRowobject arranges three buttons horizontally. TheContainerobject with a fixedheightacts as a spacer between the vertical and horizontal sections.

Run it! You'll get a window like the one shown below.

Flet layouts demo

Handling Events With Callbacks

Flet usesevent handlersto manage user interactions and perform actions. Most controls accept anon_*argument, such ason_clickoron_change, which you can set to a Python function or other callable that will be invoked when an event occurs on the target widget.

The example below provides a text input and a button. When you click the button, it opens a dialog displaying the input text:

When you click the button, theon_click()handler or callback function is automatically called. It sets the dialog's text and opens the dialog. The dialog has anOKbutton that closes it by callingpage.close(dialog).

Run it! You'll get a window like the one shown below.

Flet callbacks

To see this app in action, type some text into the input and click theClick Me!button.

Conclusion

Flet offers a powerful and modern toolkit for developing GUI applications in Python. It allows you to create desktop and web GUIs from a single codebase. In this tutorial, you've learned the basics of using Flet for desktop apps, including controls, layouts, and event handling.

Try building your first Flet web app and experimenting with widgets, callbacks, layouts, and more!

For an in-depth guide to building Python GUIs with PyQt6 see my book,Create GUI Applications with Python & Qt6.

https://www.pythonguis.com/tutorials/getting-started-flet/