cjones/immich
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: asset grid

Browse Source
This commit is contained in:
shenlong-tanwen
2024-09-14 22:29:51 +05:30
parent 53974e7276
commit 6fce1ebb79
23 changed files with 796 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mobile-v2/lib/presentation/components/grid/immich_asset_grid.widget.dart
+106 -55
View File
@@ -1,73 +1,124 @@
import 'package:flutter/material.dart';
import 'package:immich_mobile/domain/interfaces/asset.interface.dart';
import 'package:flutter_bloc/flutter_bloc.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/presentation/components/grid/draggable_scrollbar.dart';
import 'package:immich_mobile/presentation/components/grid/immich_asset_grid.state.dart';
import 'package:immich_mobile/presentation/components/image/immich_image.widget.dart';
import 'package:immich_mobile/service_locator.dart';
import 'package:immich_mobile/utils/extensions/async_snapshot.extension.dart';
import 'package:immich_mobile/utils/extensions/build_context.extension.dart';
import 'package:immich_mobile/utils/extensions/color.extension.dart';
import 'package:intl/intl.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_grid_asset_placeholder.widget.dart';
class ImAssetGrid extends StatelessWidget {
class ImAssetGrid extends StatefulWidget {
const ImAssetGrid({super.key});
@override
Widget build(BuildContext context) {
return StreamBuilder(
stream: di<IAssetRepository>().getRenderList(),
builder: (_, renderSnap) {
final renderList = renderSnap.data;
if (renderList == null) {
return const SizedBox.shrink();
}
State createState() => _ImAssetGridState();
}
final elements = renderList.elements;
return ScrollablePositionedList.builder(
itemCount: elements.length,
addAutomaticKeepAlives: false,
minCacheExtent: 100,
itemBuilder: (_, sectionIndex) {
final section = elements[sectionIndex];
class _ImAssetGridState extends State<ImAssetGrid> {
bool _isDragScrolling = false;
final ItemScrollController _itemScrollController = ItemScrollController();
final ItemPositionsListener _itemPositionsListener =
ItemPositionsListener.create();
return switch (section) {
RenderListMonthHeaderElement() =>
_MonthHeader(text: section.header),
RenderListDayHeaderElement() => Text(section.header),
RenderListAssetElement() => FutureBuilder(
future: renderList.loadAssets(
section.assetOffset,
section.assetCount,
),
builder: (_, assetsSnap) {
final assets = assetsSnap.data;
return GridView.builder(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
addAutomaticKeepAlives: false,
cacheExtent: 100,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
),
itemBuilder: (_, i) {
return SizedBox.square(
dimension: 200,
child: assetsSnap.isWaiting || assets == null
? Container(color: Colors.grey)
// ignore: avoid-unsafe-collection-methods
: ImImage(assets[i]),
);
},
itemCount: section.assetCount,
);
},
),
};
},
);
},
void _onDragScrolling(bool isScrolling) {
if (_isDragScrolling != isScrolling) {
setState(() {
_isDragScrolling = isScrolling;
});
}
}
Text? _labelBuilder(List<RenderListElement> elements, int currentPosition) {
final element = elements.elementAtOrNull(currentPosition);
if (element == null) {
return null;
}
return Text(
DateFormat.yMMMM().format(element.date),
style: TextStyle(
color: context.colorScheme.onSurface,
fontWeight: FontWeight.bold,
),
);
}
@override
Widget build(BuildContext context) =>
BlocBuilder<ImmichAssetGridCubit, RenderList>(
builder: (_, renderList) {
final elements = renderList.elements;
final grid = ScrollablePositionedList.builder(
itemCount: elements.length,
addAutomaticKeepAlives: false,
minCacheExtent: 100,
itemPositionsListener: _itemPositionsListener,
itemScrollController: _itemScrollController,
itemBuilder: (_, sectionIndex) {
final section = elements[sectionIndex];
return switch (section) {
RenderListMonthHeaderElement() =>
_MonthHeader(text: section.header),
RenderListDayHeaderElement() => Text(section.header),
RenderListAssetElement() => FutureBuilder(
future: context.read<ImmichAssetGridCubit>().loadAssets(
section.assetOffset,
section.assetCount,
),
builder: (_, assetsSnap) {
final assets = assetsSnap.data;
return GridView.builder(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
addAutomaticKeepAlives: false,
cacheExtent: 100,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
mainAxisSpacing: 3,
crossAxisSpacing: 3,
),
itemBuilder: (_, i) {
final asset = assetsSnap.isWaiting || assets == null
? null
: assets.elementAtOrNull(i);
return SizedBox.square(
dimension: 200,
// Show Placeholder when drag scrolled
child: asset == null || _isDragScrolling
? const _ImImagePlaceholder()
: ImImage(asset),
);
},
itemCount: section.assetCount,
);
},
),
};
},
);
return DraggableScrollbar(
foregroundColor: context.colorScheme.onSurface,
backgroundColor: context.colorScheme.surfaceContainerHighest,
scrollStateListener: _onDragScrolling,
itemPositionsListener: _itemPositionsListener,
controller: _itemScrollController,
labelTextBuilder: (int position) =>
_labelBuilder(elements, position),
labelConstraints: const BoxConstraints(maxHeight: 36),
scrollbarAnimationDuration: const Duration(milliseconds: 300),
scrollbarTimeToFade: const Duration(milliseconds: 1000),
child: grid,
);
},
);
}