Do you know you can build flutter apps in Python?😮 Flutter is quite popular in the software development world. Let’s deep dive into the world of building flutter apps with Python!🙂 About FLET Before we begin, what is FLET? FLET enables developers to easily build real-time apps in Python. web, mobile, and desktop The crazy thing is that no front-end experience is needed, and although the mobile version is still in development, we can still rely on the Progressive Web App. Mind-blowing features of FLET It is powered by flutter. You can bring an app to life in a few minutes. It has a simple architecture. Apart from Python, other languages like Go, C#, etc. will also be supported. Amazing, right??🙂🔥 How to Install FLET To install FLET, you use this command: pip install flet Remember: This is for people using a Python version less than version 3. Otherwise, pip3 install flet To upgrade your pip to the latest version. pip install -- upgrade pip 🏊‍♀️ A brief dive into Flutter The UI toolkit , created by , lets programmers create apps with top-notch user interfaces. In contrast to Java itself, Flutter employs Dart programming, an object-oriented language that is much simpler to learn. Flutter Google For the new Flutter version(3.4.0-34.1.pre), we can build apps for with a single code-base. mobile (Android/IOS), MacOS, Web, Linux, and desktop Note: When using multiple operating systems, we obviously need to make certain adjustments. Building a very simple application with FLET Let’s build a simple application with FLET. For example, a Counter application that has One Text-field Two buttons for Increment & Decrement Code Snippets First, we need to import and other features essential for the counter App (e.g. widgets). FLET import fletfrom flet import Row, icons, IconButton, TextField, Page; We define the main function which is the root of our application and also set a title. Let’s arrange the widgets because the base part of the app is already ready. To add a widget, we use the page.add(widget…..). def main(page: Page):
page.title = "Counter App"
page.vertical_alignment = "center" For the rows of the app, we would consider the… Text Field and Buttons page.add(Row([
   IconButton(icons.REMOVE),
   TextField(text_align="center",value="0", width=100)
   IconButton(icons.ADD)
  ],
 alignment="center")
) Now, We define two functions that will handle the press events. //Decrement
def minus(e) :
tf.value = int(tf.value) -1
page.update()//Increment
def plus(e) :
tf.value = int(tf.value) + 1
page.update() refers to Text-field we placed into the Row. The next thing, we used to the text-field value we have to wrap that within a variable itself. ‘tf’ This is the overall code snippet: import flet
from flet import Row, icons, IconButton, TextField, Page;

def main(page: Page):
  page.title = "Counter App"
  page.vertical_alignment = "center"
  tf =TextField(text_align="center",value="0", width=100)

#Functions
  def minus(e):
    tf.value = int(tf.value) -1
    page.update()

  def plus(e):
    tf.value = int(tf.value) + 1
    page.update()

#Widgets
  page.add(
    Row([
       IconButton(icons.REMOVE, on_click=minus),
       tf,
       IconButton(icons.ADD, on_click=plus)
    ],
    alignment="center")
)
flet.app(target=main,view=flet.WEB_BROWSER) The final part is to run the application. flet.app(target=main) We add this command which directly targets the “main” To run the app, type this command python filename.py Note that you have to be in the same directory as the file. The UI: As I stated in the section, it can also be used on your web browser. A brief dive into Flutter A small adjustment is needed for that; simply add flet.app(target=main,view=flet.WEB_BROWSER) Here is the final result https://youtu.be/dN6auCBICds?embedable=true You can learn more about FLET here: https://flet.dev/docs/roadmap

Google

Progressive

Portfolio

Read My Stories

Community/Tech Advocate

Too Long; Didn't Read

Learn how to continuously improve your codebase

A Brief Intro to FLET: Building Flutter Apps with Python

Too Long; Didn't Read

Companies Mentioned

@valentineenedah

RELATED STORIES