use fading scroll for tabs (validate performance)

This commit is contained in:
Fabian Freund
2025-07-20 00:40:19 +02:00
parent fd684c2df7
commit 817bbdda1f
@@ -1,6 +1,7 @@
import 'dart:async'; import 'dart:async';
import 'dart:math' as math; import 'dart:math' as math;
import 'package:fading_scroll/fading_scroll.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_material_design_icons/flutter_material_design_icons.dart'; import 'package:flutter_material_design_icons/flutter_material_design_icons.dart';
@@ -192,7 +193,7 @@ class _TabSheetHeader extends HookConsumerWidget {
), ),
if (!treeViewEnabled) if (!treeViewEnabled)
Padding( Padding(
padding: const EdgeInsets.only(left: 8.0, top: 12), padding: const EdgeInsets.only(top: 12),
child: Consumer( child: Consumer(
builder: (context, ref, child) { builder: (context, ref, child) {
final selectedContainer = ref.watch( final selectedContainer = ref.watch(
@@ -389,75 +390,86 @@ class ViewTabsSheetWidget extends HookConsumerWidget {
return Padding( return Padding(
padding: const EdgeInsets.symmetric(horizontal: 4.0), padding: const EdgeInsets.symmetric(horizontal: 4.0),
child: ReorderableBuilder.builder( child: FadingScroll(
//Rebuild when cross axis count changes fadingSize: 10,
key: ValueKey(crossAxisCount), controller: sheetScrollController,
scrollController: sheetScrollController, builder: (context, controller) {
itemCount: tabs.length, return ReorderableBuilder.builder(
onDragStarted: (index) { //Rebuild when cross axis count changes
ref.read(willAcceptDropProvider.notifier).clear(); key: ValueKey(crossAxisCount),
}, scrollController: controller,
onReorderPositions: (positions) async {
assert(
positions.length == 1,
'Not ready for multiple reorders',
);
final oldIndex = positions.first.oldIndex;
final newIndex = positions.first.newIndex;
final containerRepository = ref.read(
containerRepositoryProvider.notifier,
);
final tabId = filteredTabEntities.value[oldIndex].tabId;
final containerId = await ref
.read(tabDataRepositoryProvider.notifier)
.containerTabId(tabId);
final String key;
if (newIndex <= 0) {
key = await containerRepository.getLeadingOrderKey(
containerId,
);
} else if (newIndex >=
filteredTabEntities.value.length - 1) {
key = await containerRepository.getTrailingOrderKey(
containerId,
);
} else {
if (newIndex < oldIndex) {
key = await containerRepository.getOrderKeyAfterTab(
filteredTabEntities.value[newIndex - 1].tabId,
containerId,
);
} else {
key = await containerRepository
.getOrderKeyBeforeTab(
filteredTabEntities.value[newIndex + 1].tabId,
containerId,
);
}
}
await ref
.read(tabDataRepositoryProvider.notifier)
.assignOrderKey(tabId, key);
},
childBuilder: (itemBuilder) {
return GridView.builder(
key: gridViewKey,
controller: sheetScrollController,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
//Sync values for itemHeight calculation _calculateItemHeight
childAspectRatio: 0.75,
mainAxisSpacing: 8.0,
crossAxisSpacing: 8.0,
crossAxisCount: crossAxisCount,
),
itemCount: tabs.length, itemCount: tabs.length,
itemBuilder: (context, index) => onDragStarted: (index) {
itemBuilder(tabs[index], index), ref.read(willAcceptDropProvider.notifier).clear();
},
onReorderPositions: (positions) async {
assert(
positions.length == 1,
'Not ready for multiple reorders',
);
final oldIndex = positions.first.oldIndex;
final newIndex = positions.first.newIndex;
final containerRepository = ref.read(
containerRepositoryProvider.notifier,
);
final tabId =
filteredTabEntities.value[oldIndex].tabId;
final containerId = await ref
.read(tabDataRepositoryProvider.notifier)
.containerTabId(tabId);
final String key;
if (newIndex <= 0) {
key = await containerRepository
.getLeadingOrderKey(containerId);
} else if (newIndex >=
filteredTabEntities.value.length - 1) {
key = await containerRepository
.getTrailingOrderKey(containerId);
} else {
if (newIndex < oldIndex) {
key = await containerRepository
.getOrderKeyAfterTab(
filteredTabEntities
.value[newIndex - 1]
.tabId,
containerId,
);
} else {
key = await containerRepository
.getOrderKeyBeforeTab(
filteredTabEntities
.value[newIndex + 1]
.tabId,
containerId,
);
}
}
await ref
.read(tabDataRepositoryProvider.notifier)
.assignOrderKey(tabId, key);
},
childBuilder: (itemBuilder) {
return GridView.builder(
key: gridViewKey,
controller: controller,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
//Sync values for itemHeight calculation _calculateItemHeight
childAspectRatio: 0.75,
mainAxisSpacing: 8.0,
crossAxisSpacing: 8.0,
crossAxisCount: crossAxisCount,
),
itemCount: tabs.length,
itemBuilder: (context, index) =>
itemBuilder(tabs[index], index),
);
},
); );
}, },
), ),