Tags Example in Flet and Python
Just a quick example of how to create, add and remove hashtags in a Flet app. I needed to create this for an app I am working on and thought I’d share.
import flet as ft ''' C. Nichols flet hashtag example ''' def main(page: ft.Page): # *** Page theme. page.theme_mode = "dark" # or light, or comment out for system. page.vertical_alignment = ft.MainAxisAlignment.START page.horizontal_alignment = ft.CrossAxisAlignment.START # *** Functions. def delete_tag(e): ''' Delete a tag by index. ''' for index, row_item in enumerate(tag_list.controls): if e.control.data == row_item.controls[0].text: break tag_list.controls.pop(index) # Pop the tag out of the list. tags.counter_text = "Tag Count: %s" % len(tag_list.controls) # Update counter. tags.focus() # Focus the TextField. page.update() # Update page. def add_tag(e): ''' Add a tag as an ElevatedButton and add to a ListView. ''' t = "#%s" % tags.value.strip() del_btn = ft.ElevatedButton(text=t, icon=ft.icons.CLOSE_OUTLINED, on_click=delete_tag, data=t, icon_color=ft.colors.BLUE_300, color=ft.colors.BLUE_300, bgcolor=ft.colors.BLACK) tag_list.controls.append(ft.Row(controls=[del_btn])) tags.counter_text = "Tag Count: %s" % len(tag_list.controls) # Update counter. tags.value = "" tags.focus() # Focus the TextField. page.update() # Update page. # *** Page controls. tags = ft.TextField(counter_text="Tag Count: 0", on_submit=add_tag, border_color=ft.colors.BLUE_300, hint_text="Add tags") tag_list = ft.ListView(spacing=10, padding=20, auto_scroll=True) page.add( ft.Column(controls=[tags,tag_list]) ) tags.focus() # Focus the TextField. page.update() # Update page. ft.app(target=main)