Skip to content

Commit

Permalink
Alert modal sheet (#6253)
Browse files Browse the repository at this point in the history
  • Loading branch information
@g123k
g123k authored Jan 20, 2025
1 parent f495214 commit ebe1129
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 59 deletions.
84 changes: 80 additions & 4 deletions packages/smooth_app/lib/generic_lib/bottom_sheets/smooth_bottom_sheet.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
import 'package:flutter/semantics.dart';
import 'package:smooth_app/generic_lib/bottom_sheets/smooth_draggable_bottom_sheet_route.dart';
import 'package:smooth_app/generic_lib/design_constants.dart';
import 'package:smooth_app/helpers/color_extension.dart';
import 'package:smooth_app/helpers/haptic_feedback_helper.dart';
import 'package:smooth_app/resources/app_icons.dart' as icons;
import 'package:smooth_app/themes/smooth_theme.dart';
Expand Down Expand Up @@ -97,7 +98,7 @@ Future<T?> showSmoothDraggableModalSheet<T>({
);
}

/// A modal sheet containing a limited list (no scroll)
/// A modal sheet with a limited list (no scroll)
Future<T?> showSmoothListOfChoicesModalSheet<T>({
required BuildContext context,
required String title,
Expand All @@ -118,6 +119,7 @@ Future<T?> showSmoothListOfChoicesModalSheet<T>({
Color? footerBackgroundColor,
Color? prefixIndicatorColor,
double footerSpace = 0.0,
SmoothModalSheetType type = SmoothModalSheetType.info,
bool safeArea = false,
}) {
assert(labels.length == values.length);
Expand Down Expand Up @@ -208,6 +210,7 @@ Future<T?> showSmoothListOfChoicesModalSheet<T>({
context: context,
builder: (BuildContext context) => SmoothModalSheet(
title: title,
type: type,
prefixIndicator: true,
prefixIndicatorColor: prefixIndicatorColor,
headerBackgroundColor: headerBackgroundColor,
Expand All @@ -217,6 +220,59 @@ Future<T?> showSmoothListOfChoicesModalSheet<T>({
);
}

/// A modal sheet asking for a confirmation
Future<T?> showSmoothAlertModalSheet<T>({
required BuildContext context,
required String title,
required Widget message,
required Iterable<String> actionLabels,
required Iterable<T> actionValues,
required List<Widget> actionIcons,
SmoothModalSheetType type = SmoothModalSheetType.info,
bool safeArea = true,
}) {
final bool lightTheme = context.lightTheme(listen: false);
final Color headerBackgroundColor = switch (type) {
SmoothModalSheetType.error when lightTheme =>
SmoothModalSheetHeader.ERROR_COLOR.lighten(0.55),
SmoothModalSheetType.error =>
SmoothModalSheetHeader.ERROR_COLOR.darken(0.3),
SmoothModalSheetType.info when lightTheme =>
context.extension<SmoothColorsThemeExtension>().primaryLight,
SmoothModalSheetType.info =>
context.extension<SmoothColorsThemeExtension>().primaryDark.darken(0.1),
};

return showSmoothListOfChoicesModalSheet<T>(
context: context,
title: title,
type: type,
header: ColoredBox(
color: headerBackgroundColor,
child: Padding(
padding: const EdgeInsetsDirectional.symmetric(
horizontal: LARGE_SPACE,
vertical: MEDIUM_SPACE,
),
child: DefaultTextStyle.merge(
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
fontWeight: FontWeight.w600,
),
child: message,
),
),
),
labels: actionLabels,
values: actionValues,
prefixIcons: actionIcons,
dividerPadding: const EdgeInsetsDirectional.symmetric(
horizontal: MEDIUM_SPACE,
),
textStyle: const TextStyle(fontWeight: FontWeight.w600),
safeArea: true,
);
}

class _SmoothListOfChoicesEndArrow extends StatelessWidget {
const _SmoothListOfChoicesEndArrow();

Expand Down Expand Up @@ -249,6 +305,7 @@ class SmoothModalSheet extends StatelessWidget {
SmoothModalSheet({
required String title,
required this.body,
SmoothModalSheetType type = SmoothModalSheetType.info,
bool prefixIndicator = false,
bool closeButton = true,
Color? prefixIndicatorColor,
Expand All @@ -271,6 +328,7 @@ class SmoothModalSheet extends StatelessWidget {
: null,
backgroundColor: headerBackgroundColor,
foregroundColor: headerForegroundColor,
type: type,
);

final SmoothModalSheetHeader header;
Expand Down Expand Up @@ -317,20 +375,21 @@ class SmoothModalSheetHeader extends StatelessWidget implements SizeWidget {
this.suffix,
this.foregroundColor,
this.backgroundColor,
this.type = SmoothModalSheetType.info,
});

static const double MIN_HEIGHT = 55.0;
static const Color ERROR_COLOR = Color(0xFFB81D1D);

final String title;
final SizeWidget? prefix;
final SizeWidget? suffix;
final Color? foregroundColor;
final Color? backgroundColor;
final SmoothModalSheetType type;

@override
Widget build(BuildContext context) {
final Color primaryColor =
context.extension<SmoothColorsThemeExtension>().primaryDark;
final Color tintColor = foregroundColor ?? Colors.white;

return IconTheme(
Expand All @@ -339,7 +398,7 @@ class SmoothModalSheetHeader extends StatelessWidget implements SizeWidget {
height: suffix is SmoothModalSheetHeaderButton ? double.infinity : null,
constraints: const BoxConstraints(minHeight: MIN_HEIGHT),
decoration: BoxDecoration(
color: backgroundColor ?? primaryColor,
color: _backgroundColor(context),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black.withValues(alpha: 0.2),
Expand Down Expand Up @@ -387,6 +446,18 @@ class SmoothModalSheetHeader extends StatelessWidget implements SizeWidget {
);
}

Color _backgroundColor(BuildContext context) {
if (backgroundColor != null) {
return backgroundColor!;
}

return switch (type) {
SmoothModalSheetType.error => ERROR_COLOR,
SmoothModalSheetType.info =>
context.extension<SmoothColorsThemeExtension>().primaryDark,
};
}

double computeHeight(BuildContext context) {
return math.max(
widgetHeight(context),
Expand Down Expand Up @@ -635,3 +706,8 @@ class SmoothModalSheetBodyContainer extends StatelessWidget {
);
}
}

enum SmoothModalSheetType {
error,
info,
}
30 changes: 10 additions & 20 deletions packages/smooth_app/lib/pages/prices/product_price_add_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,39 +202,29 @@ class _ProductPriceAddPageState extends State<ProductPriceAddPage>
final SmoothColorsThemeExtension extension =
context.extension<SmoothColorsThemeExtension>();

final Currency? currency =
await showSmoothListOfChoicesModalSheet<Currency?>(
final Currency? currency = await showSmoothAlertModalSheet<Currency?>(
context: context,
title: appLocalizations.prices_currency_change_proposal_title,
header: ColoredBox(
color: extension.primaryLight,
child: Padding(
padding: const EdgeInsetsDirectional.symmetric(
horizontal: LARGE_SPACE,
vertical: MEDIUM_SPACE,
),
child: TextWithBoldParts(
text: appLocalizations.prices_currency_change_proposal_message(
model.currency.name, newCurrency.name),
textStyle: Theme.of(context).textTheme.bodyLarge?.copyWith(
fontWeight: FontWeight.w500,
),
),
),
message: TextWithBoldParts(
text: appLocalizations.prices_currency_change_proposal_message(
model.currency.name, newCurrency.name),
textStyle: Theme.of(context).textTheme.bodyLarge?.copyWith(
fontWeight: FontWeight.w500,
),
),
labels: <String>[
actionLabels: <String>[
appLocalizations.prices_currency_change_proposal_action_approve(
newCurrency.name,
),
appLocalizations.prices_currency_change_proposal_action_cancel(
model.currency.name,
),
],
prefixIcons: <Widget>[
actionIcons: <Widget>[
Icon(Icons.check_circle_rounded, color: extension.success),
Icon(Icons.cancel_rounded, color: extension.error),
],
values: <Currency?>[newCurrency, null],
actionValues: <Currency?>[newCurrency, null],
);

if (currency != null) {
Expand Down
44 changes: 9 additions & 35 deletions packages/smooth_app/lib/pages/product/may_exit_page_helper.dart
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:smooth_app/generic_lib/bottom_sheets/smooth_bottom_sheet.dart';
import 'package:smooth_app/generic_lib/design_constants.dart';
import 'package:smooth_app/helpers/color_extension.dart';
import 'package:smooth_app/themes/smooth_theme.dart';
import 'package:smooth_app/themes/smooth_theme_colors.dart';
import 'package:smooth_app/themes/theme_provider.dart';

/// Helper class about the "You're leaving the page with unsaved changes" case.
class MayExitPageHelper {
Expand All @@ -28,48 +25,25 @@ class MayExitPageHelper {
final SmoothColorsThemeExtension extension =
context.extension<SmoothColorsThemeExtension>();

const Color color = Color(0xFFB81D1D);

return showSmoothListOfChoicesModalSheet<bool>(
return showSmoothAlertModalSheet<bool>(
context: context,
title: title ?? appLocalizations.edit_product_form_item_exit_title,
headerBackgroundColor: color,
header: ColoredBox(
color: context.lightTheme(listen: false)
? color.lighten(0.55)
: color.darken(0.3),
child: Padding(
padding: const EdgeInsetsDirectional.symmetric(
horizontal: LARGE_SPACE,
vertical: MEDIUM_SPACE,
),
child: Text(
appLocalizations.edit_product_form_item_exit_confirmation,
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
fontWeight: FontWeight.w600,
),
),
),
),
labels: <String>[
message: Text(appLocalizations.edit_product_form_item_exit_confirmation),
type: SmoothModalSheetType.error,
actionLabels: <String>[
appLocalizations
.edit_product_form_item_exit_confirmation_positive_button,
appLocalizations
.edit_product_form_item_exit_confirmation_negative_button,
],
values: <bool>[
true,
false,
],
prefixIcons: <Widget>[
actionIcons: <Widget>[
Icon(Icons.save_rounded, color: extension.success),
Icon(Icons.cancel_rounded, color: extension.error),
],
dividerPadding: const EdgeInsetsDirectional.symmetric(
horizontal: MEDIUM_SPACE,
),
textStyle: const TextStyle(fontWeight: FontWeight.w600),
safeArea: true,
actionValues: <bool>[
true,
false,
],
);
}
}

0 comments on commit ebe1129

Please sign in to comment.