Tags Example in Flet and Python

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)