Interview Prep
Career
GenAI
Prompt Engg
ChatGPT
LLM
Langchain
RAG
AI Agents
Machine Learning
Deep Learning
GenAI Tools
LLMOps
Python
NLP
SQL
AIML Projects

Reading list

Machine Learning Basics for a Newbie
6 Steps of Machine learning Lifecycle Introduction to Predictive Modeling
Introduction to Exploratory Data Analysis & Data Insights Descriptive Statistics Inferential Statistics How to Understand Population Distributions?
Reading Data Files into Python Different Variable Datatypes
Probability for Data Science Basic Concepts of Probability Axioms of Probability Conditional Probability
Central Tendencies for Continuous Variables Spread of Data KDE plots for Continuous Variable Overview of Distribution for Continuous variables Normal Distribution Skewed Distribution Skeweness and Kurtosis Distribution for Continuous Variable
Central Tendencies for Categorical Variables Understanding Discrete Distributions Performing EDA on Categorical Variables
Dealing with Missing Values Understanding Outliers Identifying Outliers in Data Outlier Detection in Python Outliers Detection Using IQR, Z-score, LOF and DBSCAN
Sample and Population Central Limit Theorem Confidence Interval and Margin of Error
Bivariate Analysis Introduction
Covariance Pearson Correlation Spearman's Correlation & Kendall's Tau Correlation versus Causation Tabular and Graphical methods for Bivariate Analysis Performing Bivariate Analysis on Continuous-Continuous Variables
Tabular and Graphical methods for Continuous-Categorical Variables Introduction to Hypothesis Testing P-value Two sample Z-test T-test T-test vs Z-test Performing Bivariate Analysis on Continuous-Catagorical variables
Chi-Squares Test Bivariate Analysis on Categorical Categorical Variables
Multivariate Analysis A Comprehensive Guide to Data Exploration The Data Science behind IPL
Supervised Learning vs Unsupervised Learning Reinforcement Learning Generative and Descriminative Models Parametric and Non Parametric model
Machine Learning Pipeline Preparing Dataset Build a Benchmark Model: Regression Build a Benchmark Model: Classification
Evaluation Metrics for Machine Learning Everyone should know Confusion Matrix Accuracy Precision and Recall AUC-ROC Log Loss R2 and Adjusted R2
Dealing with Missing Values Replacing Missing Values Imputing Missing Values in Data Working with Categorical Variables Working with Outliers Preprocessing Data for Model Building
Understanding Cost Function Understanding Gradient Descent Math Behind Gradient Descent Assumptions of Linear Regression Implement Linear Regression from Scratch Train Linear Regression in Python Implementing Linear Regression in R Diagnosing Residual Plots in Linear Regression Models Generalized Linear Models Introduction to Logistic Regression Odds Ratio Implementing Logistic Regression from Scratch Introduction to Scikit-learn in Python Train Logistic Regression in python Multiclass using Logistic Regression How to use Multinomial and Ordinal Logistic Regression in R ? Challenges with Linear Regression Introduction to Regularisation Implementing Regularisation Ridge Regression Lasso Regression
Introduction to K Nearest Neighbours Determining the Right Value of K in KNN Implement KNN from Scratch Implement KNN in Python
Bias Variance Tradeoff Introduction to Overfitting and Underfitting Visualizing Overfitting and Underfitting Selecting the Right Model What is Validation? Hold-Out Validation Understanding K Fold Cross Validation
Introduction to Feature Selection Feature Selection Algorithms Missing Value Ratio Low Variance Filter High Correlation Filter Backward Feature Elimination Forward Feature Selection Implement Feature Selection in Python Implement Feature Selection in R
Introduction to Decision Tree Purity in Decision Tree Terminologies Related to Decision Tree How to Select Best Split Point in Decision Tree? Chi-Squares Information Gain Reduction in Variance Optimizing Performance of Decision Tree Train Decision Tree using Scikit Learn Pruning of Decision Trees
Introduction to Feature Engineering Feature Transformation Feature Scaling Feature Engineering Frequency Encoding Automated Feature Engineering: Feature Tools
Introduction to Naive Bayes Conditional Probability and Bayes Theorem Introduction to Bayesian Adjustment Rating: The Incredible Concept Behind Online Ratings! Working of Naive Bayes Math behind Naive Bayes Types of Naive Bayes Implementation of Naive Bayes
Understanding how to solve Multiclass and Multilabled Classification Problem Evaluation Metrics: Multi Class Classification
Introduction to Ensemble Techniques Basic Ensemble Techniques Implementing Basic Ensemble Techniques Finding Optimal Weights of Ensemble Learner using Neural Network Why Ensemble Models Work well?
Introduction to Stacking Implementing Stacking Variants of Stacking Implementing Variants of Stacking Introduction to Blending Bootstrap Sampling Introduction to Random Sampling Hyper-parameters of Random Forest Implementing Random Forest Out-of-Bag (OOB) Score in the Random Forest IPL Team Win Prediction Project Using Machine Learning Introduction to Boosting Gradient Boosting Algorithm Math behind GBM Implementing GBM in python Regularized Greedy Forests Extreme Gradient Boosting Implementing XGBM in python Tuning Hyperparameters of XGBoost in Python Implement XGBM in R/H2O Adaptive Boosting Implementing Adaptive Boosing LightGBM Implementing LightGBM in Python Catboost Implementing Catboost in Python
Different Hyperparameter Tuning methods Implementing Different Hyperparameter Tuning methods GridsearchCV RandomizedsearchCV Bayesian Optimization for Hyperparameter Tuning Hyperopt
Understanding SVM Algorithm SVM Kernels In-depth Intuition and Practical Implementation SVM Kernel Tricks Kernels and Hyperparameters in SVM Implementing SVM from Scratch in Python and R
Introduction to Principal Component Analysis Steps to Perform Principal Compound Analysis Computation of Covariance Matrix Finding Eigenvectors and Eigenvalues Implementing PCA in python Visualizing PCA A Brief Introduction to Linear Discriminant Analysis Introduction to Factor Analysis
Introduction to Clustering Applications of Clustering Evaluation Metrics for Clustering Understanding K-Means Implementation of K-Means in Python Implementation of K-Means in R Choosing Right Value for K Profiling Market Segments using K-Means Clustering Hierarchical Clustering Implementation of Hierarchial Clustering DBSCAN Defining Similarity between clusters Build Better and Accurate Clusters with Gaussian Mixture Models
Understand Basics of Recommendation Engine with Case Study
8 Ways to Improve Accuracy of Machine Learning Models
Introduction to Dask Working with CuML
Introduction to Machine Learning Interpretability Framework and Interpretable Models model Agnostic Methods for Interpretability Implementing Interpretable Model Understanding SHAP Out-of-Core ML Introduction to Interpretable Machine Learning Models Model Agnostic Methods for Interpretability Game Theory & Shapley Values
Introduction to Machine Learning Interpretability Framework and Interpretable Models model Agnostic Methods for Interpretability Implementing Interpretable Model Understanding SHAP Out-of-Core ML Introduction to Interpretable Machine Learning Models Model Agnostic Methods for Interpretability Game Theory & Shapley Values
Introduction to AutoML Implementation of MLBox Introduction to PyCaret TPOT Auto-Sklearn EvalML
Pickle and Joblib Introduction to Model Deployment
Deploying Machine Learning Model using Streamlit Deploying ML Models in Docker Deploy Using Streamlit Deploy on Heroku Deploy Using Netlify Introduction to Amazon Sagemaker Setting up Amazon SageMaker Using SageMaker Endpoint to Generate Inference Deploy on Microsoft Azure Cloud Introduction to Flask for Model Deploying ML model using Flask
Model Deployment in Android Model Deployment in Iphone

