I'm building a news app(wordpress as a backend) that has 15 tabs(categories) in ExtendedTabBarView and when I set cache_extent=15, swiping(sliding with finger) between tabs is very smooth but the scrolling is laggy(probably due to high memory usage because it has to preload and cache 15 tabs with 10 post per tab), BUT when I set cache_extent=2, app works fine but swiping between tabs is laggy at the end of animation(transition), while when I TAP on single tab transition between tabs is always smooth, both on cache_extent 2 and 15. What can be the issue with this, I'm not saying thats your plugin a problem, but I need help, I'm struggling with this whole week. :D :D

If you need code sample or anything, just ask I will respond immediately. Keep up the good work. (:

提供的Demo是三级Tab的，滚动切换是正常的，这是同一children仅有一个孩子有多个分页。 但是，当同一children的孩子同时有多个分页就会在最后位置卡住，滚动切换不到另一级页面。 不知道是不是真正存在这个问题？

如下是正常的:

1 TAB0
1.1 - TAB00
 1.1.1 - - TAB000
 1.1.2 - - TAB001
1.2 - TAB01
2 TAB1

如下是会卡住的:

1 TAB0
1.1 - TAB00
1.1.1 - - TAB000
1.1.2 - - TAB001
1.2 - TAB01
1.2.1 - - TAB010
1.2.2 - - TAB011
2 TAB1

There is some existed issue in TabBarView about the height. see https://github.com/flutter/flutter/issues/55464, https://github.com/flutter/flutter/issues/54968. Can we fix this in ExtendedTabBarView?

I'm trying to apply BouncingScrollPhysics when moving through the tabs but ClampingScrollPhysics is applied instead.

flutter doctor -v [√] Flutter (Channel stable, 1.22.5, on Microsoft Windows [versão 10.0.19041.746], locale pt-BR) • Flutter version 1.22.5 at C:\src\flutter • Framework revision 7891006299 (6 weeks ago), 2020-12-10 11:54:40 -0800 • Engine revision ae90085a84 • Dart version 2.10.4

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.0-rc4) • Android SDK at C:\Users\HTCF\AppData\Local\Android\sdk • Platform android-30, build-tools 30.0.0-rc4 • ANDROID_HOME = C:\Users\HTCF\AppData\Local\Android\sdk • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01) • All Android licenses accepted.

[√] Android Studio (version 4.0) • Android Studio at C:\Program Files\Android\Android Studio • Flutter plugin version 47.1.2 • Dart plugin version 193.7361 • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] IntelliJ IDEA Community Edition (version 2019.3) • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2019.3.2 • Flutter plugin version 45.1.2 • Dart plugin version 193.7547

[√] VS Code (version 1.52.1) • VS Code at C:\Users\HTCF\AppData\Local\Programs\Microsoft VS Code • Flutter extension version 3.18.1

[√] Connected device (1 available) • Moto G Play (mobile) • 0026091935 • android-arm • Android 7.1.1 (API 25)

• No issues found!

  /// The height of the [Tab].
  ///
  /// If null, the height will be calculated based on the content of the [Tab].  When `icon` is not
  /// null along with `child` or `text`, the default height is 72.0 pixels. Without an `icon`, the
  /// height is 46.0 pixels.
  final double? height;

看到就可以close了（手动狗头）

Hello,

I have 4 tabs in my module, i want to open a tab by default based on a user variable. If user is admin i want to open firstly on the last tab,...

How can i do that?

Thank you

在英语环境没问题，啊语环境有问题，看了一下源码，应该是_handleAncestorOrChild里面处理手势方向有问题，没有兼容啊语的手势方向 /// 这里的判断有问题 if ((delta < 0 && _position!.extentAfter == 0 && state!._position!.extentAfter != 0) || (delta > 0 && _position!.extentBefore == 0 && state!._position!.extentBefore != 0))

运行环境

Flutter: 2.5.0 extended_tabs: 2.3.0

问题描述

主要的问题是 indicator 并没有按照指定的 indicatorSize 参数生效，还有 mainAxisAlignment 在不为 null 的情况下 indicator 也会有问题，详细看下方的测试部分。

测试

import 'package:flutter/material.dart';

import 'package:extended_tabs/extended_tabs.dart';

class ExtendedTabPage extends StatefulWidget {
  const ExtendedTabPage({Key? key}) : super(key: key);

  @override
  State<ExtendedTabPage> createState() => _ExtendedTabPageState();
}

class _ExtendedTabPageState extends State<ExtendedTabPage> with SingleTickerProviderStateMixin {

  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 测试参数
    var textDirection = TextDirection.ltr;
    var isScrollable = false;
    var labelPadding = EdgeInsets.symmetric(horizontal: 16);
    var indicatorSize = TabBarIndicatorSize.label;
    var mainAxisAlignment = null;

