Merge pull request #10 from snkrdunk/stackedContentOnTabBuilder

各タブのタブラベル部分に任意の UI を重ねられるようにする
snkrdunk · Jan 31, 2024 · e6493de · e6493de
2 parents f82919c + e48d52a
commit e6493de
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 33 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## 1.0.7
 
-- `InnerInfiniteScrollTabView` に任意の `Widget? stackedContent` を指定してタブラベルに重ねて任意の UI を表示できるようにしました。
+- `InnerInfiniteScrollTabView` に `Widget? stackedContentOnTabBuilder` を指定してタブラベルに重ねて任意の UI を表示できるようにしました。
 - `.gitignore` に `pubspec.lock` を追加しました。
 
 ## 1.0.3

diff --git a/lib/src/infinite_scroll_tab_view.dart b/lib/src/infinite_scroll_tab_view.dart
@@ -23,6 +23,7 @@ class InfiniteScrollTabView extends StatelessWidget {
     Key? key,
     required this.contentLength,
     required this.tabBuilder,
+    this.stackedContentOnTabBuilder,
     required this.pageBuilder,
     this.onTabTap,
     this.separator,
@@ -36,7 +37,6 @@ class InfiniteScrollTabView extends StatelessWidget {
     this.forceFixedTabWidth = false,
     this.fixedTabWidthFraction = 0.5,
     this.physics = const PageScrollPhysics(),
-    this.stackedContent,
   }) : super(key: key);
 
   /// A length of tabs and pages.
