I wrote a samll piece of code for my todo app ui... but whenever I use expand=True
for ft.Text
or ft.Tabs
, It ends up stacking all views in top-left corner...
I could not find a solution to my problem in the docs.
Here is my code:
import flet as ft
class App(ft.UserControl):
def __init__(self, page: ft.Page):
super().__init__()
self.page = page
self.todos_list = []
def build(self):
self.todo_input_view = ft.Row(
spacing=5,
alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
controls=[
ft.TextField(
expand=True,
hint_text="Todo...",
border=ft.InputBorder.UNDERLINE,
filled=True
),
ft.IconButton(
ft.icons.ADD_TASK_ROUNDED,
icon_size=40
)
]
)
self.tabs = ft.Tabs(
expand=True,
selected_index=0,
tabs=[
ft.Tab(
text="All",
content=self.todos_list
),
ft.Tab(
text="Pending",
content=self.todos_list
),
ft.Tab(
text="Completed",
content=self.todos_list
),
]
)
return ft.Column(
expand=True,
controls=[
ft.Text(
"Todo App",
text_align=ft.TextAlign.CENTER,
size=25
),
self.todo_input_view,
self.tabs,
]
)
class Todo(ft.UserControl):
def __init__(self, page: ft.Page):
super().__init__()
self.page = page
def main(page: ft.Page):
page.theme_mode = "dark"
page.title = "Todo App"
page.window_width = 450
page.window_height = 600
page.add(App(page))
ft.app(main)
Thank you for your time!