diff --git a/mobile/lib/presentation/widgets/asset_viewer/activities_bottom_sheet.widget.dart b/mobile/lib/presentation/widgets/asset_viewer/activities_bottom_sheet.widget.dart index 63669495b9..3b46b69958 100644 --- a/mobile/lib/presentation/widgets/asset_viewer/activities_bottom_sheet.widget.dart +++ b/mobile/lib/presentation/widgets/asset_viewer/activities_bottom_sheet.widget.dart @@ -79,7 +79,7 @@ class ActivitiesBottomSheet extends HookConsumerWidget { expand: false, shouldCloseOnMinExtent: false, resizeOnScroll: false, - backgroundColor: context.isDarkTheme ? Colors.black : Colors.white, + backgroundColor: context.isDarkTheme ? context.colorScheme.surface : Colors.white, ); } } diff --git a/mobile/lib/presentation/widgets/asset_viewer/asset_viewer.page.dart b/mobile/lib/presentation/widgets/asset_viewer/asset_viewer.page.dart index 70eb6699aa..d992d243ee 100644 --- a/mobile/lib/presentation/widgets/asset_viewer/asset_viewer.page.dart +++ b/mobile/lib/presentation/widgets/asset_viewer/asset_viewer.page.dart @@ -97,7 +97,7 @@ class AssetViewer extends ConsumerStatefulWidget { } const double _kBottomSheetMinimumExtent = 0.4; -const double _kBottomSheetSnapExtent = 0.7; +const double _kBottomSheetSnapExtent = 0.67; class _AssetViewerState extends ConsumerState { static final _dummyListener = ImageStreamListener((image, _) => image.dispose()); @@ -399,10 +399,14 @@ class _AssetViewerState extends ConsumerState { final isDraggingDown = currentExtent < previousExtent; previousExtent = currentExtent; // Closes the bottom sheet if the user is dragging down - if (isDraggingDown && delta.extent < 0.55) { + if (isDraggingDown && delta.extent < 0.67) { if (dragInProgress) { blockGestures = true; } + // Jump to a lower position before starting close animation to prevent glitch + if (bottomSheetController.isAttached) { + bottomSheetController.jumpTo(0.67); + } sheetCloseController?.close(); } @@ -480,7 +484,7 @@ class _AssetViewerState extends ConsumerState { previousExtent = _kBottomSheetMinimumExtent; sheetCloseController = showBottomSheet( context: ctx, - sheetAnimationStyle: const AnimationStyle(duration: Durations.short4, reverseDuration: Durations.short2), + sheetAnimationStyle: const AnimationStyle(duration: Durations.medium2, reverseDuration: Durations.medium2), constraints: const BoxConstraints(maxWidth: double.infinity), shape: const RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(20.0))), backgroundColor: ctx.colorScheme.surfaceContainerLowest, @@ -688,16 +692,20 @@ class _AssetViewerState extends ConsumerState { backgroundDecoration: BoxDecoration(color: backgroundColor), enablePanAlways: true, ), + if (!showingBottomSheet) + const Positioned( + bottom: 0, + left: 0, + right: 0, + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.end, + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [AssetStackRow(), ViewerBottomBar()], + ), + ), ], ), - bottomNavigationBar: showingBottomSheet - ? const SizedBox.shrink() - : const Column( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.end, - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [AssetStackRow(), ViewerBottomBar()], - ), ), ); } diff --git a/mobile/lib/presentation/widgets/asset_viewer/bottom_sheet.widget.dart b/mobile/lib/presentation/widgets/asset_viewer/bottom_sheet.widget.dart index f0ba970b98..ed3873b510 100644 --- a/mobile/lib/presentation/widgets/asset_viewer/bottom_sheet.widget.dart +++ b/mobile/lib/presentation/widgets/asset_viewer/bottom_sheet.widget.dart @@ -52,7 +52,7 @@ class AssetDetailBottomSheet extends ConsumerWidget { expand: false, shouldCloseOnMinExtent: false, resizeOnScroll: false, - backgroundColor: context.isDarkTheme ? Colors.black : Colors.white, + backgroundColor: context.isDarkTheme ? context.colorScheme.surface : Colors.white, ); } } @@ -299,7 +299,7 @@ class _AssetDetailBottomSheet extends ConsumerWidget { // Appears in (Albums) Padding(padding: const EdgeInsets.only(top: 16.0), child: _buildAppearsInList(ref, context)), // padding at the bottom to avoid cut-off - const SizedBox(height: 100), + const SizedBox(height: 30), ], ); } diff --git a/mobile/lib/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart b/mobile/lib/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart index 2f2847543f..0d0e0259fd 100644 --- a/mobile/lib/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart +++ b/mobile/lib/presentation/widgets/bottom_sheet/base_bottom_sheet.widget.dart @@ -81,7 +81,7 @@ class _BaseDraggableScrollableSheetState extends ConsumerState child: CustomScrollView( controller: scrollController, slivers: [ - const SliverPersistentHeader(delegate: _DragHandleDelegate(), pinned: true), + const SliverToBoxAdapter(child: _DragHandle()), if (widget.actions.isNotEmpty) SliverToBoxAdapter( child: Column( @@ -108,31 +108,13 @@ class _BaseDraggableScrollableSheetState extends ConsumerState } } -class _DragHandleDelegate extends SliverPersistentHeaderDelegate { - const _DragHandleDelegate(); - - @override - Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) { - return const _DragHandle(); - } - - @override - bool shouldRebuild(_DragHandleDelegate oldDelegate) => false; - - @override - double get minExtent => 50.0; - - @override - double get maxExtent => 50.0; -} - class _DragHandle extends StatelessWidget { const _DragHandle(); @override Widget build(BuildContext context) { return SizedBox( - height: 50, + height: 38, child: Center( child: SizedBox( width: 32,