A UI-Web Framework for Python Known as Flet

Ajay
Ajay Last Updated : 24 Jul, 2023
9 min read

Introduction

Python is becoming increasingly popular due to its rich Frameworks and Open Source Community availability. It has already entered the website space through the Frameworks like Django and Flask. and there are Frameworks like  PyQt, and Tkinter, for Desktop UI, etc. Developers require significant time to learn these Frameworks. But what if there is one such Framework, that can do everything for us, from developing website applications to desktop applications and even mobile apps? And that’s where the Flet Framework fits in. Flet is a rich User Interface Framework for Python to quickly develop and build Websites, Desktop Applications, and even Mobile Apps. In this article, we will be looking at this library and see how we can get started with it.

Flet - App and Web Development | Python | Flutter

Learning Objectives

  • Understand how Flet works and its necessity
  • Learn how to build Desktop Apps with Flet
  • Understand different Controls in Flet
  • Learn how to build Websites with Flet

This article was published as a part of the Data Science Blogathon.

Table of Contents

What is Flet?

Flet is UI (User Interface) Framework for Python that developers can leverage to create UI and build real-time websites, desktop applications, and even mobile applications directly in Python. Developers do not need to have front-end knowledge to get started. It’s the fastest way to build Flutter apps through Python. Flet library is basically a bridge between Python and Darts. Developers do not need to learn Flutter to use Flet in Python.

