refactor: grid

This commit is contained in:
shenlong-tanwen 2024-09-22 18:12:18 +05:30
parent e810512285
commit 9f29bce308
6 changed files with 120 additions and 98 deletions

View File

@ -41,6 +41,10 @@ class RenderListDriftRepository with LogMixin implements IRenderListRepository {
]; ];
}) })
.watch() .watch()
.map((elements) => RenderList(elements: elements)); .map((elements) {
// Resets the value in closure so the watch refresh will work properly
lastAssetOffset = 0;
return RenderList(elements: elements);
});
} }
} }

View File

@ -4,7 +4,7 @@ import 'dart:async';
import 'package:flutter/foundation.dart'; import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:scrollable_positioned_list/scrollable_positioned_list.dart'; import 'package:flutter_list_view/flutter_list_view.dart';
/// Build the Scroll Thumb and label using the current configuration /// Build the Scroll Thumb and label using the current configuration
typedef ScrollThumbBuilder = Widget Function( typedef ScrollThumbBuilder = Widget Function(
@ -24,9 +24,12 @@ typedef LabelTextBuilder = Text? Function(int item);
/// for quick navigation of the BoxScrollView. /// for quick navigation of the BoxScrollView.
class DraggableScrollbar extends StatefulWidget { class DraggableScrollbar extends StatefulWidget {
/// The view that will be scrolled with the scroll thumb /// The view that will be scrolled with the scroll thumb
final ScrollablePositionedList child; final CustomScrollView child;
final ItemPositionsListener itemPositionsListener; /// Total number of children in the list
final int maxItemCount;
final FlutterListViewController controller;
/// A function that builds a thumb using the current configuration /// A function that builds a thumb using the current configuration
final ScrollThumbBuilder scrollThumbBuilder; final ScrollThumbBuilder scrollThumbBuilder;
@ -55,9 +58,6 @@ class DraggableScrollbar extends StatefulWidget {
/// Determines box constraints for Container displaying label /// Determines box constraints for Container displaying label
final BoxConstraints? labelConstraints; final BoxConstraints? labelConstraints;
/// The ScrollController for the BoxScrollView
final ItemScrollController controller;
/// Determines scrollThumb displaying. If you draw own ScrollThumb and it is true you just don't need to use animation parameters in [scrollThumbBuilder] /// Determines scrollThumb displaying. If you draw own ScrollThumb and it is true you just don't need to use animation parameters in [scrollThumbBuilder]
final bool alwaysVisibleScrollThumb; final bool alwaysVisibleScrollThumb;
@ -69,7 +69,7 @@ class DraggableScrollbar extends StatefulWidget {
this.alwaysVisibleScrollThumb = false, this.alwaysVisibleScrollThumb = false,
required this.child, required this.child,
required this.controller, required this.controller,
required this.itemPositionsListener, required this.maxItemCount,
required this.scrollStateListener, required this.scrollStateListener,
this.heightScrollThumb = 48.0, this.heightScrollThumb = 48.0,
this.backgroundColor = Colors.white, this.backgroundColor = Colors.white,
@ -217,6 +217,7 @@ class _DraggableScrollbarState extends State<DraggableScrollbar>
late AnimationController _labelAnimationController; late AnimationController _labelAnimationController;
late Animation<double> _labelAnimation; late Animation<double> _labelAnimation;
Timer? _fadeoutTimer; Timer? _fadeoutTimer;
List<FlutterListViewItemPosition> _positions = [];
@override @override
void initState() { void initState() {
@ -244,6 +245,11 @@ class _DraggableScrollbarState extends State<DraggableScrollbar>
parent: _labelAnimationController, parent: _labelAnimationController,
curve: Curves.fastOutSlowIn, curve: Curves.fastOutSlowIn,
); );
widget.controller.sliverController.onPaintItemPositionsCallback =
(height, pos) {
_positions = pos;
};
} }
@override @override
@ -300,9 +306,10 @@ class _DraggableScrollbarState extends State<DraggableScrollbar>
double get _barMaxScrollExtent => double get _barMaxScrollExtent =>
(context.size?.height ?? 0) - widget.heightScrollThumb; (context.size?.height ?? 0) - widget.heightScrollThumb;
double get _barMinScrollExtent => 0; double get _maxScrollRatio =>
_barMaxScrollExtent / widget.controller.position.maxScrollExtent;
int get maxItemCount => widget.child.itemCount; double get _barMinScrollExtent => 0;
bool _onScrollNotification(ScrollNotification notification) { bool _onScrollNotification(ScrollNotification notification) {
_changePosition(notification); _changePosition(notification);
@ -326,11 +333,7 @@ class _DraggableScrollbarState extends State<DraggableScrollbar>
setState(() { setState(() {
try { try {
if (notification is ScrollUpdateNotification) { if (notification is ScrollUpdateNotification) {
int? firstItemIndex = widget _barOffset = widget.controller.offset * _maxScrollRatio;
.itemPositionsListener.itemPositions.value.firstOrNull?.index;
if (firstItemIndex != null) {
_barOffset = (firstItemIndex / maxItemCount) * _barMaxScrollExtent;
}
_barOffset = _barOffset =
clampDouble(_barOffset, _barMinScrollExtent, _barMaxScrollExtent); clampDouble(_barOffset, _barMinScrollExtent, _barMaxScrollExtent);
@ -342,8 +345,9 @@ class _DraggableScrollbarState extends State<DraggableScrollbar>
_thumbAnimationController.forward(); _thumbAnimationController.forward();
} }
if (itemPos < maxItemCount) { final lastItemPos = itemPos;
_currentItem = itemPos; if (lastItemPos < widget.maxItemCount) {
_currentItem = lastItemPos;
} }
_fadeoutTimer?.cancel(); _fadeoutTimer?.cancel();
@ -363,26 +367,30 @@ class _DraggableScrollbarState extends State<DraggableScrollbar>
widget.scrollStateListener(true); widget.scrollStateListener(true);
} }
int get itemPos { int get itemIndex {
int numberOfItems = widget.child.itemCount; int index = 0;
return ((_barOffset / (_barMaxScrollExtent)) * numberOfItems).toInt(); double minDiff = 1000;
for (final pos in _positions) {
final diff = (_barOffset - pos.offset).abs();
if (diff < minDiff) {
minDiff = diff;
index = pos.index;
}
}
return index;
} }
int get itemPos =>
((_barOffset / (_barMaxScrollExtent)) * widget.maxItemCount).toInt();
void _jumpToBarPos() { void _jumpToBarPos() {
if (itemPos > maxItemCount - 1) { final lastItemPos = itemPos;
if (lastItemPos > widget.maxItemCount - 1) {
return; return;
} }
_currentItem = itemPos; _currentItem = itemIndex;
widget.controller.sliverController.jumpToIndex(lastItemPos);
final alignment = (_barOffset / _barMaxScrollExtent);
widget.controller.jumpTo(
index: _currentItem,
// // Align at the top or middle while scrolling, but always align at the top while
// // towards the end.
alignment: alignment > 0.95 ? 0 : clampDouble(alignment - 0.2, 0, 1),
);
} }
Timer? _dragHaltTimer; Timer? _dragHaltTimer;
@ -399,8 +407,9 @@ class _DraggableScrollbarState extends State<DraggableScrollbar>
_barOffset = _barOffset =
clampDouble(_barOffset, _barMinScrollExtent, _barMaxScrollExtent); clampDouble(_barOffset, _barMinScrollExtent, _barMaxScrollExtent);
if (itemPos != lastTimerPos) { final lastItemPos = itemPos;
lastTimerPos = itemPos; if (lastItemPos != lastTimerPos) {
lastTimerPos = lastItemPos;
_dragHaltTimer?.cancel(); _dragHaltTimer?.cancel();
widget.scrollStateListener(true); widget.scrollStateListener(true);

View File

@ -1,5 +1,6 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_list_view/flutter_list_view.dart';
import 'package:immich_mobile/domain/models/render_list.model.dart'; import 'package:immich_mobile/domain/models/render_list.model.dart';
import 'package:immich_mobile/domain/models/render_list_element.model.dart'; import 'package:immich_mobile/domain/models/render_list_element.model.dart';
import 'package:immich_mobile/presentation/components/grid/draggable_scrollbar.dart'; import 'package:immich_mobile/presentation/components/grid/draggable_scrollbar.dart';
@ -10,7 +11,6 @@ import 'package:immich_mobile/utils/extensions/build_context.extension.dart';
import 'package:immich_mobile/utils/extensions/color.extension.dart'; import 'package:immich_mobile/utils/extensions/color.extension.dart';
import 'package:intl/intl.dart'; import 'package:intl/intl.dart';
import 'package:material_symbols_icons/symbols.dart'; import 'package:material_symbols_icons/symbols.dart';
import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
part 'immich_asset_grid_header.widget.dart'; part 'immich_asset_grid_header.widget.dart';
part 'immich_grid_asset_placeholder.widget.dart'; part 'immich_grid_asset_placeholder.widget.dart';
@ -24,9 +24,13 @@ class ImAssetGrid extends StatefulWidget {
class _ImAssetGridState extends State<ImAssetGrid> { class _ImAssetGridState extends State<ImAssetGrid> {
bool _isDragScrolling = false; bool _isDragScrolling = false;
final ItemScrollController _itemScrollController = ItemScrollController(); final FlutterListViewController _controller = FlutterListViewController();
final ItemPositionsListener _itemPositionsListener =
ItemPositionsListener.create(); @override
void dispose() {
_controller.dispose();
super.dispose();
}
void _onDragScrolling(bool isScrolling) { void _onDragScrolling(bool isScrolling) {
if (_isDragScrolling != isScrolling) { if (_isDragScrolling != isScrolling) {
@ -56,62 +60,64 @@ class _ImAssetGridState extends State<ImAssetGrid> {
BlocBuilder<ImmichAssetGridCubit, RenderList>( BlocBuilder<ImmichAssetGridCubit, RenderList>(
builder: (_, renderList) { builder: (_, renderList) {
final elements = renderList.elements; final elements = renderList.elements;
final grid = ScrollablePositionedList.builder( final grid = FlutterListView(
itemCount: elements.length, controller: _controller,
addAutomaticKeepAlives: false, delegate: FlutterListViewDelegate(
minCacheExtent: 100, (_, sectionIndex) {
itemPositionsListener: _itemPositionsListener, // ignore: avoid-unsafe-collection-methods
itemScrollController: _itemScrollController, final section = elements[sectionIndex];
itemBuilder: (_, sectionIndex) {
final section = elements[sectionIndex];
return switch (section) { return switch (section) {
RenderListMonthHeaderElement() => RenderListMonthHeaderElement() =>
_MonthHeader(text: section.header), _MonthHeader(text: section.header),
RenderListDayHeaderElement() => Text(section.header), RenderListDayHeaderElement() => Text(section.header),
RenderListAssetElement() => FutureBuilder( RenderListAssetElement() => FutureBuilder(
future: context.read<ImmichAssetGridCubit>().loadAssets( future: context.read<ImmichAssetGridCubit>().loadAssets(
section.assetOffset, section.assetOffset,
section.assetCount, section.assetCount,
), ),
builder: (_, assetsSnap) { builder: (_, assetsSnap) {
final assets = assetsSnap.data; final assets = assetsSnap.data;
return GridView.builder( return GridView.builder(
physics: const NeverScrollableScrollPhysics(), physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true, shrinkWrap: true,
addAutomaticKeepAlives: false, addAutomaticKeepAlives: false,
cacheExtent: 100, cacheExtent: 100,
gridDelegate: gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount( const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4, crossAxisCount: 4,
mainAxisSpacing: 3, mainAxisSpacing: 3,
crossAxisSpacing: 3, crossAxisSpacing: 3,
), ),
itemBuilder: (_, i) { itemBuilder: (_, i) {
final asset = assetsSnap.isWaiting || assets == null final asset = assetsSnap.isWaiting || assets == null
? null ? null
: assets.elementAtOrNull(i); : assets.elementAtOrNull(i);
return SizedBox.square( return SizedBox.square(
dimension: 200, dimension: 200,
// Show Placeholder when drag scrolled // Show Placeholder when drag scrolled
child: asset == null || _isDragScrolling child: asset == null || _isDragScrolling
? const _ImImagePlaceholder() ? const _ImImagePlaceholder()
: ImImage(asset), : ImImage(asset),
); );
}, },
itemCount: section.assetCount, itemCount: section.assetCount,
); );
}, },
), ),
}; };
}, },
childCount: elements.length,
addAutomaticKeepAlives: false,
),
); );
return DraggableScrollbar( return DraggableScrollbar(
foregroundColor: context.colorScheme.onSurface, foregroundColor: context.colorScheme.onSurface,
backgroundColor: context.colorScheme.surfaceContainerHighest, backgroundColor: context.colorScheme.surfaceContainerHighest,
scrollStateListener: _onDragScrolling, scrollStateListener: _onDragScrolling,
itemPositionsListener: _itemPositionsListener, controller: _controller,
controller: _itemScrollController, maxItemCount: elements.length,
labelTextBuilder: (int position) => labelTextBuilder: (int position) =>
_labelBuilder(elements, position), _labelBuilder(elements, position),
labelConstraints: const BoxConstraints(maxHeight: 36), labelConstraints: const BoxConstraints(maxHeight: 36),

View File

@ -1,12 +1,14 @@
import 'package:get_it/get_it.dart'; import 'package:get_it/get_it.dart';
import 'package:immich_mobile/domain/interfaces/asset.interface.dart'; import 'package:immich_mobile/domain/interfaces/asset.interface.dart';
import 'package:immich_mobile/domain/interfaces/log.interface.dart'; import 'package:immich_mobile/domain/interfaces/log.interface.dart';
import 'package:immich_mobile/domain/interfaces/renderlist.interface.dart';
import 'package:immich_mobile/domain/interfaces/store.interface.dart'; import 'package:immich_mobile/domain/interfaces/store.interface.dart';
import 'package:immich_mobile/domain/interfaces/user.interface.dart'; import 'package:immich_mobile/domain/interfaces/user.interface.dart';
import 'package:immich_mobile/domain/models/user.model.dart'; import 'package:immich_mobile/domain/models/user.model.dart';
import 'package:immich_mobile/domain/repositories/asset.repository.dart'; import 'package:immich_mobile/domain/repositories/asset.repository.dart';
import 'package:immich_mobile/domain/repositories/database.repository.dart'; import 'package:immich_mobile/domain/repositories/database.repository.dart';
import 'package:immich_mobile/domain/repositories/log.repository.dart'; import 'package:immich_mobile/domain/repositories/log.repository.dart';
import 'package:immich_mobile/domain/repositories/renderlist.repository.dart';
import 'package:immich_mobile/domain/repositories/store.repository.dart'; import 'package:immich_mobile/domain/repositories/store.repository.dart';
import 'package:immich_mobile/domain/repositories/user.repository.dart'; import 'package:immich_mobile/domain/repositories/user.repository.dart';
import 'package:immich_mobile/domain/services/app_setting.service.dart'; import 'package:immich_mobile/domain/services/app_setting.service.dart';
@ -68,8 +70,9 @@ class ServiceLocator {
_registerFactory<ILogRepository>(() => LogDriftRepository(di())); _registerFactory<ILogRepository>(() => LogDriftRepository(di()));
_registerFactory<AppSettingService>(() => AppSettingService(di())); _registerFactory<AppSettingService>(() => AppSettingService(di()));
_registerFactory<IUserRepository>(() => UserDriftRepository(di())); _registerFactory<IUserRepository>(() => UserDriftRepository(di()));
_registerFactory<IAssetRepository>( _registerFactory<IAssetRepository>(() => AssetDriftRepository(di()));
() => AssetDriftRepository(di()), _registerFactory<IRenderListRepository>(
() => RenderListDriftRepository(di()),
); );
/// Services /// Services

View File

@ -403,6 +403,14 @@ packages:
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "4.0.0" version: "4.0.0"
flutter_list_view:
dependency: "direct main"
description:
name: flutter_list_view
sha256: d99dc310bb3ca9d688dae1585b38a3f56e7b06eeb085ae27a5e0f56cf52172c5
url: "https://pub.dev"
source: hosted
version: "1.1.28"
flutter_localizations: flutter_localizations:
dependency: "direct main" dependency: "direct main"
description: flutter description: flutter
@ -841,14 +849,6 @@ packages:
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "0.28.0" version: "0.28.0"
scrollable_positioned_list:
dependency: "direct main"
description:
name: scrollable_positioned_list
sha256: "1b54d5f1329a1e263269abc9e2543d90806131aa14fe7c6062a8054d57249287"
url: "https://pub.dev"
source: hosted
version: "0.3.8"
shelf: shelf:
dependency: transitive dependency: transitive
description: description:

View File

@ -49,7 +49,7 @@ dependencies:
# components # components
material_symbols_icons: ^4.2785.1 material_symbols_icons: ^4.2785.1
flutter_adaptive_scaffold: ^0.3.1 flutter_adaptive_scaffold: ^0.3.1
scrollable_positioned_list: ^0.3.8 flutter_list_view: ^1.1.28
cached_network_image: ^3.4.1 cached_network_image: ^3.4.1
flutter_cache_manager: ^3.4.1 flutter_cache_manager: ^3.4.1