    // 固定参数
    final indicator = BoxDecoration(
      borderRadius: BorderRadius.circular(26),
      color: Colors.blue,
    );
    final labelColor = Colors.black;
    final unselectedLabelColor = Colors.black54;
    final labelStyle = TextStyle(fontSize: 14, fontWeight: FontWeight.bold);
    final unselectedLabelStyle = TextStyle(fontSize: 14);

    return Scaffold(
      appBar: AppBar(
        title: const Text('Extended Tab Page'),
      ),
      body: Directionality(
        textDirection: textDirection,
        child: Column(
          children: [
            TabBar(
              controller: _tabController,
              isScrollable: isScrollable,
              labelPadding: labelPadding,
              indicatorSize: indicatorSize,
              indicator: indicator,
              labelColor: labelColor,
              unselectedLabelColor: unselectedLabelColor,
              labelStyle: labelStyle,
              unselectedLabelStyle: unselectedLabelStyle,
              tabs: const [
                Tab(text: 'F Tab 1'),
                Tab(text: 'F Tab 2'),
                Tab(text: 'F Tab 3'),
              ],
            ),
            Container(height: 16, color: Colors.black12,),
            ExtendedTabBar(
              controller: _tabController,
              isScrollable: isScrollable,
              labelPadding: labelPadding,
              indicatorSize: indicatorSize,
              indicator: indicator,
              labelColor: labelColor,
              unselectedLabelColor: unselectedLabelColor,
              labelStyle: labelStyle,
              unselectedLabelStyle: unselectedLabelStyle,
              mainAxisAlignment: mainAxisAlignment,
              tabs: const [
                Tab(text: 'E Tab 1'),
                Tab(text: 'E Tab 2'),
                Tab(text: 'E Tab 3'),
              ],
            ),

            Expanded(
              child: ExtendedTabBarView(
                controller: _tabController,
                children: [
                  for (var i = 1; i <= 3; i++)
                    buildPage(i, textDirection, isScrollable, labelPadding, indicatorSize, mainAxisAlignment),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildPage(
    int id,
    TextDirection textDirection,
    bool isScrollable,
    EdgeInsetsGeometry? labelPadding,
    TabBarIndicatorSize indicatorSize,
    MainAxisAlignment? mainAxisAlignment,
  ) {
    return Container(
      color: Colors.black12,
      alignment: Alignment.center,
      child: Text(
        'Page $id\n\n'
        'textDirection:               $textDirection\n'
        'labelPadding:               $labelPadding\n'
        'isScrollable:                 $isScrollable\n'
        'indicatorSize:              $indicatorSize\n'
        'mainAxisAlignment:   $mainAxisAlignment',
      ),
    );
  }
}

其他

问题应该是出在 _IndicatorPainter 里的 indicatorRect方法，看起来是为了适配 mainAxisAlignment，看 mainAxisAlignment 的注释，应该只会影响 isScrollable = false 时的样式，但是在上述的一些情况下会造成负面效果。

当存在有tab0，tab1，tab2，tab3，四个tab时： 从tab0->tab3时，调用为： tab3.initState tab0.dispose 然后从tab3->tab1时，调用为： tab2.initState tab2.dispose tab1.initState tab3.dispose 这里有办法不然他调用到tab2的initState和dispose方法吗？

By set cacheExtent to null, the error occurred when swiping between tab.

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following NoSuchMethodError was thrown during performLayout():
The method '_greaterThanFromInteger' was called on null.
Receiver: null
Tried calling: _greaterThanFromInteger(2)

User-created ancestor of the error-causing widget was: 
  ExtendedTabBarView file:///Users/alex/Documents/OpenJMU/lib/pages/home/AppsPage.dart:203:20
When the exception was thrown, this was the stack: 
#0      Object.noSuchMethod (dart:core-patch/object_patch.dart:51:5)
#1      int.> (dart:core-patch/integers.dart:101:18)
#2      RenderSliverFixedExtentBoxAdaptor._calculateTrailingGarbage (package:flutter/src/rendering/sliver_fixed_extent_list.dart:158:45)
#3      RenderSliverFixedExtentBoxAdaptor.performLayout (package:flutter/src/rendering/sliver_fixed_extent_list.dart:189:35)
#4      RenderObject.layout (package:flutter/src/rendering/object.dart:1701:7)

As cacheExtent provide null setter to make all pages cached, the code didn't handle null properly, as the code goes: https://github.com/fluttercandies/extended_tabs/blob/2be7c5212b14222daf3ab3af72b132287c916b82/lib/src/page_view.dart#L222 null value will failed at here and the code will never goes to else. But after added widget.cacheExtent != null, it will goes wrong with Infinity or NaN toInt with the value set to double.infinity, so it needs some further handle.