Familiarity with Python Syntax and OOPs is more than enough to start using Flet. Flet converts the logic in Python to Dart code. Flet has a rich set of tools to build applications from small scale to even large scale. Flet comes with many pre-built widgets with which developers can create small website applications and desktop applications in a few minutes. Flet even provides animation widgets to be directly used in the applications you create with it.

Installing and Getting Started

Flet like normal Python libraries can be installed with pip. The following pip command will install Flet and some of the dependencies it relies on.

pip install flet

Let’s create a simple app with Flet that displays Hello World on the screen.

import flet as ft

def main(page: ft.Page):
    page.title = "Flet Example"
    t = ft.Text(value="Hello, World!", color="Red", size=50)
    page.controls.append(t)
    page.update()

ft.app(target=main)

To create a Flet App, first, we define a function. To this function, we pass Page Instance. To every Application we create with Flet, we pass the Pass Instance to the function. The Page is like a visual state of a user session. A unique session i.e. Page is created for each user. To set the title of our application, we pass the title name to the page.title variable.

So to build an application we need to add widgets to its UI, that include text, input boxes, buttons, and much more. These are called Controls aka Widgets in Flet. So for creating an application, we add or remove Controls to a Page, where the Page is the topmost control. In the above code, ft.Text() is one of the Controls in Flet, which is used to display text on the application. It takes parameters like value, which is what should be displayed, color, which is the color of the text, and size, which is the size of the text. Apart from these are even other parameters it takes, which we will look ahead to.

Whenever we create a Control, we need to add it to the page, so it can be visible in the UI, for this we append the Control to the controls list of a Pagen(page.controls.append(control_name)) and call the page.update() method so that, it sends these changes to the website or the desktop application that we are creating. There is a shortcut to this. Instead of using page.controls.append(control_name) and page.update, we can directly call the page.add(control_name), which does the same function.

ft.app() function is what runs the website server or the desktop application. It takes in the argument target, where we give the main function. Running this code will result in the following output.

Flet Example | | Python | Flutter

How to Group Controls?

In this section, we will see the Container Controls available in Flet. Container Controls are useful in situations where a group of data either needs to be stacked horizontally or vertically is required. There are two such Controls defined for this purpose in Flet.

  • ft.Row(): This Control as the name suggests, is used when we want to group Controls in a horizontal fashion.
  • ft.Column(): This Control as the name suggests, is used when we want to group Controls in a vertical fashion.

As stated above for vertical stacking, we use the ft.Column() method. Let’s try this with an example:

import flet as ft

def main(page: ft.Page):
    page.title = "Flet Example"
    text = ft.Text(value='This is a CheckBox')
    check_box = ft.Checkbox(label="Click to Check")

    page.add(
        ft.Column(
[text,check_box]

) ) ft.app(target=main)

Here, we have created two Controls, one is ft.Text() and the other is the ft.Checkbox, which creates a simple checkbox. Now we add these two to the Main Page, we can do this by page.add(). But here, we want the two Controls to be stacked vertically. For this, we add another Control called the ft.Column() to the page.add(). The ft.Column() function is a Control Container, that takes a list of Controls and then displays them vertically in the UI. This code will be resulting in the below output.

Flet Example | Python | Flutter
| Python | Flutter

We see, that both the Controls are stacked vertically and displayed. Along with that we even see that, when we click on the Checkbox, it works, i.e. we checked it. Now, let’s try the same with ft.Row() function and see the output. The code for the ft.Row() and its output can be seen below:

import flet as ft

def main(page: ft.Page):
    page.title = "Flet Example"
    text = ft.Text(value='This is a CheckBox')
    check_box = ft.Checkbox(label="Click to Check")


    page.add(
        ft.Row(
[text,check_box]

) ) ft.app(target=main)

Flet Example

We see that the Controls we defined in the code are stacked horizontally and displayed in the application. This ft.Row() and ft.Column() are two such Controls that come in handy in situations where in the application, we need to stack some Controls either horizontally or vertically.

User Inputs and Buttons

In this section, we will learn how to take in User Inputs through the application and create Buttons on which the users will click to send in their inputs to the application.  Let’s learn these Controls through a simple application.

  • The ft.TextField() is the function for taking in the User Inputs.
  • The ft.ElevatedButton() is one of the Flet Control Buttons to create a Button, which can call a function, i.e. on click can run a function.

We will be creating an application where the user will type in their names and click on the submit button. When the user clicks the submit button, they will get a greeting message from the application. Here we take the input, the user name through the ft.TextField(),  so that we can include the user’s name in the greeting message. The code for creating this application:

import flet as ft

def main(page: ft.Page):
    page.title = "Greetings App"
    username = ft.TextField(label="Type your name",width=200)

    def display(e):
        name = ft.Text("Hello " + username.value)
        page.add(name)


    page.add(
        ft.Row(
[username,
ft.ElevatedButton(‘Submit’,on_click=display)]

) ) ft.app(target=main)

  • Firstly, we created a TextField, where the user will input their name. The label for it is set to “Type your name” and the width of the TextField box is set to 200.
  • Next, we create a function called display(). This display() method will be triggered when the user clicks on the submit button. In this function, we create a Text Control and we provide the greeting message in it, along with the user’s name.
  • When the users enter their name and click on the submit button, their name can be accessed from the username.value. After creating the greeting message, the Control is passed to the page.add() function, which will display the message in the UI.
  • For this application, we want both the TextField and the Button to be placed side by side, that is horizontally stacked. Hence we used the ft.Row() method.
  •  In this Row function itself, we have created the Button using the ft.ElevatedButton() method. The button name is set to “Submit” and when clicked it will run the display function.

After running this code, you will see the following output:

"

We see that the application was created successfully. We even named our application “Greeting App”. Now we will try entering a name and clicking on the submit button.

"

After clicking on the submit button, the greeting message is displayed. It even contains the name that we have provided in the TextField. We see how easily we can create a desktop application in just a matter of minutes. If we want the application to be a website, the following changes are to be done to the ft.app():

ft.app(target=main, view=ft.WEB_BROWSER, port=8550)

By just rewriting this line code, the desktop application we have just created will become a website application and can be accessed from PORT 8550. From the below Image, it is clear that the application is running fine even when it turned to a website application.

"

Use Cases and Applications

Coming to the use cases and applications for Flet, the use cases range from creating quick website prototypes to developing small-scale desktop applications.

1. Quick Prototypes

With Flet, we can make quick business prototypes which would take much longer times when using the traditional frameworks. And it’s not like these prototypes are just for the show, instead, they will be fully functioning working prototypes. Quick prototypes are really helpful when clients come up with shorter intervals of time for the development team.

2. UI for ML Frameworks

Often when working with Machine Learning Applications, we are in need of creating a UI for the application, which involves writing HTML files, CSS, and JS. With Flet, all of this can be done in Python itself thus no need to learn or write frontend languages.

3. Small Scale Mobile/Desktop Applications

Building Mobile/Desktop Apps requires knowledge of languages like Kotlin, Java, C#, etc. Flet is basically a Flutter Framework for Python. With Flet, it becomes very simple to build small Mobile Apps and Desktop  Apps without learning above said languages. With Flet, applications can be built entirely in Python without the need for any external dependencies. And all of this is instantaneous.

Frequently Asked Questions

Q1. What is FLET framework used for?

A. Flet is a versatile framework designed to incorporate server-driven UI (SDUI) experiences into existing Flutter apps or develop independent web, mobile, and desktop applications using Flutter UI. It enables seamless integration of SDUI capabilities, allowing developers to enhance user experiences and build cross-platform applications with ease.

Q2. Can Flutter use Python?

A. Flutter is a programming framework mainly used for building mobile apps and websites. It primarily uses a language called Dart to write the code. While Flutter itself doesn’t directly use Python, you can still make your Flutter app interact with Python by creating connections or using special tools that enable communication between the two. This allows you to combine the strengths of both languages to create more powerful and versatile applications.

Conclusion

Flet is an all-in-one UI Framework for Python that developers can leverage to create website applications, desktop applications, and even mobile applications. In reality, one doesn’t need to spend time learning the front-end technologies to work with Flet, which makes it a go-to choice for new developers who are struggling to build apps. Using Flet, with just changing a single line, an entire desktop application can be converted into a website application and the opposite is true. In this article, we have seen how to work with Flet and some of the necessary Controls to start creating our own Flet applications.

Flet has a clear roadmap set up for them for the year 2023. Flet is trying to expand its core functionality by including more testing capabilities and bringing an in-built Database ORM. Also, Flet is trying to expand its support for mobile development. Also, it’s trying to bring more ready-to-add Controls aka widgets that include Video Embeddings, NavigationDrawer, WebView, AutoComplete, and much more. There are even on verge of launching the Flet Studio App both in Android and iOS.

The key takeaways from this article include:

  1. Flet a UI Framework is enough to develop both Desktop and Website Applications.
  2. Flet comes with many pre-defined Controls aka Widgets with which we can work directly when creating our application.
  3. It even comes with animation elements to be inserted in the application with ease.
  4. With Flet we can create small scale website and desktop applications in matter of minutes.
  5. Flet provides a simple easy-to-understand API, which greatly helps the developers.

References

Code: To access Github Repository Link for the codes discussed in this article click here.

To access the Flet Documentation click here.

The media shown in this article is not owned by Analytics Vidhya and is used at the Author’s discretion. 

ApplicationsblogathonFlutterframeworkmobile appspythonwebsite
Ajay
Ajay

I work as a Developer in the field of Data Science. I constantly spend time learning new things be it related to AI, DataSceine, and CyberSecurity. Deep learning and machine learning are two topics that I find particularly fascinating, and Python is my preferred language for programming. Cyber Security is another field that I'm touching upon recently. I have experience with large-scale data analysis, and I have a solid grasp of a variety of deep learning and machine learning approaches, including neural networks, regression models, and natural language processing. I'm eager to take on new challenges and make a meaningful contribution to the industry, so I'm constantly seeking for ways to enlarge and deepen my knowledge and skills in the subject.

Free Courses

Generative AI 4.7

Generative AI - A Way of Life

Explore Generative AI for beginners: create text and images, use top AI tools, learn practical skills, and ethics.
Large Language Models 4.5

Getting Started with Large Language Models

Master Large Language Models (LLMs) with this course, offering clear guidance in NLP and model training made simple.
Prompt Engineering 4.6

Building LLM Applications using Prompt Engineering

This free course guides you on building LLM apps, mastering prompt engineering, and developing chatbots with enterprise data.
LlamaIndex 4.8

Improving Real World RAG Systems: Key Challenges & Practical Solutions

Explore practical solutions, advanced retrieval strategies, and agentic RAG systems to improve context, relevance, and accuracy in AI-driven applications.
RAG systems using LlamaIndex 4.7

Microsoft Excel: Formulas & Functions

Master MS Excel for data analysis with key formulas, functions, and LookUp tools in this comprehensive course.

Recommended Articles

Responses From Readers

Write for us

Write, captivate, and earn accolades and rewards for your work
  • Reach a Global Audience
  • Get Expert Feedback
  • Build Your Brand & Audience
  • Cash In on Your Knowledge
  • Join a Thriving Community
  • Level Up Your Data Science Game
imag
Congratulations, You Did It!
Well Done on Completing Your Learning Journey. Stay curious and keep exploring!
Building Our Applications Using Flutter
Building Our Applications Using Flutter
Understanding Flask Framework: Installation, features & Expert Insights
Understanding Flask Framework: Installation, features & Expert Insights

We use cookies essential for this site to function well. Please click to help us improve its usefulness with additional cookies. Learn about our use of cookies in our Privacy Policy & Cookies Policy.

Show details