TabView lazy loading

Tabs are initialized by demand. Most of the logic is copied from NavigationBody
bdlukaa · Mar 13, 2023 · 00c6114 · 00c6114
1 parent 9763a4c
commit 00c6114
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - Add source code for Surfaces/CommandBar in example application
 - Add Greek localization ([#761](https://github.com/bdlukaa/fluent_ui/pull/761))
+- `TabView` lazy loading ([#751](https://github.com/bdlukaa/fluent_ui/issues/751))
 
 ## 4.4.1
 

diff --git a/lib/src/controls/navigation/tab_view.dart b/lib/src/controls/navigation/tab_view.dart
@@ -586,9 +586,9 @@ class _TabViewState extends State<TabView> {
         Expanded(
           child: Focus(
             autofocus: true,
-            child: IndexedStack(
+            child: _TabBody(
               index: widget.currentIndex,
-              children: widget.tabs.map((tab) => tab.body).toList(),
+              tabs: widget.tabs,
             ),
           ),
         ),
@@ -665,6 +665,67 @@ class _TabViewState extends State<TabView> {
   }
 }
 
+class _TabBody extends StatefulWidget {
+  final int index;
+  final List<Tab> tabs;
+
+  const _TabBody({
+    Key? key,
+    required this.index,
+    required this.tabs,
+  }) : super(key: key);
+
+  @override
+  State<_TabBody> createState() => __TabBodyState();
+}
+
+class __TabBodyState extends State<_TabBody> {
+  final _pageKey = GlobalKey<State<PageView>>();
+  PageController? _pageController;
+  PageController get pageController => _pageController!;
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    MediaQuery.of(context);
+
+    _pageController ??= PageController(initialPage: widget.index);
+  }
+
+  @override
+  void didUpdateWidget(_TabBody oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (pageController.hasClients) {
+      if (oldWidget.index != widget.index ||
+          pageController.page != widget.index) {
+        pageController.jumpToPage(widget.index);
+      }
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return PageView.builder(
+      key: _pageKey,
+      physics: const NeverScrollableScrollPhysics(),
+      controller: pageController,
+      itemCount: widget.tabs.length,
+      itemBuilder: (context, index) {
+        final isSelected = widget.index == index;
+        final item = widget.tabs[index];
+
+        return ExcludeFocus(
+          key: ValueKey(index),
+          excluding: !isSelected,
+          child: FocusTraversalGroup(
+            child: item.body,
+          ),
+        );
+      },
+    );
+  }
+}
+
 /// Represents a single tab within a [TabView].
 class Tab {
   final _tabKey = GlobalKey<__TabState>(debugLabel: 'Tab key');