Tabs selected_index

Author: FeodorFitsner

client/lib/controls/navigation_rail.dart

@@ -58,11 +58,8 @@ class _NavigationRailControlState extends State<NavigationRailControl> {
   Widget build(BuildContext context) {
     debugPrint("NavigationRailControl build: ${widget.control.id}");
 
-    var selectedIndex = widget.control.attrInt("selectedIndex");
-
-    debugPrint(selectedIndex.toString());
-
     bool disabled = widget.control.isDisabled || widget.parentDisabled;
+    var selectedIndex = widget.control.attrInt("selectedIndex");
 
     if (_selectedIndex != selectedIndex) {
       _selectedIndex = selectedIndex;

client/lib/controls/tabs.dart

@@ -31,16 +31,14 @@ class TabsControl extends StatefulWidget {
 class _TabsControlState extends State<TabsControl>
     with TickerProviderStateMixin {
   List<String> _tabsIndex = [];
-  String? _value;
   TabController? _tabController;
+  int _selectedIndex = 0;
   dynamic _dispatch;
 
   @override
   void initState() {
     super.initState();
-    _tabsIndex = widget.children
-        .map((c) => c.attrString("key") ?? c.attrString("text", "")!)
-        .toList();
+    _tabsIndex = widget.children.map((c) => c.id).toList();
     _tabController = TabController(
         length: _tabsIndex.length,
         animationDuration: Duration(
@@ -53,34 +51,31 @@ class _TabsControlState extends State<TabsControl>
     if (_tabController!.indexIsChanging == true) {
       return;
     }
-    var value = _tabsIndex[_tabController!.index];
-    if (_value != value) {
-      debugPrint("Selected tab: $value");
+    var index = _tabController!.index;
+    if (_selectedIndex != index) {
+      debugPrint("Selected index: $index");
       List<Map<String, String>> props = [
-        {"i": widget.control.id, "value": value}
+        {"i": widget.control.id, "selectedindex": index.toString()}
       ];
       _dispatch(
           UpdateControlPropsAction(UpdateControlPropsPayload(props: props)));
       ws.updateControlProps(props: props);
       ws.pageEventFromWeb(
           eventTarget: widget.control.id,
           eventName: "change",
-          eventData: value);
+          eventData: index.toString());
+      _selectedIndex = index;
     }
-    _value = value;
   }
 
   @override
   Widget build(BuildContext context) {
     debugPrint("TabsControl build: ${widget.control.id}");
 
-    var tabsIndex = widget.children
-        .map((c) => c.attrString("key") ?? c.attrString("text", "")!)
-        .toList();
+    var tabsIndex = widget.children.map((c) => c.id).toList();
     if (tabsIndex.length != _tabsIndex.length ||
         !tabsIndex.every((item) => _tabsIndex.contains(item))) {
-      _tabsIndex =
-          widget.children.map((c) => c.attrString("key", "")!).toList();
+      _tabsIndex = tabsIndex;
       _tabController = TabController(
           length: _tabsIndex.length,
           animationDuration: Duration(
@@ -91,14 +86,13 @@ class _TabsControlState extends State<TabsControl>
 
     bool disabled = widget.control.isDisabled || widget.parentDisabled;
 
-    String? value = widget.control.attrString("value");
-    if (_value != value) {
-      _value = value;
+    var selectedIndex = widget.control.attrInt("selectedIndex", 0)!;
 
-      int idx = _tabsIndex.indexOf(_value ?? "");
-      if (idx != -1) {
-        _tabController!.index = idx;
-      }
+    if (selectedIndex > -1 &&
+        selectedIndex < tabsIndex.length &&
+        _selectedIndex != selectedIndex) {
+      _selectedIndex = selectedIndex;
+      _tabController!.index = selectedIndex;
     }
 
     var tabs = StoreConnector<AppState, ControlsViewModel>(

sdk/python/flet/tabs.py

@@ -15,12 +15,9 @@ def __init__(
         content: Control = None,
         tab_content: Control = None,
         ref: Ref = None,
-        key: str = None,
         icon: str = None,
     ):
         Control.__init__(self, ref=ref)
-        assert key or text, "key or text must be specified"
-        self.key = key
         self.text = text
         self.icon = icon
         self.__content: Control = None
@@ -41,15 +38,6 @@ def _get_children(self):
             children.append(self.__content)
         return children
 
-    # key
-    @property
-    def key(self):
-        return self._get_attr("key")
-
-    @key.setter
-    def key(self, value):
-        self._set_attr("key", value)
-
     # text
     @property
     def text(self):
@@ -101,7 +89,7 @@ def __init__(
         #
         # Tabs-specific
         tabs: List[Tab] = None,
-        value: str = None,
+        selected_index: int = None,
         animation_duration: int = None,
         on_change=None,
     ):
@@ -119,7 +107,7 @@ def __init__(
         )
 
         self.tabs = tabs
-        self.value = value
+        self.selected_index = selected_index
         self.animation_duration = animation_duration
         self.on_change = on_change
 
@@ -139,7 +127,6 @@ def tabs(self):
     def tabs(self, value: Optional[List[Tab]]):
         value = value or []
         self.__tabs = value
-        self.value = value and (value[0].key or value[0].text) or ""
 
     # on_change
     @property
@@ -150,23 +137,15 @@ def on_change(self):
     def on_change(self, handler):
         self._add_event_handler("change", handler)
 
-    # value
+    # selected_index
     @property
-    def value(self):
-        return self._get_attr("value")
+    def selected_index(self):
+        return self._get_attr("selectedIndex", data_type="int", def_value=0)
 
-    @value.setter
+    @selected_index.setter
     @beartype
-    def value(self, value: Optional[str]):
-        if not value:
-            assert (
-                not self.tabs
-            ), "Setting an empty value is only allowed if you have no tabs"
-        else:
-            assert any(
-                value in keys for keys in [(tab.key, tab.text) for tab in self.tabs]
-            ), f"'{value}' is not a key for any tab"
-        self._set_attr("value", value or "")
+    def selected_index(self, value: Optional[int]):
+        self._set_attr("selectedIndex", value)
 
     # animation_duration
     @property

sdk/python/playground/tabs-test.py

@@ -12,23 +12,20 @@ def main(page: Page):
     page.title = "Tabs example"
 
     t = Tabs(
-        value="tab2",
+        selected_index=1,
         animation_duration=300,
         tabs=[
             Tab(
-                key="tab1",
                 text="Tab 1",
                 content=Container(
                     content=Text("This is Tab 1"), alignment=alignment.center
                 ),
             ),
             Tab(
-                key="tab2",
                 tab_content=Icon(icons.MESSAGE),
                 content=Text("This is Tab 2"),
             ),
             Tab(
-                key="tab3",
                 text="Tab 3",
                 icon=icons.IRON,
                 content=Text("This is Tab 3"),
@@ -39,14 +36,14 @@ def main(page: Page):
 
     page.add(t)
 
-    sleep(3)
-    t.value = "tab3"
+    sleep(7)
+    t.selected_index = 2
     page.update()
     sleep(3)
-    t.value = "tab1"
+    t.selected_index = 0
     page.update()
     sleep(3)
-    t.value = "tab2"
+    t.selected_index = 1
     t.tabs.pop(0)
     t.tabs[1].content = Text("Blah blah blah")
     page.update()
@@ -56,15 +53,13 @@ def main(page: Page):
     sleep(3)
     t.tabs.append(
         Tab(
-            key="tab4",
             text="Tab 4",
             icon=icons.LOCK,
             content=Text("This is Tab 4"),
         )
     )
     t.tabs.append(
         Tab(
-            key="tab5",
             text="Tab 5",
             icon=icons.SIP_SHARP,
             content=Text("This is Tab 5"),

sdk/python/playground/todo.py

@@ -92,7 +92,7 @@ def __init__(self):
         self.new_task = TextField(hint_text="Whats needs to be done?", expand=True)
         self.tasks_view = Column()
         self.filter = Tabs(
-            value="all",
+            selected_index="all",
             on_change=self.tabs_changed,
             tabs=[Tab(text="all"), Tab(text="active"), Tab(text="completed")],
         )