DEV Community

Cover image for Build Flutter Apps using Python ft. flet
Md. Mobin
Md. Mobin Subscriber

Posted on

Build Flutter Apps using Python ft. flet

#flutter #python #flet #tutorial

What is Flet?

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

Installation 

 pip install flet
Enter fullscreen mode Exit fullscreen mode

Hello world Application 

 import flet from flet import Page, Text def main(page: Page): page.add(Text("Hello, world!")) flet.app(target=main)
Enter fullscreen mode Exit fullscreen mode

Run the application using command python3 main.py

hello-world-application

Overview

Flet is built using controls and Page is parent and others like Text,Container, Column , Row etc are child controls.

OverView

Lets Build MiCard App

We have already MiCard App build in flutter but now lets try to build using python the same.

Flutter Mi-card Repo : https://github.com/Djsmk123/mi_card
FlutterMiCard

  • Create a new .py file e.g. micard.py

  • Import all the required files

 import flet from flet import ( Column, Container, Page, Text, UserControl, border_radius, colors, alignment, padding, CircleAvatar, Theme, Divider, ListTile, Icon, icons, Image, )
Enter fullscreen mode Exit fullscreen mode
  • we will be using UserControl(allow to create isolated reusable component,it is same as Control) when its added to page or other control then def build will be called.

So first let create reusable component class and widgets for header(Image,Text,Divider)

 class MICard(UserControl): # Link of profiles,you can change with your own urls = [ "tel://+91966704XXX", "mailto://test@flet.com", "https://twitter.com/smk_winner", "https://github.com/djsmk123" ] def build(self): return Container( # using padding control as same Flutter EdgeInsets.symmetric() padding=padding.symmetric(horizontal=20, vertical=50), # alignment for aligning content in center alignment=alignment.center, # child control content=Column( alignment="center", horizontal_alignment="center", # fixed vertical spacing in b/w child controls spacing=20, controls=[ CircleAvatar( background_image_url="https://www.aceorganicchem.com/blog/wp-content/uploads/2020/02/bitmoji-300x300.jpeg", bgcolor=colors.WHITE, max_radius=100 ), # Text control Text("MD MOBIN",size=40), Text("Flutter Developer", size=30, color=colors.WHITE30), Container( width=1000, padding=padding.symmetric(horizontal=20, vertical=10), content=Divider( color=colors.WHITE, thickness=2, height=50, ) ), ] ) ) def main(page: Page): # page title page.title = "Mi Card" # making page content in center using horizontal and vertical alignment page.horizontal_alignment = "center" page.vertical_alignment = "center" # If page content required scroll then it will enable scrolling in the page page.scroll = "adaptive" # Background color page.bgcolor = colors.BLUE_ACCENT_700 # create application instance card = MICard() # add application's root control to the page page.add(card) flet.app(target=main)
Enter fullscreen mode Exit fullscreen mode

Note: you can change color by passing Hex Value as string or selecting another from available colors.

output1

  • Now we can change font also of Name Text. You can use local file or URL of the fonts. Add following line in main anywhere but before page.add(card):
 page.fonts = { "dancing_script": "https://github.com/google/fonts/raw/main/ofl/dancingscript/DancingScript%5Bwght%5D.ttf" }
Enter fullscreen mode Exit fullscreen mode

Now update name Text control by following

Text("MD MOBIN", font_family='dancing_script', size=40)

 ![output2](https://imgur.com/aBuS5EI.png) - we are done with header so need another control for button and are going to use [ListTile](https://api.flutter.dev/flutter/material/ListTile-class.html) control.lets create function that return List Tile. For that we need icon,title and index(for URLS) as argument
Enter fullscreen mode Exit fullscreen mode

def tile_widget(self, icon, title, index):
return Container(
width=1000,
padding=padding.symmetric(horizontal=20, vertical=10),
bgcolor=colors.WHITE,
alignment=alignment.center,
# it is same as flutter borderRadius.all()

 border_radius=border_radius.all(8), content=ListTile( leading=icon, title=Text(title, color=colors.BLACK), ) )
Enter fullscreen mode Exit fullscreen mode 
 - ListTile has another property called on_click, we will be using it later. - Now add following lines in column for List Tile control
Enter fullscreen mode Exit fullscreen mode

self.tile_widget(icon=Icon(name=icons.CALL,
color=colors.BLACK, size=50), title="+91 9667******",
index=0),
self.tile_widget(icon=Icon(name=icons.EMAIL, color=colors.BLACK, size=50),
title="test@flet.com",
index=1),
self.tile_widget(
icon=Image(src="https://cdn-icons-png.flaticon.com/512/1384/1384033.png", fit="contain"),
title="@SmkWinner",
index=2),
self.tile_widget(
icon=Image(src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png",
fit="contain"), title="DJSMK123",
index=3),

![output3](https://imgur.com/5qwYzHf.png) > As Twitter and GitHub icons are not available in flutter icon library so we are using to images. - Now open links we need a function that take index and open links in browser and we need **webbrowser** library.
Enter fullscreen mode Exit fullscreen mode

import webbrowser

 - Create new function in MiCard Class
Enter fullscreen mode Exit fullscreen mode 
def onClick(self, index): webbrowser.open_new_tab(self.urls[index])
Enter fullscreen mode Exit fullscreen mode 
 ![FunnyGIF](https://media0.giphy.com/media/KEXq9JVp3OyZmxZw0W/giphy.gif?cid=790b7611187efaed1dcd3f84a1aa28d08226bb61290671fe&rid=giphy.gif&ct=g) - as I mention List tile has another property called **on_click**, on_click required argument called event handler that we are going to use [***lambda function***](https://www.geeksforgeeks.org/python-lambda-anonymous-functions-filter-map-reduce/).
Enter fullscreen mode Exit fullscreen mode

content=ListTile(
leading=icon,
title=Text(title, color=colors.BLACK),
# add this line in List Tile Control
on_click=lambda e: self.onClick(index=index)
)

 ![done](https://media0.giphy.com/media/0J6a9t26CadflwHc9k/giphy.gif?cid=ecf05e47grodkjeky5qfkntqtn5hv7mj0ntsdyv1uuehf4v1&rid=giphy.gif&ct=g) - For executing app in the browser
Enter fullscreen mode Exit fullscreen mode 
flet.app(target=main,view=flet.WEB_BROWSER)
Enter fullscreen mode Exit fullscreen mode 
 - [**Source Code**](https://github.com/Djsmk123/flet_mi_card) - [**To-Do app**](https://flet.dev/docs/tutorials/python-todo) > Follow me: - [GitHub](https://github.com//djsmk123) - [LinkedIn](https://www.linkedin.com/in/md-mobin-bb928820b) - [Twitter](https://twitter.com/smk_winner)
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
juniverse profile image
Universe •

This is great!I'll look more into it.

Collapse
 
oknhahii profile image
Andrew •

I hope Python flet can compete with React native