{"id":12163,"date":"2025-06-21T12:59:15","date_gmt":"2025-06-21T12:59:15","guid":{"rendered":"https:\/\/labdeck.com\/?page_id=12163"},"modified":"2026-02-06T20:41:12","modified_gmt":"2026-02-06T20:41:12","slug":"flet-tutorial","status":"publish","type":"page","link":"https:\/\/labdeck.com\/flet-tutorial\/","title":{"rendered":"Flet Tutorial"},"content":{"rendered":"<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1150\" height=\"742\" src=\"https:\/\/labdeck.com\/wp-content\/uploads\/2026\/01\/flet-gui-designer.gif\" alt=\"Flet GUI Designer\" class=\"wp-image-12555\" srcset=\"https:\/\/labdeck.com\/wp-content\/uploads\/2026\/01\/flet-gui-designer.gif 1150w, https:\/\/labdeck.com\/wp-content\/uploads\/2026\/01\/flet-gui-designer-768x496.gif 768w\" sizes=\"auto, (max-width: 1150px) 100vw, 1150px\" \/><figcaption class=\"wp-element-caption\">Flet GUI Designer<\/figcaption><\/figure>\n<\/div>\n\n\n<p><strong>Flet,\u00a0Tkinter\u00a0Designer, Custom\u00a0Tkinter,\u00a0\u00a0MD\u00a0Python,\u00a0MatDeck\u00a0Script,\u00a0Kivy\u00a0and PySide2 Designers are all a part of drag and drop MD Python Designer.\u00a0<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is Flet?&nbsp;<\/h2>\n\n\n\n<p><strong>Flet<\/strong> is a set of bindings which allow Python programmers access to Flutter, the most used Mobile UI library. <strong>Flet<\/strong> also allows users to create website, desktop and mobile interfaces all while using Python. With a wide variety of unique features such as Hot Reload Support, Backend Integration and a sleek modern GUI look, <strong>Flet<\/strong> is quickly becoming one of the most popular Python GUI libraries.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why use Flet?&nbsp;<\/h2>\n\n\n\n<p>Flet is a highly versatile Python GUI library which is popular because it allows users to:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create cross-platform apps for Windows, Linux, macOS as well as iOS and Android<\/li>\n\n\n\n<li>Design websites while still coding in Python<\/li>\n\n\n\n<li>Offer fast and real-time updates on apps thanks to its adaptability for both apps and websites<\/li>\n\n\n\n<li>Utilize a modern and highly customizable GUI library<\/li>\n\n\n\n<li>Harness Flutter\u2019s powerful library without the difficulty of Dart code<\/li>\n\n\n\n<li>Easily create Python backend with specialized functions and features&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>While Flet has a long list of pros and benefits it is also noticeably more difficult to learn and code in then compared with other Python GUI libraries such as Tkinter, this is important to note as while Flet has a much more customizable and modern look, it also has a steeper learning curve.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Flet Button Click Event&nbsp;<\/h2>\n\n\n\n<p>This example creates a simple button that, when clicked, calls a function and prints a message to the console. It&#8217;s a basic but essential interaction pattern in Flet, demonstrating how GUI elements like buttons are linked to backend logic via event callbacks.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import flet as ft \u202f# Import Flet module for GUI creation \n\n# Function that will be called when the button is clicked\ndef on_click(e):\n\u202f \u202f print(\"Button was clicked!\") \u202f# Print a message to the console \n\ndef main(page: ft.Page):\n\u202f \u202f page.title = \"Button Click Event\" \u202f# Set window title\n\u202f \u202f # Create an ElevatedButton widget and add it to the page\n\u202f \u202f page.add(ft.ElevatedButton(text=\"Click Me\", on_click=on_click)) \n\nft.app(target=main) \u202f# Start the Flet application <\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Flet Entry to Label Update&nbsp;<\/h2>\n\n\n\n<p>In this example, users can type text into a TextField, and when they press the button, the entered text appears in a Text widget. This demonstrates how to retrieve input from widgets, dynamically update other elements, and create interactive UIs.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import flet as ft \u202f# Import Flet module \n\ndef main(page: ft.Page):\n\u202f \u202f # Create TextField widget for user input\n\u202f \u202f entry = ft.TextField(label=\"Enter text\")\n\u202f \u202f # Create a Text widget to display output\n\u202f \u202f label = ft.Text(\"Waiting for input...\") \n\n\u202f \u202f # Function to update label with text from entry\n\u202f \u202f def update(e):\n\u202f \u202f \u202f \u202f label.value = entry.value \u202f# Get text from entry and set it as label text\n\u202f \u202f \u202f \u202f page.update() \u202f# Refresh UI \n\n\u202f \u202f # Create ElevatedButton that triggers update() when clicked\n\u202f \u202f page.add(entry, ft.ElevatedButton(text=\"Submit\", on_click=update), label) \n\nft.app(target=main) \u202f# Start the GUI loop<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Flet Calculator with Event Handling&nbsp;<\/h2>\n\n\n\n<p>This example builds a mini calculator interface using a grid of buttons and a TextField for displaying expressions. It uses Python\u2019s eval() function to evaluate mathematical input and handles basic arithmetic. It also demonstrates binding multiple buttons to the same logic with slight variation.&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import flet as ft \u202f# Import Flet \n\ndef main(page: ft.Page):\n\u202f \u202f page.title = \"Simple Calculator\" \u202f# Set window title \n\n\u202f \u202f # Expression string to hold user input\n\u202f \u202f expr = \"\"\n\u202f \u202f expr_display = ft.TextField(value=\"\", text_align=\"right\", font_size=16, width=240, read_only=True) \n\n\u202f \u202f # Function to append characters to the expression\n\u202f \u202f def press(e):\n\u202f \u202f \u202f \u202f nonlocal expr\n\u202f \u202f \u202f \u202f expr += e.control.data\n\u202f \u202f \u202f \u202f expr_display.value = expr\n\u202f \u202f \u202f \u202f page.update() \n\n\u202f \u202f # Function to evaluate the expression\n\u202f \u202f def calculate(e):\n\u202f \u202f \u202f \u202f nonlocal expr\n\u202f \u202f \u202f \u202f try:\n\u202f \u202f \u202f \u202f \u202f \u202f expr = str(eval(expr)) \u202f# Evaluate the expression\n\u202f \u202f \u202f \u202f except:\n\u202f \u202f \u202f \u202f \u202f \u202f expr = \"Error\"\n\u202f \u202f \u202f \u202f expr_display.value = expr\n\u202f \u202f \u202f \u202f page.update() \n\n\u202f \u202f # Function to clear the expression\n\u202f \u202f def clear(e):\n\u202f \u202f \u202f \u202f nonlocal expr\n\u202f \u202f \u202f \u202f expr = \"\"\n\u202f \u202f \u202f \u202f expr_display.value = expr\n\u202f \u202f \u202f \u202f page.update() \n\n\u202f \u202f # Display and button layout\n\u202f \u202f page.add(expr_display)\n\u202f \u202f buttons = &#91;\n\u202f \u202f \u202f \u202f \"7\", \"8\", \"9\", \"\/\",\n\u202f \u202f \u202f \u202f \"4\", \"5\", \"6\", \"*\",\n\u202f \u202f \u202f \u202f \"1\", \"2\", \"3\", \"-\",\n\u202f \u202f \u202f \u202f \"0\", \".\", \"=\", \"+\"\n\u202f \u202f ]\n\u202f \u202f for i, char in enumerate(buttons):\n\u202f \u202f \u202f \u202f action = calculate if char == \"=\" else press\n\u202f \u202f \u202f \u202f page.add(ft.ElevatedButton(text=char, data=char, width=60, height=40, on_click=action))\n\u202f \u202f page.add(ft.ElevatedButton(text=\"C\", width=240, on_click=clear)) \n\nft.app(target=main) \u202f# Run the application<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Flet Table with DataTable&nbsp;<\/h2>\n\n\n\n<p>This example uses Flet\u2019s DataTable widget to display tabular data (like a spreadsheet). It includes column headers, aligns text, and is ideal for displaying structured datasets such as CSV files, user lists, or scores.&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import flet as ft \u202f# Import Flet \n\ndef main(page: ft.Page):\n\u202f \u202f page.title = \"Data Table Example\" \u202f# Set window title \n\n\u202f \u202f # Define DataTable with columns and sample row data\n\u202f \u202f data_table = ft.DataTable(\n\u202f \u202f \u202f \u202f columns=&#91;\n\u202f \u202f \u202f \u202f \u202f \u202f ft.DataColumn(label=ft.Text(\"ID\")),\n\u202f \u202f \u202f \u202f \u202f \u202f ft.DataColumn(label=ft.Text(\"Name\")),\n\u202f \u202f \u202f \u202f \u202f \u202f ft.DataColumn(label=ft.Text(\"Score\")),\n\u202f \u202f \u202f \u202f ],\n\u202f \u202f \u202f \u202f rows=&#91;\n\u202f \u202f \u202f \u202f \u202f \u202f ft.DataRow(cells=&#91;ft.DataCell(ft.Text(\"1\")), ft.DataCell(ft.Text(\"Alice\")), ft.DataCell(ft.Text(\"90\"))]),\n\u202f \u202f \u202f \u202f \u202f \u202f ft.DataRow(cells=&#91;ft.DataCell(ft.Text(\"2\")), ft.DataCell(ft.Text(\"Bob\")), ft.DataCell(ft.Text(\"85\"))]),\n\u202f \u202f \u202f \u202f ]\n\u202f \u202f ) \n\n\u202f \u202f page.add(data_table) \u202f# Display table \n\nft.app(target=main) \u202f# Start the GUI loop<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Flet Canvas Drawing Shapes&nbsp;<\/h2>\n\n\n\n<p>This code introduces a Stack widget, which allows you to draw 2D shapes by layering Containers. Can be used for custom drawings, charts, or basic games. The example demonstrates positioning and layering of graphical elements.&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import flet as ft \u202f# Import Flet \n\ndef main(page: ft.Page):\n\u202f \u202f page.title = \"Canvas Drawing\" \u202f# Set window title \n\n\u202f \u202f # Create a Stack to mimic a canvas\n\u202f \u202f stack = ft.Stack(width=300, height=200, bgcolor=ft.colors.WHITE) \n\n\u202f \u202f # Draw a rectangle\n\u202f \u202f stack.controls.append(\n\u202f \u202f \u202f \u202f ft.Positioned(\n\u202f \u202f \u202f \u202f \u202f \u202f left=50, top=50,\n\u202f \u202f \u202f \u202f \u202f \u202f width=200, height=100,\n\u202f \u202f \u202f \u202f \u202f \u202f child=ft.Container(border=ft.border.all(2, ft.colors.BLACK))\n\u202f \u202f \u202f \u202f )\n\u202f \u202f )\n\u202f \u202f # Draw an oval by using border radius\n\u202f \u202f stack.controls.append(\n\u202f \u202f \u202f \u202f ft.Positioned(\n\u202f \u202f \u202f \u202f \u202f \u202f left=70, top=60,\n\u202f \u202f \u202f \u202f \u202f \u202f width=160, height=80,\n\u202f \u202f \u202f \u202f \u202f \u202f child=ft.Container(bgcolor=ft.colors.SKYBLUE, border_radius=ft.border_radius.all(40))\n\u202f \u202f \u202f \u202f )\n\u202f \u202f )\n\u202f \u202f # Add centered text\n\u202f \u202f stack.controls.append(\n\u202f \u202f \u202f \u202f ft.Positioned(\n\u202f \u202f \u202f \u202f \u202f \u202f left=150, top=90,\n\u202f \u202f \u202f \u202f \u202f \u202f child=ft.Text(\"Canvas Example\", size=12)\n\u202f \u202f \u202f \u202f )\n\u202f \u202f ) \n\n\u202f \u202f page.add(stack) \u202f# Add drawing area \n\nft.app(target=main) \u202f# Run the application<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Flet AppBar with Commands&nbsp;<\/h2>\n\n\n\n<p>This example demonstrates how to create an AppBar with Help and Exit commands. Each item is linked to a specific command, such as exiting the app or showing an info dialog. AppBars are essential for creating professional, user-friendly applications.&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import flet as ft \u202f# Import Flet \n\ndef main(page: ft.Page):\n\u202f \u202f # Function to show About message\n\u202f \u202f def show_about(e):\n\u202f \u202f \u202f \u202f dlg = ft.AlertDialog(\n\u202f \u202f \u202f \u202f \u202f \u202f title=ft.Text(\"About\"),\n\u202f \u202f \u202f \u202f \u202f \u202f content=ft.Text(\"This is a Flet menu example.\"),\n\u202f \u202f \u202f \u202f \u202f \u202f actions=&#91;ft.TextButton(\"OK\", on_click=lambda e: dlg.close())]\n\u202f \u202f \u202f \u202f )\n\u202f \u202f \u202f \u202f page.dialog = dlg\n\u202f \u202f \u202f \u202f dlg.open = True\n\u202f \u202f \u202f \u202f page.update() \n\n\u202f \u202f # Create AppBar with actions\n\u202f \u202f page.appbar = ft.AppBar(\n\u202f \u202f \u202f \u202f title=ft.Text(\"Menu Example\"),\n\u202f \u202f \u202f \u202f actions=&#91;\n\u202f \u202f \u202f \u202f \u202f \u202f ft.IconButton(icon=ft.icons.HELP, tooltip=\"About\", on_click=show_about),\n\u202f \u202f \u202f \u202f \u202f \u202f ft.IconButton(icon=ft.icons.EXIT_TO_APP, tooltip=\"Exit\", on_click=lambda e: page.window_close())\n\u202f \u202f \u202f \u202f ]\n\u202f \u202f )\n\u202f \u202f page.add(ft.Text(\"Content goes here\")) \u202f# Main content \n\nft.app(target=main) \u202f# Start the GUI loop <\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Flet File Picker Example&nbsp;<\/h2>\n\n\n\n<p>This code allows users to open a file picker to select a text file. Once selected, the file\u2019s contents are loaded into a Text widget. This is particularly useful for file editors, configuration loaders, or file-based input interfaces.&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import flet as ft \u202f# Import Flet \n\ndef main(page: ft.Page):\n\u202f \u202f # Function to open file picker\n\u202f \u202f def open_file(e):\n\u202f \u202f \u202f \u202f file_picker.pick_files(allow_multiple=False, dialog_title=\"Select a text file\", file_type=ft.FilePicker.TFileType.CUSTOM, file_type_filter=&#91;\".txt\"]) \n\n\u202f \u202f # Callback when file is selected\n\u202f \u202f def on_file_result(e: ft.FilePickerResultEvent):\n\u202f \u202f \u202f \u202f if e.files:\n\u202f \u202f \u202f \u202f \u202f \u202f path = e.files&#91;0].path\n\u202f \u202f \u202f \u202f \u202f \u202f with open(path, \"r\") as f:\n\u202f \u202f \u202f \u202f \u202f \u202f \u202f \u202f text.value = f.read()\n\u202f \u202f \u202f \u202f \u202f \u202f page.update() \n\n\u202f \u202f # Setup FilePicker control\n\u202f \u202f file_picker = ft.FilePicker(on_result=on_file_result)\n\u202f \u202f page.overlay.append(file_picker) \n\n\u202f \u202f # UI: Button to trigger file picker and Text to display contents\n\u202f \u202f text = ft.Text()\n\u202f \u202f page.add(ft.ElevatedButton(text=\"Open File\", on_click=open_file), text) \n\nft.app(target=main) \u202f# Run the application <\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Flet Progress Bar (Indeterminate)<\/h2>\n\n\n\n<p>This example adds a progress bar in indeterminate mode, where it shows ongoing processing. It also includes Start and Stop buttons to control the bar. It&#8217;s commonly used when you don\u2019t know the task duration, such as loading data or checking for updates.&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import flet as ft \u202f# Import Flet \n\ndef main(page: ft.Page):\n\u202f \u202f page.title = \"Progress Bar Example\" \u202f# Set window title\n\u202f \u202f # Create an indeterminate progress bar (value=None)\n\u202f \u202f pb = ft.ProgressBar(width=200, value=None) \n\n\u202f \u202f # Start progress\n\u202f \u202f def start(e):\n\u202f \u202f \u202f \u202f pb.value = 0.5 \u202f# Simulate progress\n\u202f \u202f \u202f \u202f page.update() \n\n\u202f \u202f # Stop\/reset progress\n\u202f \u202f def stop(e):\n\u202f \u202f \u202f \u202f pb.value = 0\n\u202f \u202f \u202f \u202f page.update() \n\n\u202f \u202f page.add(pb, ft.Row(&#91;ft.ElevatedButton(text=\"Start\", on_click=start), ft.ElevatedButton(text=\"Stop\", on_click=stop)])) \n\nft.app(target=main) \u202f# Start the GUI loop<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Flet Notebook (Tabbed UI)<\/h2>\n\n\n\n<p>This example uses Flet\u2019s Tabs control to create a tabbed interface. Each tab contains different content, making it easier to organize complex applications like settings panels, dashboards, or multi-step wizards.&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import flet as ft \u202f# Import Flet \n\ndef main(page: ft.Page):\n\u202f \u202f page.title = \"Tabbed Interface Example\" \u202f# Set window title \n\n\u202f \u202f # Create tabs with content in separate containers\n\u202f \u202f tab1 = ft.Container(content=ft.Text(\"This is the Home tab.\"), padding=20)\n\u202f \u202f tab2 = ft.Container(content=ft.Text(\"Settings go here.\"), padding=20)\n\u202f \u202f tab3 = ft.Container(content=ft.Text(\"About information.\"), padding=20) \n\n\u202f \u202f tabs = ft.Tabs(\n\u202f \u202f \u202f \u202f selected_index=0,\n\u202f \u202f \u202f \u202f tabs=&#91;\n\u202f \u202f \u202f \u202f \u202f \u202f ft.Tab(text=\"Home\", content=tab1),\n\u202f \u202f \u202f \u202f \u202f \u202f ft.Tab(text=\"Settings\", content=tab2),\n\u202f \u202f \u202f \u202f \u202f \u202f ft.Tab(text=\"About\", content=tab3),\n\u202f \u202f \u202f \u202f ]\n\u202f \u202f ) \n\n\u202f \u202f page.add(tabs) \u202f# Add to page \n\nft.app(target=main) \u202f# Run the application <\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Flet GUI Designer&nbsp;<\/h2>\n\n\n\n<p>With our drag and drop Flet GUI Designer, you can save all the hassle of slowly writing hundreds of lines of Flet code and let you focus on the actual looks and functionality of your apps. Adjustments can be made in a few seconds; events handling is centralized and easy to understand. Our Flet GUI Designer allows you to quickly make GUIs without a fuss. We can see it at work below.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"619\" height=\"695\" src=\"https:\/\/labdeck.com\/wp-content\/uploads\/2025\/06\/gui-made-with-flet-gui-designer.png\" alt=\"GUI made with Flet GUI Designer\" class=\"wp-image-12164\"\/><\/figure>\n<\/div>\n\n\n<p>This simple example took a few minutes to be made, and adjustments can be made even faster. While with traditional coding, this simple example would take much longer and adjustments would be slower, limiting your designs and missing your deadlines.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Flet,\u00a0Tkinter\u00a0Designer, Custom\u00a0Tkinter,\u00a0\u00a0MD\u00a0Python,\u00a0MatDeck\u00a0Script,\u00a0Kivy\u00a0and PySide2 Designers are all a part of drag and drop MD Python Designer.\u00a0 What is Flet?&nbsp; Flet is a set of bindings which allow Python programmers access to Flutter, the most used Mobile UI library. Flet also allows users to create website, desktop and mobile interfaces all while using Python. With a wide &#8230; <a title=\"Flet Tutorial\" class=\"read-more\" href=\"https:\/\/labdeck.com\/flet-tutorial\/\" aria-label=\"Read more about Flet Tutorial\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12163","page","type-page","status-publish"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Flet Tutorial - LabDeck<\/title>\n<meta name=\"description\" content=\"Flet is a set of bindings which allow Python programmers access to Flutter. UI drag and drop MD Python Designer include Flet, Tkinter Designer, Custom Tkinter, MD Python, MatDeck Script, Kivy and PySide2 Designers.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/labdeck.com\/flet-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flet Tutorial - LabDeck\" \/>\n<meta property=\"og:description\" content=\"Flet is a set of bindings which allow Python programmers access to Flutter. UI drag and drop MD Python Designer include Flet, Tkinter Designer, Custom Tkinter, MD Python, MatDeck Script, Kivy and PySide2 Designers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/labdeck.com\/flet-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"LabDeck\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-06T20:41:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/labdeck.com\/wp-content\/uploads\/2026\/01\/flet-gui-designer.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"1150\" \/>\n\t<meta property=\"og:image:height\" content=\"742\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/labdeck.com\\\/flet-tutorial\\\/\",\"url\":\"https:\\\/\\\/labdeck.com\\\/flet-tutorial\\\/\",\"name\":\"Flet Tutorial - LabDeck\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/labdeck.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/labdeck.com\\\/flet-tutorial\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/labdeck.com\\\/flet-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/labdeck.com\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/flet-gui-designer.gif\",\"datePublished\":\"2025-06-21T12:59:15+00:00\",\"dateModified\":\"2026-02-06T20:41:12+00:00\",\"description\":\"Flet is a set of bindings which allow Python programmers access to Flutter. UI drag and drop MD Python Designer include Flet, Tkinter Designer, Custom Tkinter, MD Python, MatDeck Script, Kivy and PySide2 Designers.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/labdeck.com\\\/flet-tutorial\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/labdeck.com\\\/flet-tutorial\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/labdeck.com\\\/flet-tutorial\\\/#primaryimage\",\"url\":\"https:\\\/\\\/labdeck.com\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/flet-gui-designer.gif\",\"contentUrl\":\"https:\\\/\\\/labdeck.com\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/flet-gui-designer.gif\",\"width\":1150,\"height\":742,\"caption\":\"Flet GUI Designer\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/labdeck.com\\\/flet-tutorial\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/labdeck.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Flet Tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/labdeck.com\\\/#website\",\"url\":\"https:\\\/\\\/labdeck.com\\\/\",\"name\":\"LabDeck\",\"description\":\"Innovative computing environment for Science, Engineering and Mathematics\",\"publisher\":{\"@id\":\"https:\\\/\\\/labdeck.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/labdeck.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/labdeck.com\\\/#organization\",\"name\":\"Labdeck\",\"url\":\"https:\\\/\\\/labdeck.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/labdeck.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/labdeck.com\\\/wp-content\\\/uploads\\\/2017\\\/01\\\/labdeck-logo.png\",\"contentUrl\":\"https:\\\/\\\/labdeck.com\\\/wp-content\\\/uploads\\\/2017\\\/01\\\/labdeck-logo.png\",\"width\":512,\"height\":512,\"caption\":\"Labdeck\"},\"image\":{\"@id\":\"https:\\\/\\\/labdeck.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCmp8LfvQvQ1556jqVwKTA7w\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Flet Tutorial - LabDeck","description":"Flet is a set of bindings which allow Python programmers access to Flutter. UI drag and drop MD Python Designer include Flet, Tkinter Designer, Custom Tkinter, MD Python, MatDeck Script, Kivy and PySide2 Designers.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/labdeck.com\/flet-tutorial\/","og_locale":"en_GB","og_type":"article","og_title":"Flet Tutorial - LabDeck","og_description":"Flet is a set of bindings which allow Python programmers access to Flutter. UI drag and drop MD Python Designer include Flet, Tkinter Designer, Custom Tkinter, MD Python, MatDeck Script, Kivy and PySide2 Designers.","og_url":"https:\/\/labdeck.com\/flet-tutorial\/","og_site_name":"LabDeck","article_modified_time":"2026-02-06T20:41:12+00:00","og_image":[{"width":1150,"height":742,"url":"https:\/\/labdeck.com\/wp-content\/uploads\/2026\/01\/flet-gui-designer.gif","type":"image\/gif"}],"twitter_card":"summary_large_image","twitter_misc":{"Estimated reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/labdeck.com\/flet-tutorial\/","url":"https:\/\/labdeck.com\/flet-tutorial\/","name":"Flet Tutorial - LabDeck","isPartOf":{"@id":"https:\/\/labdeck.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/labdeck.com\/flet-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/labdeck.com\/flet-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/labdeck.com\/wp-content\/uploads\/2026\/01\/flet-gui-designer.gif","datePublished":"2025-06-21T12:59:15+00:00","dateModified":"2026-02-06T20:41:12+00:00","description":"Flet is a set of bindings which allow Python programmers access to Flutter. UI drag and drop MD Python Designer include Flet, Tkinter Designer, Custom Tkinter, MD Python, MatDeck Script, Kivy and PySide2 Designers.","breadcrumb":{"@id":"https:\/\/labdeck.com\/flet-tutorial\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/labdeck.com\/flet-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/labdeck.com\/flet-tutorial\/#primaryimage","url":"https:\/\/labdeck.com\/wp-content\/uploads\/2026\/01\/flet-gui-designer.gif","contentUrl":"https:\/\/labdeck.com\/wp-content\/uploads\/2026\/01\/flet-gui-designer.gif","width":1150,"height":742,"caption":"Flet GUI Designer"},{"@type":"BreadcrumbList","@id":"https:\/\/labdeck.com\/flet-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/labdeck.com\/"},{"@type":"ListItem","position":2,"name":"Flet Tutorial"}]},{"@type":"WebSite","@id":"https:\/\/labdeck.com\/#website","url":"https:\/\/labdeck.com\/","name":"LabDeck","description":"Innovative computing environment for Science, Engineering and Mathematics","publisher":{"@id":"https:\/\/labdeck.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/labdeck.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/labdeck.com\/#organization","name":"Labdeck","url":"https:\/\/labdeck.com\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/labdeck.com\/#\/schema\/logo\/image\/","url":"https:\/\/labdeck.com\/wp-content\/uploads\/2017\/01\/labdeck-logo.png","contentUrl":"https:\/\/labdeck.com\/wp-content\/uploads\/2017\/01\/labdeck-logo.png","width":512,"height":512,"caption":"Labdeck"},"image":{"@id":"https:\/\/labdeck.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.youtube.com\/channel\/UCmp8LfvQvQ1556jqVwKTA7w"]}]}},"_links":{"self":[{"href":"https:\/\/labdeck.com\/wp-json\/wp\/v2\/pages\/12163","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/labdeck.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/labdeck.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/labdeck.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/labdeck.com\/wp-json\/wp\/v2\/comments?post=12163"}],"version-history":[{"count":5,"href":"https:\/\/labdeck.com\/wp-json\/wp\/v2\/pages\/12163\/revisions"}],"predecessor-version":[{"id":12577,"href":"https:\/\/labdeck.com\/wp-json\/wp\/v2\/pages\/12163\/revisions\/12577"}],"wp:attachment":[{"href":"https:\/\/labdeck.com\/wp-json\/wp\/v2\/media?parent=12163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}