6177214e-ce7c-49e3-99de-ff9721b26f63 — Commit b3229d8c

AuthorEdmir Suljic<esu@dwarf.dk>
Date2025-05-20 11:17:25 +0200
Fixed bottom sheet to follow design

Changed files

.../lib/booking_details/booking_details_page.dart  |  2 +-
 .../components/check_out_button.dart               |  2 +-
 .../components/housekeeping_button.dart            |  7 +-
 .../components/practical_information_button.dart   | 15 ++--
 .../booking_details/components/share_button.dart   | 21 +++---
 .../lib/common/components/bottom_sheet_widget.dart | 80 ++++++++++++++--------
 .../lib/my_booking/my_booking_page.dart            |  2 +-
 comwell_key_app/pubspec.yaml                       |  1 +
 8 files changed, 77 insertions(+), 53 deletions(-)

Diff

diff --git a/comwell_key_app/lib/booking_details/booking_details_page.dart b/comwell_key_app/lib/booking_details/booking_details_page.dart
index 9161ab02..d9d409be 100644
--- a/comwell_key_app/lib/booking_details/booking_details_page.dart
+++ b/comwell_key_app/lib/booking_details/booking_details_page.dart
@@ -77,7 +77,7 @@ class BookingDetailsPage extends StatelessWidget {
else
const CheckInButton(),
const SizedBox(
- height: 220,
+ height: 100,
),
],
),
diff --git a/comwell_key_app/lib/booking_details/components/check_out_button.dart b/comwell_key_app/lib/booking_details/components/check_out_button.dart
index 7fe4c122..70bcb51f 100644
--- a/comwell_key_app/lib/booking_details/components/check_out_button.dart
+++ b/comwell_key_app/lib/booking_details/components/check_out_button.dart
@@ -18,7 +18,7 @@ class CheckOutButton extends StatelessWidget {
onTap: () {
context.pushNamed(AppRoutes.checkOut.name, extra: cubit.booking);
},
- child: Ink(
+ child: Container(
decoration: BoxDecoration(
border: Border.all(
color: colorDivider,
diff --git a/comwell_key_app/lib/booking_details/components/housekeeping_button.dart b/comwell_key_app/lib/booking_details/components/housekeeping_button.dart
index 9a003106..ba694eff 100644
--- a/comwell_key_app/lib/booking_details/components/housekeeping_button.dart
+++ b/comwell_key_app/lib/booking_details/components/housekeeping_button.dart
@@ -1,3 +1,4 @@
+import 'package:comwell_key_app/themes/light_theme.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
@@ -5,7 +6,6 @@ import 'package:flutter_svg/svg.dart';
import 'package:go_router/go_router.dart';
import '../../routing/app_routes.dart';
-import '../../themes/dark_theme.dart';
import '../bloc/booking_details_bloc.dart';
class HousekeepingButton extends StatelessWidget {
@@ -15,7 +15,6 @@ class HousekeepingButton extends StatelessWidget {
Widget build(BuildContext context) {
final bloc = context.read<BookingDetailsBloc>();
return InkWell(
- borderRadius: BorderRadius.circular(10),
onTap: () async {
if (bloc.state.isHouseKeepingOrdered) return;
await context.pushNamed(AppRoutes.houseKeeping.name);
@@ -23,10 +22,10 @@ class HousekeepingButton extends StatelessWidget {
},
child: Container(
decoration: BoxDecoration(
+ borderRadius: BorderRadius.circular(10),
border: Border.all(
- color: Colors.grey,
+ color: colorDivider,
),
- borderRadius: BorderRadius.circular(10),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
diff --git a/comwell_key_app/lib/booking_details/components/practical_information_button.dart b/comwell_key_app/lib/booking_details/components/practical_information_button.dart
index c6ce2c13..85db0a40 100644
--- a/comwell_key_app/lib/booking_details/components/practical_information_button.dart
+++ b/comwell_key_app/lib/booking_details/components/practical_information_button.dart
@@ -18,14 +18,13 @@ class PracticalInformationButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
- return InkWell(
- borderRadius: const BorderRadius.all(Radius.circular(15)),
- onTap: () => onClick(),
- child: Ink(
- decoration: BoxDecoration(
- borderRadius: const BorderRadius.all(Radius.circular(16)),
- color: sandColor[10],
- ),
+ return Material(
+ color: sandColor[10],
+ borderRadius: const BorderRadius.all(Radius.circular(16)),
+ child: InkWell(
+ splashColor: sandColor,
+ borderRadius: const BorderRadius.all(Radius.circular(16)),
+ onTap: () => onClick(),
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
diff --git a/comwell_key_app/lib/booking_details/components/share_button.dart b/comwell_key_app/lib/booking_details/components/share_button.dart
index 7320f5c2..86bfe91e 100644
--- a/comwell_key_app/lib/booking_details/components/share_button.dart
+++ b/comwell_key_app/lib/booking_details/components/share_button.dart
@@ -13,13 +13,13 @@ import 'package:go_router/go_router.dart';
class ShareButton extends StatelessWidget {
final Iterable<Guest> guests;
final Color? buttonColor;
- final double userButtonWidth;
+ final double userButtonSize;
final double userButtonOverlap;
const ShareButton(
{super.key,
required this.guests,
this.buttonColor,
- this.userButtonWidth = 50,
+ this.userButtonSize = 45,
this.userButtonOverlap = 15});
@override
@@ -40,13 +40,12 @@ class ShareButton extends StatelessWidget {
child: Stack(
children: [
Positioned(
- left: (numberOfUsers - 1) *
- (userButtonWidth - userButtonOverlap) +
- userButtonWidth -
- 20,
+ left: (numberOfUsers - 1) * (userButtonSize) +
+ userButtonSize -
+ userButtonOverlap,
child: SizedBox(
- width: userButtonWidth,
- height: userButtonWidth,
+ width: userButtonSize,
+ height: userButtonSize,
child: ElevatedButton(
onPressed: () {
context.pushNamed(AppRoutes.shareBooking.name,
@@ -68,10 +67,10 @@ class ShareButton extends StatelessWidget {
numberOfUsers,
(index) => Positioned(
left: (numberOfUsers - 1 - index) *
- (userButtonWidth - userButtonOverlap),
+ (userButtonSize - userButtonOverlap),
child: SizedBox(
- width: userButtonWidth,
- height: userButtonWidth,
+ width: userButtonSize,
+ height: userButtonSize,
child: ElevatedButton(
onPressed: () async {
final results = await _showGuestList(
diff --git a/comwell_key_app/lib/common/components/bottom_sheet_widget.dart b/comwell_key_app/lib/common/components/bottom_sheet_widget.dart
index 2e53608b..167c5a1b 100644
--- a/comwell_key_app/lib/common/components/bottom_sheet_widget.dart
+++ b/comwell_key_app/lib/common/components/bottom_sheet_widget.dart
@@ -1,45 +1,71 @@
import 'package:comwell_key_app/themes/light_theme.dart';
import 'package:flutter/material.dart';
-import 'package:sheet/sheet.dart';
+import 'package:snapping_sheet/snapping_sheet.dart';
class BottomSheetWidget extends StatelessWidget {
- final double initialExtent;
- final double maxExtent;
- final double minExtent;
- final Color? backgroundColor;
-
final List<Widget> widgetChildren;
const BottomSheetWidget({
required this.widgetChildren,
- this.initialExtent = 200,
- this.maxExtent = 600,
- this.minExtent = 100,
- this.backgroundColor,
super.key,
});
@override
Widget build(BuildContext context) {
- return Sheet(
- backgroundColor: backgroundColor ?? sandColor[40],
- initialExtent: initialExtent,
- shape: const RoundedRectangleBorder(
- borderRadius: BorderRadius.only(
- topLeft: Radius.circular(30),
- topRight: Radius.circular(30),
+ final height = MediaQuery.of(context).size.height;
+ final padding = MediaQuery.of(context).padding;
+ final safeHeight = height - padding.top - padding.bottom;
+ const grabbingHeight = 75.0;
+ // Calculate the position factor that will maintain consistent visual position
+ // We want the sheet to take up roughly 78% of the safe area height
+ // We subtract the grabbing height (75) from the total height to get the actual content area
+ final contentHeight = safeHeight - grabbingHeight;
+ final topPositionFactor = (contentHeight * 0.9) / safeHeight;
+
+ return SnappingSheet(
+ snappingPositions: [
+ const SnappingPosition.factor(positionFactor: 0.05),
+ SnappingPosition.factor(positionFactor: topPositionFactor),
+ ],
+ grabbingHeight: grabbingHeight,
+ grabbing: Container(
+ decoration: const BoxDecoration(
+ color: Colors.white,
+ borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
+
+ ),
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ Container(
+ margin: const EdgeInsets.only(top: 20),
+ width: 100,
+ height: 7,
+ decoration: BoxDecoration(
+ color: Colors.grey,
+ borderRadius: BorderRadius.circular(5),
+ ),
+ ),
+ Container(
+ color: Colors.grey[200],
+ height: 2,
+ margin: const EdgeInsets.all(15).copyWith(top: 0, bottom: 0),
+ )
+ ],
),
),
- resizable: true,
- fit: SheetFit.expand,
- minExtent: minExtent,
- maxExtent: maxExtent,
- child: Padding(
- padding: const EdgeInsets.all(16.0),
- child: SingleChildScrollView(
- child: Column(
- crossAxisAlignment: CrossAxisAlignment.start,
- children: widgetChildren)),
+ sheetBelow: SnappingSheetContent(
+ draggable: true,
+ child: Container(
+ color: Colors.white,
+ child: Padding(
+ padding: const EdgeInsets.all(16.0),
+ child: SingleChildScrollView(
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: widgetChildren)),
+ ),
+ ),
),
);
}
diff --git a/comwell_key_app/lib/my_booking/my_booking_page.dart b/comwell_key_app/lib/my_booking/my_booking_page.dart
index 71d7e10c..f31bd3a7 100644
--- a/comwell_key_app/lib/my_booking/my_booking_page.dart
+++ b/comwell_key_app/lib/my_booking/my_booking_page.dart
@@ -206,7 +206,7 @@ class MyBookingPage extends StatelessWidget {
child: ShareButton(
guests: booking.guests,
buttonColor: sandColor[40],
- userButtonWidth: 40,
+ userButtonSize: 40,
userButtonOverlap: 10,
),
),
diff --git a/comwell_key_app/pubspec.yaml b/comwell_key_app/pubspec.yaml
index 826ec57c..866d69b5 100644
--- a/comwell_key_app/pubspec.yaml
+++ b/comwell_key_app/pubspec.yaml
@@ -55,6 +55,7 @@ dependencies:
sentry_flutter: ^8.13.0
share_plus: ^10.1.4
shared_preferences: ^2.5.3
+ snapping_sheet: ^3.1.0
dependency_overrides:
#Remove override when slider button updates