Tabs control finished

Author: FeodorFitsner

client/lib/controls/tabs.dart

@@ -1,11 +1,12 @@
-import 'package:flet_view/controls/error.dart';
 import 'package:flet_view/utils/icons.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_redux/flutter_redux.dart';
 
+import '../actions.dart';
 import '../models/app_state.dart';
 import '../models/control.dart';
-import '../models/control_view_model.dart';
+import '../models/controls_view_model.dart';
+import '../protocol/update_control_props_payload.dart';
 import '../web_socket_client.dart';
 import 'create_control.dart';
 
@@ -32,12 +33,19 @@ class _TabsControlState extends State<TabsControl>
   List<String> _tabsIndex = [];
   String? _value;
   TabController? _tabController;
+  dynamic _dispatch;
 
   @override
   void initState() {
     super.initState();
-    _tabsIndex = widget.children.map((c) => c.attrString("key", "")!).toList();
-    _tabController = TabController(length: _tabsIndex.length, vsync: this);
+    _tabsIndex = widget.children
+        .map((c) => c.attrString("key") ?? c.attrString("text", "")!)
+        .toList();
+    _tabController = TabController(
+        length: _tabsIndex.length,
+        animationDuration: Duration(
+            milliseconds: widget.control.attrInt("animationDuration", 50)!),
+        vsync: this);
     _tabController!.addListener(_tabChanged);
   }
 
@@ -48,6 +56,12 @@ class _TabsControlState extends State<TabsControl>
     var value = _tabsIndex[_tabController!.index];
     if (_value != value) {
       debugPrint("Selected tab: $value");
+      List<Map<String, String>> props = [
+        {"i": widget.control.id, "value": value}
+      ];
+      _dispatch(
+          UpdateControlPropsAction(UpdateControlPropsPayload(props: props)));
+      ws.updateControlProps(props: props);
       ws.pageEventFromWeb(
           eventTarget: widget.control.id,
           eventName: "change",
@@ -60,13 +74,18 @@ class _TabsControlState extends State<TabsControl>
   Widget build(BuildContext context) {
     debugPrint("TabsControl build: ${widget.control.id}");
 
-    var tabsIndex =
-        widget.children.map((c) => c.attrString("key", "")!).toList();
+    var tabsIndex = widget.children
+        .map((c) => c.attrString("key") ?? c.attrString("text", "")!)
+        .toList();
     if (tabsIndex.length != _tabsIndex.length ||
         !tabsIndex.every((item) => _tabsIndex.contains(item))) {
       _tabsIndex =
           widget.children.map((c) => c.attrString("key", "")!).toList();
-      _tabController = TabController(length: _tabsIndex.length, vsync: this);
+      _tabController = TabController(
+          length: _tabsIndex.length,
+          animationDuration: Duration(
+              milliseconds: widget.control.attrInt("animationDuration", 50)!),
+          vsync: this);
       _tabController!.addListener(_tabChanged);
     }
 
@@ -82,72 +101,75 @@ class _TabsControlState extends State<TabsControl>
       }
     }
 
-    var tabs = Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        TabBar(
-            controller: _tabController,
-            isScrollable: true,
-            indicatorColor: Theme.of(context).colorScheme.primary,
-            labelColor: Theme.of(context).colorScheme.primary,
-            unselectedLabelColor: Theme.of(context).colorScheme.onSurface,
-            tabs: widget.children
-                .map((c) => StoreConnector<AppState, ControlViewModel>(
-                    distinct: true,
-                    converter: (store) {
-                      return ControlViewModel.fromStore(store, c.id);
-                    },
-                    builder: (context, tabView) {
-                      var text = tabView.control.attrString("text");
-                      var icon = getMaterialIcon(
-                          tabView.control.attrString("icon", "")!);
-                      var tabContentCtrls = tabView.children
-                          .where((c) => c.name == "tab_content");
-
-                      Widget tabChild;
-                      List<Widget> widgets = [];
-                      if (tabContentCtrls.isNotEmpty) {
-                        tabChild = createControl(
-                            widget.control, tabContentCtrls.first.id, disabled);
-                      } else {
-                        if (icon != null) {
-                          widgets.add(Icon(icon));
-                          if (text != null) {
-                            widgets.add(const SizedBox(width: 8));
-                          }
-                        }
-                        if (text != null) {
-                          widgets.add(Text(text));
+    var tabs = StoreConnector<AppState, ControlsViewModel>(
+        distinct: true,
+        converter: (store) => ControlsViewModel.fromStore(
+            store, widget.children.map((c) => c.id)),
+        builder: (content, viewModel) {
+          _dispatch = viewModel.dispatch;
+
+          // check if all tabs have no content
+          bool emptyTabs = !viewModel.controlViews
+              .any((t) => t.children.any((c) => c.name == "content"));
+
+          var tabBar = TabBar(
+              controller: _tabController,
+              isScrollable: true,
+              indicatorColor: Theme.of(context).colorScheme.primary,
+              labelColor: Theme.of(context).colorScheme.primary,
+              unselectedLabelColor: Theme.of(context).colorScheme.onSurface,
+              tabs: viewModel.controlViews.map((tabView) {
+                var text = tabView.control.attrString("text");
+                var icon =
+                    getMaterialIcon(tabView.control.attrString("icon", "")!);
+                var tabContentCtrls =
+                    tabView.children.where((c) => c.name == "tab_content");
+
+                Widget tabChild;
+                List<Widget> widgets = [];
+                if (tabContentCtrls.isNotEmpty) {
+                  tabChild = createControl(
+                      widget.control, tabContentCtrls.first.id, disabled);
+                } else {
+                  if (icon != null) {
+                    widgets.add(Icon(icon));
+                    if (text != null) {
+                      widgets.add(const SizedBox(width: 8));
+                    }
+                  }
+                  if (text != null) {
+                    widgets.add(Text(text));
+                  }
+                  tabChild = Row(
+                      children: widgets,
+                      mainAxisAlignment: MainAxisAlignment.center);
+                }
+                return Tab(child: tabChild);
+              }).toList());
+
+          if (emptyTabs) {
+            return tabBar;
+          }
+
+          return Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              tabBar,
+              Expanded(
+                  child: TabBarView(
+                      controller: _tabController,
+                      children: viewModel.controlViews.map((tabView) {
+                        var contentCtrls =
+                            tabView.children.where((c) => c.name == "content");
+                        if (contentCtrls.isEmpty) {
+                          return const SizedBox.shrink();
                         }
-                        tabChild = Row(
-                            children: widgets,
-                            mainAxisAlignment: MainAxisAlignment.center);
-                      }
-                      return Tab(child: tabChild);
-                    }))
-                .toList()),
-        Expanded(
-            child: TabBarView(
-                controller: _tabController,
-                children: widget.children
-                    .map((c) => StoreConnector<AppState, ControlViewModel>(
-                        distinct: true,
-                        converter: (store) {
-                          return ControlViewModel.fromStore(store, c.id);
-                        },
-                        builder: (context, tabView) {
-                          var contentCtrls = tabView.children
-                              .where((c) => c.name == "content");
-                          if (contentCtrls.isEmpty) {
-                            return const ErrorControl(
-                                "Tab should have a content.");
-                          }
-                          return createControl(
-                              widget.control, contentCtrls.first.id, disabled);
-                        }))
-                    .toList()))
-      ],
-    );
+                        return createControl(
+                            widget.control, contentCtrls.first.id, disabled);
+                      }).toList()))
+            ],
+          );
+        });
 
     return constrainedControl(tabs, widget.parent, widget.control);
   }

