Do you know you can build Flutter apps in Python? 😮

I am guessing most of you have heard about Flutter. If not, here you go in just one sentence.

Flutter is an open-source framework by Google
for building beautiful, natively compiled applications
​​​​​​​from a single codebase
​​​​​​​for iOS, Android, Web, MacOS, Windows and Linux. 

Dart is the programming language used to code Flutter apps and at the start most developers find it a little hard to grasp. But once they are able to wrap their heads around it, they absolutely love it! However this article is not about Dart but Python! Let’s deep dive into the world of building flutter apps with Python! 

Say hello to FLET!

FLET enables developers to easily build real-time web, mobile, and desktop apps in Python.

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

1. It is powered by Flutter.
2. You can bring an app to life in a few minutes.
3. It has a simple architecture.
4. Apart from Python, other languages like Go, C#, etc. will also be supported.

How to get start with FLET

To install FLET, you use this command if you are using a Python version less than version 3:

pip install flet

Otherwise you can use the following:

pip3 install flet

Now let’s build a simple application with FLET. We will be building a simple counter app that has one text field and two buttons, one to increment and one to decrement. Simple enough right?

First, we need to import FLET and other features essential for the counter App

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.

def main(page: Page):
page.title = "Counter App"
page.vertical_alignment = "center"

Next let’s arrange the widgets.

To add a widget, we use the page.add(widget…..).

For the rows of the app, we would consider theText 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()

‘tf’ in the above functions 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.

Here is the overall code

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 which is the last line in the snippet above.

flet.app(target=main)

We add this command which directly targets the “main”

To run the app, type this command 

python filename.py

Below is what the UI looks like on web

Wasn’t that super easy? 

We are in very early days with FLET. Here is a link to their roadmap

And if you’d like to try some more apps, Flet has two tutorials: To Do app and Calculator app. (Click here)

Try them out and share your experience with me! 🙂