sascha
/
immich
mirror of https://github.com/immich-app/immich.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: animate bottom sheet (#19655) 

* refactor: animate bottom sheet

* rebase on main

---------

Co-authored-by: shenlong-tanwen <139912620+shalong-tanwen@users.noreply.github.com>
pull/19656/head
shenlong 2025-07-01 08:53:38 +07:00 committed by GitHub
parent a3d588f6bd
commit a5c431fbf5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 97 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
mobile/lib/presentation/widgets/bottom_app_bar/home_bottom_app_bar.widget.dart
Unescape Escape View File

@ -31,8 +31,9 @@ class HomeBottomAppBar extends ConsumerWidget {
return BaseBottomSheet(
initialChildSize: 0.25,
minChildSize: 0.22,
expand: false,
actions: [
const ShareActionButton(),
if (multiselect.isEnabled) const ShareActionButton(),
if (multiselect.hasRemote) ...[
const ShareLinkActionButton(source: ActionSource.timeline),
const ArchiveActionButton(source: ActionSource.timeline),

166
mobile/lib/presentation/widgets/timeline/timeline.widget.dart
Unescape Escape View File

@ -43,15 +43,26 @@ class Timeline extends StatelessWidget {
}
}
class _SliverTimeline extends StatefulWidget {
class _SliverTimeline extends ConsumerStatefulWidget {
const _SliverTimeline();
@override
State createState() => _SliverTimelineState();
ConsumerState createState() => _SliverTimelineState();
}
class _SliverTimelineState extends State<_SliverTimeline> {
class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
final _scrollController = ScrollController();
PersistentBottomSheetController? _bottomSheetController;
bool _isMultiSelectEnabled = false;
@override
void initState() {
super.initState();
ref.listenManual(
multiSelectProvider.select((s) => s.isEnabled),
_onMultiSelectChanged,
);
}
@override
void dispose() {
@ -59,80 +70,93 @@ class _SliverTimelineState extends State<_SliverTimeline> {
super.dispose();
}
void _onMultiSelectChanged(bool? previous, bool current) {
if (context.mounted && current != _isMultiSelectEnabled) {
setState(() {
_isMultiSelectEnabled = current;
if (current) {
_bottomSheetController = showBottomSheet(
context: context,
builder: (_) => const HomeBottomAppBar(),
);
_bottomSheetController?.closed.then((_) {
_bottomSheetController = null;
// Reset the multi-select state when the bottom sheet is closed
ref.read(multiSelectProvider.notifier).reset();
});
} else {
_bottomSheetController?.close();
}
});
}
}
@override
Widget build(BuildContext _) {
return Consumer(
builder: (context, ref, child) {
final asyncSegments = ref.watch(timelineSegmentProvider);
final maxHeight =
ref.watch(timelineArgsProvider.select((args) => args.maxHeight));
final isMultiSelectEnabled =
ref.watch(multiSelectProvider.select((s) => s.isEnabled));
return asyncSegments.widgetWhen(
onData: (segments) {
final childCount = (segments.lastOrNull?.lastIndex ?? -1) + 1;
final statusBarHeight = context.padding.top;
final totalAppBarHeight = statusBarHeight + kToolbarHeight;
const scrubberBottomPadding = 100.0;
return PrimaryScrollController(
controller: _scrollController,
child: Stack(
children: [
Scrubber(
layoutSegments: segments,
timelineHeight: maxHeight,
topPadding: totalAppBarHeight + 10,
bottomPadding:
context.padding.bottom + scrubberBottomPadding,
child: CustomScrollView(
primary: true,
cacheExtent: maxHeight * 2,
slivers: [
SliverAnimatedOpacity(
duration: Durations.medium1,
opacity: isMultiSelectEnabled ? 0 : 1,
sliver: const ImmichSliverAppBar(
floating: true,
pinned: false,
snap: false,
),
),
_SliverSegmentedList(
segments: segments,
delegate: SliverChildBuilderDelegate(
(ctx, index) {
if (index >= childCount) return null;
final segment = segments.findByIndex(index);
return segment?.builder(ctx, index) ??
const SizedBox.shrink();
},
childCount: childCount,
addAutomaticKeepAlives: false,
// We add repaint boundary around tiles, so skip the auto boundaries
addRepaintBoundaries: false,
),
),
const SliverPadding(
padding: EdgeInsets.only(
bottom: scrubberBottomPadding,
),
),
],
final asyncSegments = ref.watch(timelineSegmentProvider);
final maxHeight =
ref.watch(timelineArgsProvider.select((args) => args.maxHeight));
return asyncSegments.widgetWhen(
onData: (segments) {
final childCount = (segments.lastOrNull?.lastIndex ?? -1) + 1;
final statusBarHeight = context.padding.top;
final totalAppBarHeight = statusBarHeight + kToolbarHeight;
const scrubberBottomPadding = 100.0;
return PrimaryScrollController(
controller: _scrollController,
child: Stack(
children: [
Scrubber(
layoutSegments: segments,
timelineHeight: maxHeight,
topPadding: totalAppBarHeight + 10,
bottomPadding: context.padding.bottom + scrubberBottomPadding,
child: CustomScrollView(
primary: true,
cacheExtent: maxHeight * 2,
slivers: [
SliverAnimatedOpacity(
duration: Durations.medium1,
opacity: _isMultiSelectEnabled ? 0 : 1,
sliver: const ImmichSliverAppBar(
floating: true,
pinned: false,
snap: false,
),
),
_SliverSegmentedList(
segments: segments,
delegate: SliverChildBuilderDelegate(
(ctx, index) {
if (index >= childCount) return null;
final segment = segments.findByIndex(index);
return segment?.builder(ctx, index) ??
const SizedBox.shrink();
},
childCount: childCount,
addAutomaticKeepAlives: false,
// We add repaint boundary around tiles, so skip the auto boundaries
addRepaintBoundaries: false,
),
),
),
if (isMultiSelectEnabled) ...[
const Positioned(
top: 60,
left: 25,
child: _MultiSelectStatusButton(),
const SliverPadding(
padding: EdgeInsets.only(
bottom: scrubberBottomPadding,
),
),
const HomeBottomAppBar(),
],
],
),
),
);
},
if (_isMultiSelectEnabled)
const Positioned(
top: 60,
left: 25,
child: _MultiSelectStatusButton(),
),
],
),
);
},
);