Ceci est une ancienne révision du document !
A few months ago, one of the Python newsfeed aggregator services had a short blurb about a new project named Flet. For some reason, it caught my eye and I decided to bite the bullet and take a look. Their main website (https://flet.dev/) has the following headline… “The fastest way to build Flutter apps in Python. Flet enables developers to easily build realtime web, mobile and desktop apps in Python. No frontend experience required.”
I’ve always been interested in cross-platform programming like Desktop to Android or IOS. You might remember many years ago I did an article on Kivy (FCM #63, 64 and 65 July, August and September, 2012) which allows Python programmers to create applications for IOS, Android, Mac, Linux, Windows and Kiosks. So it seemed like a logical thing to look at.
I wasn’t really familiar with Flutter, so I took a look at that before I went much further. A simple web search provided their main page (https://flutter.dev/) with the main headline of “Build apps for any screen” – which intrigued me – and I kept scrolling. I finally found what I was looking for, a paragraph that said… “Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.”
So Flutter is a frontend framework for the Dart language and Dart was developed by Google. I don’t need to learn another programming language at this point in my life, but still, I was getting excited by the possibility that Flet might be a good extension for my Python programming.
I returned to the Flet website and started to explore.
Installation
Flet is a Python library, so we’ll use pip to install it.
pip3 install flet –upgrade
Once Flet is installed, we can give it a test.
Using Flet
According to the website, the basic structure of a flet app is as shown above.
When you break this basic program structure down, the function main() is the entry point for the Flet app and the Page is the “canvas” that holds the controls (or widgets to Tkinter programmers). In the sample above, the application opens in a native OS window, which is the default, but if you want to open the app in a browser window, you can modify the last line as follows:
flet.app(target=main, view=flet.WEB_BROWSER)
First Flet application
Let’s create a REALLY simple flet app just to see how it all ties together. Use your normal IDE or text editor to create a new file. Call it FletTest1.py (shown below).
To run the app, simply type:
$ python FletTest1.py
You should see something like this: Please notice that I’ve resized the app to take the window image, since the default shows up very large on my screen.
Now the really important line in this small demo is:
page.add(Text(value=“Hello, Full Circle Magazine!”))
Which is the only line within the entry point function named main. You can see that this line adds a Text control and we set the parameter value to “Hello, Full Circle Magazine!” . The Text control seems to be one of the simplest controls. It has a number of attributes to customize that instance of the control, like size, color, background color, font, and much more. Also, you might notice that this simple app doesn’t have a title. You can add one within the main function by simply adding the line:
page.title= “Flet Test #1”
Now, let’s try modifying the app to run in our default Web browser. Simply change the last line in the program to:
flet.app(target=main, view=flet.WEB_BROWSER)
And re-running the application. Again, I’ve resized the app before I took the screenshot.
Now, I’m going to show a more complex application, a To Do app, from their tutorial. You can find the complete code at https://github.com/flet-dev/examples/tree/main/python/tutorials/todo, but I suggest that you follow the complete tutorial, which is at https://flet.dev/docs/tutorials/python-todo. They break it down into logical steps as they show how the program is created. I’m going to whet your appetite by showing you only a few snippets of the full code.
We’ll start with the import section of the code.
import flet from flet import (
Checkbox, Column, FloatingActionButton, IconButton, OutlinedButton, Page, Row, Tab, Tabs, Text, TextField, UserControl, colors, icons,
)
You can see that the app contains a number of controls that get combined to create various custom controls, which is one of the big draws of Flutter. By using Flet, you don’t have to learn Dart to utilize the power of Flutter and its control set.
Next, I’ll show you the main function. Remember, this is the entry point of the app (shown below).
So you can see that the main function creates an instance of a class called TodoApp which is the workhorse of the application. Of course, there is much more to the class than I present here (next page, top right).
When you look at the class definition line, you will see that it uses UserControl, which is a reusable UI component. They don’t go into a lot of explanation on this, unfortunately, but it is an important concept that you will get the general idea from building the project (see bottom right).
As you look through the rest of this portion of the class, you can see the beginnings of the layering of the various controls to create a column container which shows its children in a vertical array (middle right).
You can also tell that the TodoApp class uses a UserControl which, in this case, is part of the Task class (next page, top right).
There is a lot more for the Task class, but I won’t spoil the tutorial by showing you all of that class's code either.
So when the code is all created, here is what the app looks like. The bottom line, if you want to start to create portable applications between Web apps, Mac, Windows and Linux, a Portable Web app or (according to their website) via the Flet app for IOS and Android, you really should consider giving Flet a try. It would be a good idea to do some research into Flutter, since that’s the backbone of the whole thing. While their documentation is somewhat sparse on exactly how to build very complex applications, you can get up to speed fairly quickly – enough that you can start giving Flet a chance to create apps for just about any platform. Looking at their Roadmap page, there are some tasks that are a bit behind, but the entire schedule is very aggressive so that’s somewhat understandable. Learning Flet right now, wouldn’t be a bad idea, getting ready for the future.
Until next time, as always; stay safe, healthy, positive and creative!