Data Rendering issues in ScrollableTabBar

[sharjeelyunus]

The ScrollableTabBar tends to freeze a lot, especially on Android. On iOS, the freeze only lasts a few seconds (mostly not noticeable), but on Android, it can sometimes freeze for over a minute, especially when there's a lot of data. This problem gets worse when you have more content in the tab bar. The whole point of using the ScrollableTabBar is to handle large amounts of data easily.

REF: https://discord.com/channels/1031982848485359626/1306327142895718401

[kmahmood74]

ScrollableTabBar is correctly implemented to load a tab only when it becomes visible. Please create an example screen that showcases the issue otherwise it is hard to debug.

[kmahmood74]

It is possible that the tabs in a scrollabletabbar are all being rendered at the same time. @sharjeelyunus please provide an example

[sharjeelyunus]

@kmahmood74 try here on Android, its actually noticeable on web as well: https://studio.ensembleui.com/app/JV3Jtf6e2yCfiYZD8R5t/screen/AI3Kl4m9vzlO4gx1mbF2

Email: [email protected]
Password: 123456

[kmahmood74]

yes I can see it on the web as well but there isn't a lot of content

[sharjeelyunus]

I added the firebase crashlytics, and these are the errors I'm getting

Fatal Exception: io.flutter.plugins.firebase.crashlytics.FlutterError: Bad state: No element. Error thrown .
at List.single(dart:core)
at ScrollController.position(scroll_controller.dart:159)
at ScrollController.offset(scroll_controller.dart:165)
at ScrollableTabBarState._updateActiveTab(scrollable_tab_bar.dart:238)
at ScrollableTabBarState.onVisibilityChanged(scrollable_tab_bar.dart:233)
at RenderVisibilityDetectorBase._fireCallback(render_visibility_detector.dart:87)
at RenderVisibilityDetectorBase._scheduleUpdate.<fn>(render_visibility_detector.dart:150)
at RenderVisibilityDetectorBase._processCallbacks(render_visibility_detector.dart:62)
at _TaskEntry.run(binding.dart:99)
at SchedulerBinding.handleEventLoopCallback(binding.dart:535)
at SchedulerBinding._runTasks(binding.dart:513)
at TickerFuture.whenCompleteOrCancel.thunk(ticker.dart:438)

[sharjeelyunus]

@snehmehta can we prioritize this? getting a lot of rendering issues, and no workaround for now

[ridsashabbir]

@snehmehta this is urgent, customer app is crashing alot, can you please fix this issue asap?

[kmahmood74]

@snehmehta

[ridsashabbir]

Just tested it with the new build, it is still crashing the app.
Crash happens if we add an item to favourite from a different screen and come back to the screen where we have to render the updated data in scrollable tabbar

PS: we are just updating a storage variable on navigating back of screen, this works on any other screen where we don’t have scrollable tabbar

CC: @kmahmood74 @sharjeelyunus @snehmehta

ScreenRecording_01-24-2025.15-40-53_1.mp4

[sharjeelyunus]

here are crashlogs

          Fatal Exception: io.flutter.plugins.firebase.crashlytics.FlutterError: RangeError (length): Invalid value: Not in inclusive range 0..3: -1. Error thrown .
       at List.[](dart:core)
       at _IndicatorPainter.centerOf(tabs.dart:506)
       at _TabBarState._tabScrollOffset(tabs.dart:1521)
       at _TabBarState._tabCenteredScrollOffset(tabs.dart:1536)
       at _TabBarState._scrollToCurrentIndex(tabs.dart:1544)
       at _TabBarState._handleTabControllerTick(tabs.dart:1579)
       at ChangeNotifier.notifyListeners(change_notifier.dart:437)
       at TabController._changeIndex(tab_controller.dart:208)
       at TabController.animateTo(tab_controller.dart:261)
       at ScrollableTabBarState._updateActiveTab(scrollable_tab_bar.dart:291)
       at ScrollableTabBarState.onVisibilityChanged(scrollable_tab_bar.dart:251)
       at RenderVisibilityDetectorBase._fireCallback(render_visibility_detector.dart:87)
       at RenderVisibilityDetectorBase._scheduleUpdate.<fn>(render_visibility_detector.dart:150)
       at RenderVisibilityDetectorBase._processCallbacks(render_visibility_detector.dart:62)
       at _TaskEntry.run(binding.dart:99)
       at SchedulerBinding.handleEventLoopCallback(binding.dart:535)
       at SchedulerBinding._runTasks(binding.dart:513)
       at TickerFuture.whenCompleteOrCancel.thunk(ticker.dart:438)
        

[TheNoumanDev]

The code looked good to me, freezing issue was bcz we are loading too much data at the same time, tried following solution on my end:

• Tried to load the tabs one by one, also in one more way that the screen visible tabs are loaded and upon scrool is trigger, it will load other tabs but that was casuiong issue to freeze teh screen even more when we scroll as shown in recording.
• Secondly i tried to use this packages and it had the same issue when i loaded the data in it, it freezed the screen for 40-50 secs.

Recording with loading tabs one by one.
https://github.com/user-attachments/assets/7c5cbdf4-9cf7-43e1-bac1-caca098d8af8