From be979d0c4754516742588f0ec3984bcbf63df4f0 Mon Sep 17 00:00:00 2001 From: Felix Holz Date: Fri, 16 Feb 2024 13:03:47 +0100 Subject: [PATCH] fix bottom sheets and make them look good again (finally) --- lib/frederic_main_app.dart | 2 +- lib/main.dart | 18 +-- lib/misc/bottom_sheet.dart | 66 +-------- lib/screens/add_progress_screen.dart | 1 + lib/screens/bottom_navigation_screen.dart | 82 +++++------ lib/screens/start_trial_screen.dart | 127 +++++++++--------- .../workout_list_screen/workout_card.dart | 4 +- pubspec.yaml | 3 +- 8 files changed, 121 insertions(+), 182 deletions(-) diff --git a/lib/frederic_main_app.dart b/lib/frederic_main_app.dart index 864b03d..1e7c4a1 100644 --- a/lib/frederic_main_app.dart +++ b/lib/frederic_main_app.dart @@ -8,7 +8,7 @@ import 'misc/ExtraIcons.dart'; import 'screens/screens.dart'; class FredericMainApp extends StatelessWidget { - FredericMainApp({Key? key}) : super(key: key); + const FredericMainApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { diff --git a/lib/main.dart b/lib/main.dart index b1229e9..a689a72 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,6 +1,5 @@ import 'dart:isolate'; -import 'package:cupertino_modal_sheet/cupertino_modal_sheet.dart'; import 'package:easy_localization/easy_localization.dart'; import 'package:firebase_core/firebase_core.dart'; import 'package:firebase_crashlytics/firebase_crashlytics.dart'; @@ -24,6 +23,7 @@ import 'package:frederic/theme/frederic_theme.dart'; import 'package:get_it/get_it.dart'; import 'package:hive_flutter/hive_flutter.dart'; import 'package:shared_preferences/shared_preferences.dart'; +import 'package:sheet/route.dart'; final getIt = GetIt.instance; @@ -202,16 +202,16 @@ class _FredericBaseState extends State { brightness: theme.isBright ? Brightness.light : Brightness.dark)), onGenerateRoute: (RouteSettings settings) { - switch (settings.name) { - case '/': - return CupertinoModalSheetRoute( - settings: settings, - builder: (context) { - return FredericMainApp(); - }); + if (settings.name == '/') { + return MaterialExtendedPageRoute( + builder: (BuildContext context) { + return const FredericMainApp(); + }, + ); } + return null; }, - //home: FredericMainApp() + // home: FredericMainApp() // OrientationBuilder( // builder: (context, orientation) { // if (orientation == Orientation.portrait) { diff --git a/lib/misc/bottom_sheet.dart b/lib/misc/bottom_sheet.dart index 5e32693..3ea8a88 100644 --- a/lib/misc/bottom_sheet.dart +++ b/lib/misc/bottom_sheet.dart @@ -1,69 +1,15 @@ -import 'package:cupertino_modal_sheet/cupertino_modal_sheet.dart'; -import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; +import 'package:sheet/route.dart'; Future showFredericBottomSheet( {required BuildContext context, bool enableDrag = false, bool isDismissible = true, required Widget Function(BuildContext) builder}) { - return showCupertinoModalSheet( - context: context, + HapticFeedback.lightImpact(); + return Navigator.of(context).push(CupertinoSheetRoute( + stops: isDismissible ? [0, 1] : [1], builder: builder, - ); - - // return showModalBottomSheet( - // context: context, - // shape: const RoundedRectangleBorder( - // borderRadius: BorderRadius.vertical( - // top: Radius.circular(25.0), - // ), - // ), - // builder: (c) => - // Container(height: MediaQuery.of(context).size.height * 0.9)); - // - // // Use `CupertinoModalSheetRoute` to show an ios 15 style modal sheet. - // // For declarative navigation (Navigator 2.0), use `CupertinoModalSheetPage` instead. - // print("WERNER FINDENIG"); - // final modalRoute = CupertinoModalSheetRoute( - // builder: (context) => DraggableSheet( - // child: DecoratedBox( - // decoration: const ShapeDecoration( - // color: CupertinoColors.white, - // shape: RoundedRectangleBorder( - // borderRadius: BorderRadius.all( - // Radius.circular(16), - // ), - // ), - // ), - // child: SizedBox.expand( - // child: Builder(builder: builder), - // )))); - // - // return Navigator.push(context, modalRoute); + )); } - -// Future showFredericBottomSheetOld( -// {required BuildContext context, -// bool enableDrag = false, -// bool isDismissible = true, -// required Widget Function(BuildContext) builder}) { -// HapticFeedback.lightImpact(); -// -// return showCupertinoModalSheet( -// context: context, -// builder: builder, -// //barrierDismissible: isDismissible, -// ); -// -// // return Navigator.of(context) -// // .push(CupertinoSheetRoute(builder: builder)); -// // Navigator.of(context) -// // .push(SheetRoute(builder: builder, draggable: enableDrag)); -// } - -// void showOldCupertinoFredericBottomSheet({required BuildContext context, required Widget Function(BuildContext) builder}) { -// CupertinoScaffold.showCupertinoModalBottomSheet( -// context: context, -// builder: builder); -// } diff --git a/lib/screens/add_progress_screen.dart b/lib/screens/add_progress_screen.dart index 77c1b97..6a058ea 100644 --- a/lib/screens/add_progress_screen.dart +++ b/lib/screens/add_progress_screen.dart @@ -122,6 +122,7 @@ class _AddProgressScreenState extends State { : null; return CustomScrollView( physics: ClampingScrollPhysics(), + primary: true, slivers: [ SliverPadding(padding: EdgeInsets.only(bottom: 12)), _DisplayActivityCard(widget.activity), diff --git a/lib/screens/bottom_navigation_screen.dart b/lib/screens/bottom_navigation_screen.dart index b878ba4..06b9de7 100644 --- a/lib/screens/bottom_navigation_screen.dart +++ b/lib/screens/bottom_navigation_screen.dart @@ -43,7 +43,7 @@ class _BottomNavigationScreenState extends State Widget build(BuildContext context) { return CupertinoPageScaffold( child: Scaffold( - backgroundColor: Colors.black, + backgroundColor: theme.backgroundColor, extendBodyBehindAppBar: false, body: AnnotatedRegion( value: theme.isDark || theme.isColorful @@ -60,52 +60,42 @@ class _BottomNavigationScreenState extends State }, ), ), - bottomNavigationBar: Stack( - children: [ - // Weird workaround to make the space behind the corners - // the correct colors - Container(color: Colors.white, height: kBottomNavigationBarHeight), - Container( - decoration: BoxDecoration( - color: theme.backgroundColor, - borderRadius: BorderRadius.only( - topRight: Radius.circular(12), - topLeft: Radius.circular(12)), - boxShadow: [ - BoxShadow( - color: Color(0x17000000), spreadRadius: 0, blurRadius: 3), - ], - ), - child: ClipRRect( - borderRadius: BorderRadius.only( - topLeft: Radius.circular(12), - topRight: Radius.circular(12)), - child: BottomNavigationBar( - items: items, - elevation: 0, - backgroundColor: theme.isColorful - ? theme.mainColor - : theme.backgroundColor, - selectedItemColor: theme.isColorful - ? theme.textColorColorfulBackground - : theme.accentColor, - unselectedItemColor: theme.isColorful - ? theme.textColorColorfulBackground - : theme.mainColor, - showUnselectedLabels: true, - type: BottomNavigationBarType.fixed, - currentIndex: currentIndex, - onTap: (index) { - HapticFeedback.selectionClick(); - setState(() { - currentIndex = index; - pageController.jumpToPage(index); - }); - }, - ), - ), + bottomNavigationBar: Container( + decoration: BoxDecoration( + color: theme.backgroundColor, + borderRadius: BorderRadius.only( + topRight: Radius.circular(12), topLeft: Radius.circular(12)), + boxShadow: [ + BoxShadow( + color: Color(0x17000000), spreadRadius: 0, blurRadius: 3), + ], + ), + child: ClipRRect( + borderRadius: BorderRadius.only( + topLeft: Radius.circular(12), topRight: Radius.circular(12)), + child: BottomNavigationBar( + items: items, + elevation: 0, + backgroundColor: + theme.isColorful ? theme.mainColor : theme.backgroundColor, + selectedItemColor: theme.isColorful + ? theme.textColorColorfulBackground + : theme.accentColor, + unselectedItemColor: theme.isColorful + ? theme.textColorColorfulBackground + : theme.mainColor, + showUnselectedLabels: true, + type: BottomNavigationBarType.fixed, + currentIndex: currentIndex, + onTap: (index) { + HapticFeedback.selectionClick(); + setState(() { + currentIndex = index; + pageController.jumpToPage(index); + }); + }, ), - ], + ), ), ), ); diff --git a/lib/screens/start_trial_screen.dart b/lib/screens/start_trial_screen.dart index 11b6b73..ecbe9d0 100644 --- a/lib/screens/start_trial_screen.dart +++ b/lib/screens/start_trial_screen.dart @@ -10,69 +10,72 @@ class StartTrialScreen extends StatelessWidget { @override Widget build(BuildContext context) { - return FredericScaffold( - backgroundColor: theme.accentColorLight, - body: SingleChildScrollView( - child: Container( - color: theme.accentColorLight, - padding: const EdgeInsets.all(48), - child: Column( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.center, - children: [ - SizedBox( - width: 200, - height: 200, - child: Image( - colorBlendMode: BlendMode.screen, - fit: BoxFit.scaleDown, - image: AssetImage('assets/images/abdominal-bench.png')), - ), - Text( - tr('app_name'), - style: TextStyle( - fontSize: 26, - fontWeight: FontWeight.w700, - color: theme.mainColor, - letterSpacing: 0.6), - ), - const SizedBox(height: 4), - Text( - tr('trial.day_free_trial_text', args: [ - FredericBackend.instance.defaults.trialDuration.toString() - ]), - style: TextStyle( - fontSize: 14, - fontWeight: FontWeight.w300, - color: Colors.black, - letterSpacing: 0.2), - ), - const SizedBox(height: 32), - buildListEntry(tr('trial.list_item_1')), - buildListEntry(tr('trial.list_item_2')), - buildListEntry(tr('trial.list_item_3')), - const SizedBox(height: 88), - Text( - tr('trial.trial_description', args: [ - FredericBackend.instance.defaults.trialDuration.toString() - ]), - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 13, - fontWeight: FontWeight.w300, - color: Colors.black, - letterSpacing: 0.2), - ), - const SizedBox(height: 18), - FredericButton(tr('trial.start_trial_button'), onPressed: () { - FredericBackend.instance.purchaseManager.startFreeTrial(); - Navigator.of(context).pop(); - }), - const SizedBox(height: 24), - ], + return PopScope( + canPop: false, + child: FredericScaffold( + backgroundColor: theme.accentColorLight, + body: SingleChildScrollView( + child: Container( + color: theme.accentColorLight, + padding: const EdgeInsets.all(48), + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + SizedBox( + width: 200, + height: 200, + child: Image( + colorBlendMode: BlendMode.screen, + fit: BoxFit.scaleDown, + image: AssetImage('assets/images/abdominal-bench.png')), + ), + Text( + tr('app_name'), + style: TextStyle( + fontSize: 26, + fontWeight: FontWeight.w700, + color: theme.mainColor, + letterSpacing: 0.6), + ), + const SizedBox(height: 4), + Text( + tr('trial.day_free_trial_text', args: [ + FredericBackend.instance.defaults.trialDuration.toString() + ]), + style: TextStyle( + fontSize: 14, + fontWeight: FontWeight.w300, + color: Colors.black, + letterSpacing: 0.2), + ), + const SizedBox(height: 32), + buildListEntry(tr('trial.list_item_1')), + buildListEntry(tr('trial.list_item_2')), + buildListEntry(tr('trial.list_item_3')), + const SizedBox(height: 88), + Text( + tr('trial.trial_description', args: [ + FredericBackend.instance.defaults.trialDuration.toString() + ]), + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 13, + fontWeight: FontWeight.w300, + color: Colors.black, + letterSpacing: 0.2), + ), + const SizedBox(height: 18), + FredericButton(tr('trial.start_trial_button'), onPressed: () { + FredericBackend.instance.purchaseManager.startFreeTrial(); + Navigator.of(context).pop(); + }), + const SizedBox(height: 24), + ], + ), ), - ), - )); + )), + ); } Widget buildListEntry(String text) { diff --git a/lib/widgets/workout_list_screen/workout_card.dart b/lib/widgets/workout_list_screen/workout_card.dart index 0c733fd..316f5c9 100644 --- a/lib/widgets/workout_list_screen/workout_card.dart +++ b/lib/widgets/workout_list_screen/workout_card.dart @@ -1,6 +1,5 @@ import 'package:easy_localization/easy_localization.dart'; import 'package:flutter/cupertino.dart'; -import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:frederic/backend/backend.dart'; import 'package:frederic/main.dart'; @@ -10,6 +9,7 @@ import 'package:frederic/widgets/standard_elements/frederic_card.dart'; import 'package:frederic/widgets/standard_elements/frederic_chip.dart'; import 'package:frederic/widgets/standard_elements/picture_icon.dart'; import 'package:frederic/widgets/workout_list_screen/enable_workout_dialog.dart'; +import 'package:sheet/route.dart'; class WorkoutCard extends StatefulWidget { const WorkoutCard(this.workout, @@ -61,7 +61,7 @@ class _WorkoutCardState extends State { onTap: widget.clickable ? () { HapticFeedback.selectionClick(); - Navigator.of(context).push(MaterialPageRoute( + Navigator.of(context).push(MaterialExtendedPageRoute( builder: (context) => EditWorkoutScreen( widget.workout.id, defaultPage: hasStartDate diff --git a/pubspec.yaml b/pubspec.yaml index 156d102..053a67d 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -65,11 +65,10 @@ dependencies: infinite_listview: ^1.1.0 introduction_screen: ^3.1.12 cached_network_image: ^3.3.0 - cupertino_modal_sheet: ^1.1.0 sheet: git: - url: https://github.com/jamesblasco/modal_bottom_sheet.git + url: https://github.com/nextormer/modal_bottom_sheet.git path: sheet easy_localization: ^3.0.3