Assistant: 
User: system prompt: 
You are a highly intelligent AI assistant that specializes in generating UI components for Flet in Python based on simple user prompts. Your task is to understand the user's intent, generate accurate Flet UI components, and provide explanations if necessary. Here's how you should proceed:

Understand the User's Intent:
Carefully read the user's prompt to identify the type of UI component they need (e.g., buttons, sliders, containers, or custom layouts). Always clarify if the user’s request seems vague.
Flet Context:
Use the Flet framework to generate Python code for the UI components.
Ensure that the components are functional and compatible with the latest version of Flet.
If any specific libraries, tools, or design conventions are required, incorporate them into the generated code.
Web Context and References:
If the user's prompt refers to a library, functionality, or trend that you're unfamiliar with, retrieve relevant context from the web.
Use context-aware design principles, ensuring the components align with UI/UX best practices.
In cases of specific design requests, verify if additional libraries (like CSS styling or advanced widgets) are needed.
Code Generation:
Generate Python code that accurately represents the UI component requested.
Ensure the code is well-structured, with appropriate imports and correct function/method use.
If multiple components are requested, ensure they are compatible and can function together within the same Flet application.
Provide comments in the code to explain key sections and how they relate to the user's prompt.
Handle Errors and Edge Cases:
If the user’s request has potential edge cases (e.g., missing parameters, invalid syntax), offer solutions or suggestions for improvement.
Gracefully handle scenarios where input is incomplete, offering guidance on how to refine it.
Output:
Present the Python code in a well-formatted manner, and explain its functionality briefly if needed.
If possible, include a sample preview of the UI layout in text form, describing how the components will look.

 user prompt: create a to do list app using flet in python that has black background and white text and white icons.
 web context: Create To-Do app in Python with Flet | FletSkip to main content⭐️ If you like Flet, give it a star onGitHuband join the discussion onDiscord.FletDocsGalleryRoadmapBlogSearchFletIntroductionGetting startedPublishing Flet appExtending FletControlsCookbookTutorialsTo-Do appCalculator appTrello cloneSolitaire gameChat appReferenceTutorialsTo-Do appOn this pageCreate To-Do app in Python with FletIn this tutorial we will show you, step-by-step, how to create a To-Do app in Python using Flet framework and then publish it as a desktop, mobile or web app. The app is a single-file console program of just172 lines (formatted!) of Python code, yet it is a multi-platform application with rich, responsive UI:You can see the live demohere.We chose a To-Do app for the tutorial, because it covers all of the basic concepts you would need to create a Flet app: building a page layout, adding controls, handling events, displaying and editing lists, making reusable UI components, and publishing options.The tutorial consists of the following steps:Getting started with FletAdding page controls and handling eventsView, edit and delete list itemsFiltering list itemsFinal touchesPublishing the appGetting started with Flet​To create a multi-platform app in Python with Flet, you don't need to know HTML, CSS or JavaScript, but you do need a basic knowledge of Python and object-oriented programming.Before you can create your first Flet app, you need tosetup your development environment, which requires Python 3.8 or above andfletpackage.Once you have Flet installed, let'screatea simple hello-world app.Createhello.pywith the following contents:importfletasftdefmain(page:ft.Page):page.add(ft.Text(value="Hello, world!"))ft.app(main)Run this app and you will see a new window with a greeting:Adding page controls and handling events​Now we're ready to create a multi-user To-Do app.To start, we'll need aTextFieldfor entering a task name, and an "+"FloatingActionButtonwith an event handler that will display aCheckboxwith a new task.Createtodo.pywith the following contents:importfletasftdefmain(page:ft.Page):defadd_clicked(e):page.add(ft.Checkbox(label=new_task.value))new_task.value=""page.update()new_task=ft.TextField(hint_text="What's needs to be done?")page.add(new_task,ft.FloatingActionButton(icon=ft.icons.ADD,on_click=add_clicked))ft.app(main)Run the app and you should see a page like this:Page layout​Now let's make the app look nice! We want the entire app to be at the top center of the page, taking up 600 px width. The TextField and the "+" button should be aligned horizontally, and take up full app width:Rowis a control that is used to lay its children controls out horizontally on a page.Columnis a control that is used to lay its children controls out vertically on a page.Replacetodo.pycontents with the following:importfletasftdefmain(page:ft.Page):defadd_clicked(e):tasks_view.controls.append(ft.Checkbox(label=new_task.value))new_task.value=""view.update()new_task=ft.TextField(hint_text="What needs to be done?",expand=True)tasks_view=ft.Column()view=ft.Column(width=600,controls=[ft.Row(controls=[new_task,ft.FloatingActionButton(icon=ft.icons.ADD,on_click=add_clicked),],),tasks_view,],)page.horizontal_alignment=ft.CrossAxisAlignment.CENTERpage.add(view)ft.app(main)Run the app and you should see a page like this:Reusable UI components​While we could continue writing our app in themainfunction, the best practice would be to create areusable UI component. Imagine you are working on an app header, a side menu, or UI that will be a part of a larger project. Even if you can't think of such uses right now, we still recommend creating all your Flet apps with composability and reusability in mind.To make a reusable To-Do app component, we are going to encapsulate its state and presentation logic in a separate class:importfletasftclassTodoApp(ft.Column):# application's root control is a Column containing all other controlsdef__init__(self):super().__init__()self.new_task=ft.TextField(hint_text="What needs to be done?",expand=True)self.tasks_view=ft.Column()self.width=600self.controls=[ft.Row(controls=[self.new_task,ft.FloatingActionButton(icon=ft.icons.ADD,on_click=self.add_clicked),],),self.tasks_view,]defadd_clicked(self,e):self.tasks_view.controls.append(ft.Checkbox(label=self.new_task.value))self.new_task.value=""self.update()defmain(page:ft.Page):page.title="To-Do App"page.horizontal_alignment=ft.CrossAxisAlignment.CENTERpage.update()# create application instancetodo=TodoApp()# add application's root control to the pagepage.add(todo)ft.app(main)noteTry adding twoTodoAppcomponents to the page:# create application instanceapp1=TodoApp()app2=TodoApp()# add application's root control to the pagepage.add(app1,app2)View, edit and delete list items​In theprevious step, we created a basic To-Do app with task items shown as checkboxes. Let's improve the app by adding "Edit" and "Delete" buttons next to a task name. The "Edit" button will switch a task item to edit mode.Each task item is represented by two rows:display_viewrow with Checkbox, "Edit" and "Delete" buttons andedit_viewrow with TextField and "Save" button.viewcolumn serves as a container for bothdisplay_viewandedit_viewrows.Before this step, the code was short enough to be fully included in the tutorial. Going forward, we will be highlighting only the changes introduced in a step.Copy the entire code for this step fromhere. Below we will explain the changes we've done to implement view, edit, and delete tasks.To encapsulate task item views and actions, we introduced a newTaskclass:classTask(ft.Column):def__init__(self,task_name,task_delete):super().__init__()self.task_name=task_nameself.task_delete=task_deleteself.display_task=ft.Checkbox(value=False,label=self.task_name)self.edit_name=ft.TextField(expand=1)self.display_view=ft.Row(alignment=ft.MainAxisAlignment.SPACE_BETWEEN,vertical_alignment=ft.CrossAxisAlignment.CENTER,controls=[self.display_task,ft.Row(spacing=0,controls=[ft.IconButton(icon=ft.icons.CREATE_OUTLINED,tooltip="Edit To-Do",on_click=self.edit_clicked,),ft.IconButton(ft.icons.DELETE_OUTLINE,tooltip="Delete To-Do",on_click=self.delete_clicked,),],),],)self.edit_view=ft.Row(visible=False,alignment=ft.MainAxisAlignment.SPACE_BETWEEN,vertical_alignment=ft.CrossAxisAlignment.CENTER,controls=[self.edit_name,ft.IconButton(icon=ft.icons.DONE_OUTLINE_OUTLINED,icon_color=ft.colors.GREEN,tooltip="Update To-Do",on_click=self.save_clicked,),],)self.controls=[self.display_view,self.edit_view]defedit_clicked(self,e):self.edit_name.value=self.display_task.labelself.display_view.visible=Falseself.edit_view.visible=Trueself.update()defsave_clicked(self,e):self.display_task.label=self.edit_name.valueself.display_view.visible=Trueself.edit_view.visible=Falseself.update()defdelete_clicked(self,e):self.task_delete(self)Additionally, we changedTodoAppclass to create and holdTaskinstances when the "Add" button is clicked:classTodoApp(ft.Column):# application's root control is a Column containing all other controlsdef__init__(self):super().__init__()self.new_task=ft.TextField(hint_text="What needs to be done?",expand=True)self.tasks=ft.Column()self.width=600self.controls=[ft.Row(controls=[self.new_task,ft.FloatingActionButton(icon=ft.icons.ADD,on_click=self.add_clicked),],),self.tasks,]defadd_clicked(self,e):task=Task(self.new_task.value,self.task_delete)self.tasks.controls.append(task)self.new_task.value=""self.update()deftask_delete(self,task):self.tasks.controls.remove(task)self.update()For "Delete" task operation, we implementedtask_delete()method inTodoAppclass which accepts task control instance as a parameter.Then, we passed a reference totask_deletemethod into Task constructor and called it on "Delete" button event handler.Run the app and try to edit and delete tasks:Filtering list items​We already have a functional To-Do app where we can create, edit, and delete tasks. To be even more productive, we want to be able to filter tasks by their status.Copy the entire code for this step fromhere. Below we will explain the changes we've done to implement filtering.Tabscontrol is used to display filter:# ...classTodoApp(ft.Column):# application's root control is a Column containing all other controlsdef__init__(self):super().__init__()self.new_task=ft.TextField(hint_text="What's needs to be done?",expand=True)self.tasks=ft.Column()self.filter=ft.Tabs(selected_index=0,on_change=self.tabs_changed,tabs=[ft.Tab(text="all"),ft.Tab(text="active"),ft.Tab(text="completed")],)# ....To display different lists of tasks depending on their statuses, we could maintain three lists with "All", "Active" and "Completed" tasks. We, however, chose an easier approach where we maintain the same list and only change a task's visibility depending on its status.InTodoAppclass we overridedbefore_update()method alled every time when the control is being updated. It iterates through all the tasks and updates theirvisibleproperty depending on the status of the task:classTodoApp(ft.Column):# ...defbefore_update(self):status=self.filter.tabs[self.filter.selected_index].textfortaskinself.tasks.controls:task.visible=(status=="all"or(status=="active"andtask.completed==False)or(status=="completed"andtask.completed))Filtering should occur when we click on a tab or change a task status.TodoApp.before_update()method is called when Tabs selected value is changed or Task item checkbox is clicked:classTodoApp(ft.Column):# ...deftabs_changed(self,e):self.update()deftask_status_change(self,e):self.update()defadd_clicked(self,e):task=Task(self.new_task.value,self.task_status_change,self.task_delete)# ...classTask(ft.Column):def__init__(self,task_name,task_status_change,task_delete):super().__init__()self.completed=Falseself.task_name=task_nameself.task_status_change=task_status_changeself.task_delete=task_deleteself.display_task=ft.Checkbox(value=False,label=self.task_name,on_change=self.status_changed)# ...defstatus_changed(self,e):self.completed=self.display_task.valueself.task_status_change()Run the app and try filtering tasks by clicking on the tabs:Final touches​Our Todo app is almost complete now. As a final touch, we will add a footer (Columncontrol) displaying the number of incomplete tasks (Textcontrol) and a "Clear completed" button.Copy the entire code for this step fromhere. Below we highlighted the changes we've done to implement the footer:classTodoApp():def__init__(self):# ...self.items_left=ft.Text("0 items left")self.width=600self.controls=[ft.Row([ft.Text(value="Todos",theme_style=ft.TextThemeStyle.HEADLINE_MEDIUM)],alignment=ft.MainAxisAlignment.CENTER,),ft.Row(controls=[self.new_task,ft.FloatingActionButton(icon=ft.icons.ADD,on_click=self.add_clicked),],),ft.Column(spacing=25,controls=[self.filter,self.tasks,ft.Row(alignment=ft.MainAxisAlignment.SPACE_BETWEEN,vertical_alignment=ft.CrossAxisAlignment.CENTER,controls=[self.items_left,ft.OutlinedButton(text="Clear completed",on_click=self.clear_clicked),],),],),]# ...defclear_clicked(self,e):fortaskinself.tasks.controls[:]:iftask.completed:self.task_delete(task)defbefore_update(self):status=self.filter.tabs[self.filter.selected_index].textcount=0fortaskinself.tasks.controls:task.visible=(status=="all"or(status=="active"andtask.completed==False)or(status=="completed"andtask.completed))ifnottask.completed:count+=1self.items_left.value=f"{count}active item(s) left"Run the app:Publishing the app​Congratulations! You have created your first Python app with Flet, and it looks awesome!Now it's time to share your app with the world!Follow these instructionsto publish your Flet app as a mobile, desktop or web app.Summary​In this tutorial, you have learnt how to:Create a simple Flet app;Work withReusable UI components;Design UI layout usingColumnandRowcontrols;Work with lists: view, edit and delete items, filtering;Publishyour Flet app to multiple platforms;For further reading you can explorecontrolsandexamples repository.We would love to hear your feedback! Please drop us anemail, join the discussion onDiscord.Edit this pagePreviousTutorialsNextCalculator appGetting started with FletAdding page controls and handling eventsPage layoutReusable UI componentsView, edit and delete list itemsFiltering list itemsFinal touchesPublishing the appSummaryDocsIntroductionControls referenceCommunityDiscordStack OverflowMoreBlogGitHubSupportLegalPrivacy policyCopyright © 2024 Appveyor Systems Inc. Built with Docusaurus.
Assistant: