how to trigger page update when clicked on list tile

[asagarshinde]

Below is the complete code.

import flet
from flet import Tabs, Tab, Page, Container, Text, alignment, UserControl, Column, ElevatedButton, colors, ListTile, \
    padding, Row


def main(page: Page):
    t = Tabs(
        selected_index=1,
        animation_duration=300,
        expand=True,
        tabs=[
            Tab(
                text="Kafka",
                content=KafkaPanel()
            ),
            Tab(
                text="Cassandra",
                content=Container(
                    content=Text("This is Cassandra Tab."),
                    alignment=alignment.center
                )
            ),
            Tab(
                text="Elasticsearch",
                content=Container(
                    content=Text("This is Elasticsearch Tab."),
                    alignment=alignment.center
                )
            ),
            Tab(
                text="Janusgraph",
                content=Container(
                    content=Text("This is Janus graph Tab."),
                    alignment=alignment.center
                )
            )
        ]
    )
    page.add(t)
    page.update()


class KafkaPanel(UserControl):
    def __init__(self):
        super().__init__()
        self.view = Row()
        self.commands = ["groups", "topics", "logs"]
        self.selected_list_item = {"groups": True, "topics": False, "logs": False}
        self.selected_item = "groups"
        self.items = self.get_panel_items()

    def on_click(self, value):
        self.selected_item = value.data
        print(f"selected item is {self.selected_item}")
        self.update()

    def get_panel_items(self):
        panel_items = []
        for i, item in enumerate(self.commands):
            panel_items.append(
                Container(
                    content=ListTile(
                        selected=self.selected_list_item.get(item),
                        data=item,
                        title=Text(item),
                        content_padding=padding.symmetric(horizontal=16),
                        on_click=self.on_click,
                        text=item
                    )
                )
            )
        return panel_items

    def build(self):
        return Row(
            controls=[
                Column(
                    width=200,
                    controls=[
                        *self.items
                    ]
                ),
                Text(f"selected menu is {self.selected_item}")
            ])


flet.app(target=main)

when clicked on any list tile on_click method is executed and print is also working fine but the same is not reflected in UI.

[FeodorFitsner]

This Text(f"selected menu is {self.selected_item}") won't work. I mean it works only once when build() is called. build() is called only once before "mounting" the control.

You have to update Text's value property in on_click and call self.update():

import flet
from flet import (
    Column,
    Container,
    ElevatedButton,
    ListTile,
    Page,
    Row,
    Tab,
    Tabs,
    Text,
    UserControl,
    alignment,
    colors,
    padding,
)


def main(page: Page):
    t = Tabs(
        selected_index=1,
        animation_duration=300,
        expand=True,
        tabs=[
            Tab(text="Kafka", content=KafkaPanel()),
            Tab(
                text="Cassandra",
                content=Container(
                    content=Text("This is Cassandra Tab."), alignment=alignment.center
                ),
            ),
            Tab(
                text="Elasticsearch",
                content=Container(
                    content=Text("This is Elasticsearch Tab."),
                    alignment=alignment.center,
                ),
            ),
            Tab(
                text="Janusgraph",
                content=Container(
                    content=Text("This is Janus graph Tab."), alignment=alignment.center
                ),
            ),
        ],
    )
    page.add(t)
    page.update()


class KafkaPanel(UserControl):
    def __init__(self):
        super().__init__()
        self.view = Row()
        self.commands = ["groups", "topics", "logs"]
        self.selected_list_item = {"groups": True, "topics": False, "logs": False}
        self.selected_item = "groups"
        self.selected_item_text = Text(f"selected menu is {self.selected_item}")
        self.items = self.get_panel_items()

    def on_click(self, value):
        self.selected_item = value.data
        print(f"selected item is {self.selected_item}")
        self.selected_item_text.value = f"selected menu is {self.selected_item}"
        self.update()

    def get_panel_items(self):
        panel_items = []
        for i, item in enumerate(self.commands):
            panel_items.append(
                Container(
                    content=ListTile(
                        selected=self.selected_list_item.get(item),
                        data=item,
                        title=Text(item),
                        content_padding=padding.symmetric(horizontal=16),
                        on_click=self.on_click,
                        text=item,
                    )
                )
            )
        return panel_items

    def build(self):
        return Row(
            controls=[
                Column(width=200, controls=[*self.items]),
                self.selected_item_text,
            ]
        )


flet.app(target=main)

[asagarshinde]

thanks, it helps