9

A Brief Intro to FLET: Building Flutter Apps with Python

 2 years ago
source link: https://hackernoon.com/a-brief-intro-to-flet-building-flutter-apps-with-python
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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 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.

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 Flutter, created by Google, 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.

For the new Flutter version(3.4.0-34.1.pre), we can build apps for mobile (Android/IOS), MacOS, Web, Linux, and desktop with a single code-base.

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

  1. One Text-field
  2. Two buttons for Increment & Decrement

Code Snippets

First, we need to import FLET and other features essential for the counter App (e.g. widgets).

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()

‘tf’ 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.

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 A brief dive into Flutter section, it can also be used on your web browser.

A small adjustment is needed for that; simply add

flet.app(target=main,view=flet.WEB_BROWSER)

Here is the final result

You can learn more about FLET here:

https://flet.dev/docs/roadmap


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK