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.”
Il y a quelques mois, l'un des services d'agrégation de flux d'informations Python a publié un bref article sur un nouveau projet appelé Flet. Pour une raison quelconque, cela a attiré mon attention et j'ai décidé de mordre à l'hameçon et d'y jeter un coup d'œil. Leur site Web principal (https://flet.dev/) a le titre suivant : « Le moyen le plus rapide de créer des applications Flutter en Python. Flet permet aux développeurs de créer facilement des applications Web, mobiles et de bureau en temps réel en Python. Aucune expérience du frontend n'est requise. »
J'ai toujours été intéressé par la programmation multi-plateforme comme Desktop vers Android ou IOS. Vous vous souvenez peut-être qu'il y a plusieurs années, j'ai fait un article sur Kivy (FCM n° 63, 64 et 65 de juillet, août et septembre 2012) qui permet aux programmeurs Python de créer des applications pour IOS, Android, Mac, Linux, Windows et pour les kiosques. Cela semblait donc être une chose logique à regarder.
Je n'étais pas vraiment familier avec Flutter, alors j'y ai jeté un coup d'œil avant d'aller beaucoup plus loin. Une simple recherche sur le Web m'a permis d'accéder à leur page principale (https://flutter.dev/), dont le grand titre est « Build apps for any screen » (Construisez des applis pour n'importe quel écran) - ce qui m'a intrigué - et j'ai continué à faire défiler les pages. J'ai finalement trouvé ce que je cherchais, un paragraphe qui disait : « Flutter est un framework Open Source de Google permettant de créer de belles applications multi-plateformes, compilées nativement, à partir d'une seule base de code. »
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.
Flutter est donc un framework frontal pour le langage Dart et Dart a été développé par Google. Je n'ai pas besoin d'apprendre un autre langage de programmation à ce stade de ma vie, mais je commençais quand même à être excité par la possibilité que Flet puisse être une bonne extension pour ma programmation Python.
Je suis retourné sur le site de Flet et j'ai commencé à l'explorer.
Installation
Flet est une bibliothèque Python, nous allons donc utiliser pip pour l'installer.
pip3 install flet –upgrade
Une fois que Flet est installé, nous pouvons le tester.
Utilisation de Flet
Selon le site Web, la structure de base d'une application Flet est ce qui est montré ci-dessus.
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
Lorsque vous décomposez cette structure de programme de base, la fonction main() est le point d'entrée de l'application Flet et la page est le « canevas » qui contient les contrôles (ou widgets pour les programmeurs Tkinter). Dans l'exemple ci-dessus, l'application s'ouvre dans une fenêtre native du système d'exploitation, ce qui est le cas par défaut, mais si vous souhaitez ouvrir l'application dans une fenêtre de navigateur, vous pouvez modifier la dernière ligne comme suit :
flet.app(target=main, view=flet.WEB_BROWSER)
Première application Flet
Créons une application Flet TRÈS simple pour voir comment tout cela s'articule. Utilisez votre IDE ou votre éditeur de texte habituel pour créer un nouveau fichier. Appelez-le FletTest1.py (voir ci-dessous).
Pour lancer l'application, tapez simplement :
$ 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.
Vous devriez voir quelque chose comme ceci :
Remarquez que j'ai redimensionné l'application pour qu'elle capture l'image de la fenêtre, car l'image par défaut est très grande sur mon écran.
En fait, la ligne vraiment importante dans cette petite démo est :
page.add(Text(value=“Hello, Full Circle Magazine !”))
C'est la seule ligne dans le point d'entrée de la fonction nommée main. Vous pouvez voir que cette ligne ajoute un contrôle Text et que nous définissons la valeur du paramètre à « Hello, Full Circle Magazine ! ». Le contrôle Text semble être l'un des contrôles les plus simples. Il dispose d'un certain nombre d'attributs permettant de personnaliser cette instance du contrôle, comme la taille, la couleur, la couleur d'arrière-plan, la police, et bien plus encore. Vous remarquerez également que cette application simple n'a pas de titre. Vous pouvez en ajouter un dans la fonction principale en ajoutant simplement la ligne :
page.title= “Flet Test #1”
Maintenant, essayons de modifier l'application pour qu'elle fonctionne dans notre navigateur Web par défaut. Changez simplement la dernière ligne du programme en :
flet.app(target=main, view=flet.WEB_BROWSER)
Et exécutez l'application à nouveau.
Encore une fois, j'ai redimensionné l'application avant de faire la capture d'écran.
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).
Maintenant, je vais vous montrer une application plus complexe, une application To Do, tirée de leur tutoriel. Vous pouvez trouver le code complet à l'adresse https://github.com/flet-dev/examples/tree/main/python/tutorials/todo, mais je vous suggère de suivre le tutoriel complet, qui se trouve à l'adresse https://flet.dev/docs/tutorials/python-todo. Il est décomposé en étapes logiques et montre comment le programme est créé. Je vais vous mettre en appétit en vous montrant seulement quelques extraits du code complet.
Nous allons commencer par la section d'importation du code.
import flet from flet import (
Checkbox, Column, FloatingActionButton, IconButton, OutlinedButton, Page, Row, Tab, Tabs, Text, TextField, UserControl, colors, icons,
)
Vous pouvez voir que l'application contient un certain nombre de contrôles qui sont combinés pour créer divers contrôles personnalisés, ce qui est l'un des grands attraits de Flutter. En utilisant Flet, vous n'avez pas besoin d'apprendre Dart pour utiliser la puissance de Flutter et son ensemble de contrôles.
Ensuite, je vais vous montrer la fonction principale. N'oubliez pas que c'est le point d'entrée de l'application (voir ci-dessous).
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).
Vous pouvez donc voir que la fonction principale crée une instance d'une classe appelée TodoApp, qui est la bête de somme de l'application. Bien sûr, la classe comporte bien plus que ce que je présente ici (page suivante, en haut à droite).
Si vous regardez la ligne de définition de la classe, vous verrez qu'elle utilise UserControl, qui est un composant d'interface utilisateur réutilisable. Malheureusement, il n'y a pas beaucoup d'explications à ce sujet, mais c'est un concept important dont vous aurez une idée générale en construisant le projet (voir en bas à droite).
En regardant le reste de cette partie du cours, vous pouvez voir les débuts de la superposition des différents contrôles pour créer un conteneur de colonne qui affiche ses enfants dans un tableau vertical (au milieu à droite).
Vous pouvez également constater que la classe TodoApp utilise un UserControl qui, dans ce cas, fait partie de la classe Task (page suivante, en haut à droite).
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!
Il y a beaucoup d'autres choses sur la classe Task, mais je ne vais pas non plus gâcher le tutoriel en vous montrant tout le code de cette classe.
Une fois le code créé, voici à quoi ressemble l'application.
En conclusion, si vous voulez commencer à créer des applications portables entre des applications Web, Mac, Windows et Linux, une application Web portable ou (selon leur site Web) via l'application Flet pour IOS et Android, vous devriez vraiment envisager d'essayer Flet. Il serait bon de faire quelques recherches sur Flutter, car c'est la colonne vertébrale de l'ensemble. Bien que la documentation soit quelque peu éparse sur la manière exacte de créer des applications très complexes, vous pouvez vous mettre à niveau assez rapidement, suffisamment pour commencer à donner une chance à Flet de créer des applications pour pratiquement toutes les plateformes. Si l'on regarde la page de la feuille de route, on constate que certaines tâches sont un peu en retard, mais le calendrier global est très volontaire, et cela est donc plus ou moins compréhensible. Apprendre Flet dès maintenant ne serait pas une mauvaise idée, pour se préparer à l'avenir.
Jusqu'à la prochaine fois, comme toujours,restez en sécurité, en bonne santé, positif et créatif !