client/lib/models/control_view_model.dart

@@ -19,5 +19,5 @@ class ControlViewModel extends Equatable {
   }
 
   @override
-  List<Object?> get props => [control];
+  List<Object?> get props => [control, children];
 }

client/lib/models/controls_view_model.dart

@@ -0,0 +1,23 @@
+import 'package:equatable/equatable.dart';
+import 'package:redux/redux.dart';
+
+import 'app_state.dart';
+import 'control_view_model.dart';
+
+class ControlsViewModel extends Equatable {
+  final List<ControlViewModel> controlViews;
+  final dynamic dispatch;
+
+  const ControlsViewModel({required this.controlViews, required this.dispatch});
+
+  static ControlsViewModel fromStore(
+      Store<AppState> store, Iterable<String> ids) {
+    return ControlsViewModel(
+        controlViews:
+            ids.map((id) => ControlViewModel.fromStore(store, id)).toList(),
+        dispatch: store.dispatch);
+  }
+
+  @override
+  List<Object?> get props => [controlViews];
+}

docs/roadmap.md

@@ -897,6 +897,7 @@ Properties:
 
 - tabs
 - value
+- animationDuration - in milliseconds
 
 Events:
 

sdk/python/flet/tabs.py

@@ -14,8 +14,8 @@ def __init__(
         content: Control = None,
         tab_content: Control = None,
         ref: Ref = None,
-        key=None,
-        icon=None,
+        key: str = None,
+        icon: str = None,
     ):
         Control.__init__(self, ref=ref)
         assert key or text, "key or text must be specified"
@@ -101,6 +101,7 @@ def __init__(
         # Tabs-specific
         tabs: List[Tab] = None,
         value: str = None,
+        animation_duration: int = None,
         on_change=None,
     ):
 
@@ -118,6 +119,7 @@ def __init__(
 
         self.tabs = tabs
         self.value = value
+        self.animation_duration = animation_duration
         self.on_change = on_change
 
     def _get_control_name(self):
@@ -164,3 +166,13 @@ def value(self, value: Optional[str]):
                 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 "")
+
+    # animation_duration
+    @property
+    def animation_duration(self):
+        return self._get_attr("animationDuration")
+
+    @animation_duration.setter
+    @beartype
+    def animation_duration(self, value: Optional[int]):
+        self._set_attr("animationDuration", value)

sdk/python/playground/tabs-test.py

@@ -13,6 +13,7 @@ def main(page: Page):
 
     t = Tabs(
         value="tab2",
+        animation_duration=300,
         tabs=[
             Tab(
                 key="tab1",