@@ -57,6 +57,11 @@ class InfiniteScrollTabView extends StatelessWidget {
   /// `isSelected` is the state that indicates whether the tab is selected or not.
   final SelectIndexedTextBuilder tabBuilder;
 
+  /// [tabBuilder] で表示されるタブラベルに [Stack] で重ねて表示するウィジェット。
+  ///
+  /// 典型的には [Positioned] を使って、タブの上にバッジを表示するなどの目的で使用する。
+  final SelectIndexedWidgetBuilder? stackedContentOnTabBuilder;
+
   /// A callback for build page contents that can scroll infinitely.
   ///
   /// See: [SelectIndexedWidgetBuilder]
@@ -135,11 +140,6 @@ class InfiniteScrollTabView extends StatelessWidget {
 
   final ScrollPhysics physics;
 
-  /// タブラベルに [Stack] で重ねて表示するウィジェット。
-  ///
-  /// 典型的には [Positioned] を使って、タブの上にバッジを表示するなどの目的で使用する。
-  final Widget? stackedContent;
-
   @override
   Widget build(BuildContext context) {
     if (indicatorHeight != null) {
@@ -150,6 +150,7 @@ class InfiniteScrollTabView extends StatelessWidget {
       size: MediaQuery.of(context).size,
       contentLength: contentLength,
       tabBuilder: tabBuilder,
+      stackedContentOnTabBuilder: stackedContentOnTabBuilder,
       pageBuilder: pageBuilder,
       onTabTap: onTabTap,
       separator: separator,
@@ -166,7 +167,6 @@ class InfiniteScrollTabView extends StatelessWidget {
       forceFixedTabWidth: forceFixedTabWidth,
       fixedTabWidthFraction: fixedTabWidthFraction,
       physics: physics,
-      stackedContent: stackedContent,
     );
   }
 }
diff --git a/lib/src/inner_infinite_scroll_tab_view.dart b/lib/src/inner_infinite_scroll_tab_view.dart
@@ -15,6 +15,7 @@ class InnerInfiniteScrollTabView extends StatefulWidget {
     required this.size,
     required this.contentLength,
     required this.tabBuilder,
+    required this.stackedContentOnTabBuilder,
     required this.pageBuilder,
     this.onTabTap,
     this.separator,
@@ -30,13 +31,18 @@ class InnerInfiniteScrollTabView extends StatefulWidget {
     required this.tabPadding,
     required this.forceFixedTabWidth,
     required this.fixedTabWidthFraction,
-    this.stackedContent,
     this.physics = const PageScrollPhysics(),
   }) : super(key: key);
 
   final Size size;
   final int contentLength;
   final SelectIndexedTextBuilder tabBuilder;
+
+  /// [_TabContent] のタブラベル部分に [Stack] で重ねて表示するウィジェット。
+  ///
+  /// 典型的には [Positioned] を使って、タブの上にバッジを表示するなどの目的で使用する。
+  final SelectIndexedWidgetBuilder? stackedContentOnTabBuilder;
+
   final SelectIndexedWidgetBuilder pageBuilder;
   final IndexedTapCallback? onTabTap;
   final BorderSide? separator;
@@ -54,11 +60,6 @@ class InnerInfiniteScrollTabView extends StatefulWidget {
   final double fixedTabWidthFraction;
   final ScrollPhysics physics;
 
-  /// [_TabContent] に [Stack] で重ねて表示するウィジェット。
-  ///
-  /// 典型的には [Positioned] を使って、タブの上にバッジを表示するなどの目的で使用する。
-  final Widget? stackedContent;
-
   @override
   InnerInfiniteScrollTabViewState createState() =>
       InnerInfiniteScrollTabViewState();
@@ -372,24 +373,20 @@ class InnerInfiniteScrollTabViewState extends State<InnerInfiniteScrollTabView>
               valueListenable: _selectedIndex,
               builder: (context, index, _) => ValueListenableBuilder<bool>(
                 valueListenable: _isTabPositionAligned,
-                builder: (context, tab, _) => Stack(
-                  children: [
-                    _TabContent(
-                      isTabPositionAligned: tab,
-                      selectedIndex: index,
-                      indicatorColor: widget.indicatorColor,
-                      tabPadding: widget.tabPadding,
-                      modIndex: modIndex,
-                      tabBuilder: widget.tabBuilder,
-                      separator: widget.separator,
-                      tabWidth: widget.forceFixedTabWidth
-                          ? _fixedTabWidth
-                          : _tabTextSizes[modIndex],
-                      indicatorHeight: indicatorHeight,
-                      indicatorWidth: _tabTextSizes[modIndex],
-                    ),
-                    if (widget.stackedContent != null) widget.stackedContent!,
-                  ],
+                builder: (context, tab, _) => _TabContent(
+                  isTabPositionAligned: tab,
+                  selectedIndex: index,
+                  indicatorColor: widget.indicatorColor,
+                  tabPadding: widget.tabPadding,
+                  modIndex: modIndex,
+                  tabBuilder: widget.tabBuilder,
+                  stackedContentOnTabBuilder: widget.stackedContentOnTabBuilder,
+                  separator: widget.separator,
+                  tabWidth: widget.forceFixedTabWidth
+                      ? _fixedTabWidth
+                      : _tabTextSizes[modIndex],
+                  indicatorHeight: indicatorHeight,
+                  indicatorWidth: _tabTextSizes[modIndex],
                 ),
               ),
             ),
@@ -435,6 +432,7 @@ class _TabContent extends StatelessWidget {
     required this.tabPadding,
     required this.indicatorColor,
     required this.tabBuilder,
+    required this.stackedContentOnTabBuilder,
     this.separator,
     required this.indicatorHeight,
     required this.indicatorWidth,
@@ -447,6 +445,7 @@ class _TabContent extends StatelessWidget {
   final double tabPadding;
   final Color indicatorColor;
   final SelectIndexedTextBuilder tabBuilder;
+  final SelectIndexedWidgetBuilder? stackedContentOnTabBuilder;
   final BorderSide? separator;
   final double indicatorHeight;
   final double indicatorWidth;
@@ -485,7 +484,10 @@ class _TabContent extends StatelessWidget {
                 ),
               ),
             ),
-          )
+          ),
+        if (stackedContentOnTabBuilder != null)
+          stackedContentOnTabBuilder!(
+              context, modIndex, selectedIndex == modIndex),
       ],
     );
   }