Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-07-08 10:44:15 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor: animate bottom sheet (#19655)

Browse Source 
* refactor: animate bottom sheet

* rebase on main

---------

Co-authored-by: shenlong-tanwen <139912620+shalong-tanwen@users.noreply.github.com>
This commit is contained in:
shenlong 2025-07-01 08:53:38 +05:30 committed by GitHub
parent a3d588f6bd
commit a5c431fbf5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 96 additions and 71 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
View File

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

164
mobile/lib/presentation/widgets/timeline/timeline.widget.dart
View File

@ -43,15 +43,26 @@ class Timeline extends StatelessWidget {
} }
} }
class _SliverTimeline extends StatefulWidget { class _SliverTimeline extends ConsumerStatefulWidget {
const _SliverTimeline(); const _SliverTimeline();
@override @override
State createState() => _SliverTimelineState(); ConsumerState createState() => _SliverTimelineState();
} }
class _SliverTimelineState extends State<_SliverTimeline> { class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
final _scrollController = ScrollController(); final _scrollController = ScrollController();
PersistentBottomSheetController? _bottomSheetController;
bool _isMultiSelectEnabled = false;
@override
void initState() {
super.initState();
ref.listenManual(
multiSelectProvider.select((s) => s.isEnabled),
_onMultiSelectChanged,
);
}
@override @override
void dispose() { void dispose() {
@ -59,80 +70,93 @@ class _SliverTimelineState extends State<_SliverTimeline> {
super.dispose(); 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 @override
Widget build(BuildContext _) { Widget build(BuildContext _) {
return Consumer( final asyncSegments = ref.watch(timelineSegmentProvider);
builder: (context, ref, child) { final maxHeight =
final asyncSegments = ref.watch(timelineSegmentProvider); ref.watch(timelineArgsProvider.select((args) => args.maxHeight));
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( return asyncSegments.widgetWhen(
controller: _scrollController, onData: (segments) {
child: Stack( final childCount = (segments.lastOrNull?.lastIndex ?? -1) + 1;
children: [ final statusBarHeight = context.padding.top;
Scrubber( final totalAppBarHeight = statusBarHeight + kToolbarHeight;
layoutSegments: segments, const scrubberBottomPadding = 100.0;
timelineHeight: maxHeight,
topPadding: totalAppBarHeight + 10, return PrimaryScrollController(
bottomPadding: controller: _scrollController,
context.padding.bottom + scrubberBottomPadding, child: Stack(
child: CustomScrollView( children: [
primary: true, Scrubber(
cacheExtent: maxHeight * 2, layoutSegments: segments,
slivers: [ timelineHeight: maxHeight,
SliverAnimatedOpacity( topPadding: totalAppBarHeight + 10,
duration: Durations.medium1, bottomPadding: context.padding.bottom + scrubberBottomPadding,
opacity: isMultiSelectEnabled ? 0 : 1, child: CustomScrollView(
sliver: const ImmichSliverAppBar( primary: true,
floating: true, cacheExtent: maxHeight * 2,
pinned: false, slivers: [
snap: false, SliverAnimatedOpacity(
), duration: Durations.medium1,
), opacity: _isMultiSelectEnabled ? 0 : 1,
_SliverSegmentedList( sliver: const ImmichSliverAppBar(
segments: segments, floating: true,
delegate: SliverChildBuilderDelegate( pinned: false,
(ctx, index) { snap: false,
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,
),
),
],
), ),
), _SliverSegmentedList(
if (isMultiSelectEnabled) ...[ segments: segments,
const Positioned( delegate: SliverChildBuilderDelegate(
top: 60, (ctx, index) {
left: 25, if (index >= childCount) return null;
child: _MultiSelectStatusButton(), 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,
),
), ),
const HomeBottomAppBar(),
], ],
], ),
), ),
); if (_isMultiSelectEnabled)
}, const Positioned(
top: 60,
left: 25,
child: _MultiSelectStatusButton(),
),
],
),
); );
}, },
); );