| 72 | |
| 73 | class TodoApp(ft.Column): |
| 74 | def build(self): |
| 75 | self.new_task = ft.TextField( |
| 76 | key="new_task", |
| 77 | hint_text="What needs to be done?", |
| 78 | on_submit=self.add_clicked, |
| 79 | expand=True, |
| 80 | ) |
| 81 | self.tasks = ft.Column() |
| 82 | |
| 83 | self.filter = ft.TabBar( |
| 84 | scrollable=False, |
| 85 | tabs=[ |
| 86 | ft.Tab(label="all"), |
| 87 | ft.Tab(label="active"), |
| 88 | ft.Tab(label="completed"), |
| 89 | ], |
| 90 | ) |
| 91 | |
| 92 | self.filter_tabs = ft.Tabs( |
| 93 | length=3, |
| 94 | selected_index=0, |
| 95 | on_change=lambda e: self.update(), |
| 96 | content=self.filter, |
| 97 | ) |
| 98 | |
| 99 | self.items_left = ft.Text("0 items left") |
| 100 | |
| 101 | self.width = 600 |
| 102 | self.controls = [ |
| 103 | ft.Row( |
| 104 | [ft.Text(value="Todos", theme_style=ft.TextThemeStyle.HEADLINE_MEDIUM)], |
| 105 | alignment=ft.MainAxisAlignment.CENTER, |
| 106 | ), |
| 107 | ft.Row( |
| 108 | controls=[ |
| 109 | self.new_task, |
| 110 | ft.FloatingActionButton( |
| 111 | key="add_task", |
| 112 | icon=ft.Icons.ADD, |
| 113 | on_click=self.add_clicked, |
| 114 | ), |
| 115 | ], |
| 116 | ), |
| 117 | ft.Column( |
| 118 | spacing=25, |
| 119 | controls=[ |
| 120 | self.filter_tabs, |
| 121 | self.tasks, |
| 122 | ft.Row( |
| 123 | alignment=ft.MainAxisAlignment.SPACE_BETWEEN, |
| 124 | vertical_alignment=ft.CrossAxisAlignment.CENTER, |
| 125 | controls=[ |
| 126 | self.items_left, |
| 127 | ft.OutlinedButton( |
| 128 | content="Clear completed", on_click=self.clear_clicked |
| 129 | ), |
| 130 | ], |
| 131 | ), |