diff --git a/lib/presentation/views/main_menu/group_view/group_detail_view.dart b/lib/presentation/views/main_menu/group_view/group_detail_view.dart index 1ef89ef..ab70d1a 100644 --- a/lib/presentation/views/main_menu/group_view/group_detail_view.dart +++ b/lib/presentation/views/main_menu/group_view/group_detail_view.dart @@ -3,6 +3,7 @@ import 'package:intl/intl.dart'; import 'package:provider/provider.dart'; import 'package:tallee/core/adaptive_page_route.dart'; import 'package:tallee/core/custom_theme.dart'; +import 'package:tallee/core/enums.dart'; import 'package:tallee/data/db/database.dart'; import 'package:tallee/data/models/group.dart'; import 'package:tallee/data/models/match.dart'; @@ -10,10 +11,10 @@ import 'package:tallee/data/models/player.dart'; import 'package:tallee/l10n/generated/app_localizations.dart'; import 'package:tallee/presentation/views/main_menu/group_view/create_group_view.dart'; import 'package:tallee/presentation/widgets/app_skeleton.dart'; -import 'package:tallee/presentation/widgets/buttons/animated_dialog_button.dart'; import 'package:tallee/presentation/widgets/buttons/main_menu_button.dart'; import 'package:tallee/presentation/widgets/colored_icon_container.dart'; -import 'package:tallee/presentation/widgets/custom_alert_dialog.dart'; +import 'package:tallee/presentation/widgets/dialog/custom_alert_dialog.dart'; +import 'package:tallee/presentation/widgets/dialog/custom_dialog_action.dart'; import 'package:tallee/presentation/widgets/tiles/info_tile.dart'; import 'package:tallee/presentation/widgets/tiles/text_icon_tile.dart'; @@ -70,23 +71,16 @@ class _GroupDetailViewState extends State { context: context, builder: (context) => CustomAlertDialog( title: '${loc.delete_group}?', - content: loc.this_cannot_be_undone, + content: Text(loc.this_cannot_be_undone), actions: [ - AnimatedDialogButton( - onPressed: () => Navigator.of(context).pop(false), - child: Text( - loc.cancel, - style: const TextStyle(color: CustomTheme.textColor), - ), - ), - AnimatedDialogButton( + CustomDialogAction( onPressed: () => Navigator.of(context).pop(true), - child: Text( - loc.delete, - style: const TextStyle( - color: CustomTheme.secondaryColor, - ), - ), + text: loc.delete, + ), + CustomDialogAction( + onPressed: () => Navigator.of(context).pop(false), + buttonType: ButtonType.secondary, + text: loc.cancel, ), ], ), diff --git a/lib/presentation/views/main_menu/match_view/match_detail_view.dart b/lib/presentation/views/main_menu/match_view/match_detail_view.dart index fc53aa8..2ca6925 100644 --- a/lib/presentation/views/main_menu/match_view/match_detail_view.dart +++ b/lib/presentation/views/main_menu/match_view/match_detail_view.dart @@ -4,15 +4,16 @@ import 'package:provider/provider.dart'; import 'package:tallee/core/adaptive_page_route.dart'; import 'package:tallee/core/common.dart'; import 'package:tallee/core/custom_theme.dart'; +import 'package:tallee/core/enums.dart'; import 'package:tallee/data/db/database.dart'; import 'package:tallee/data/models/match.dart'; import 'package:tallee/l10n/generated/app_localizations.dart'; import 'package:tallee/presentation/views/main_menu/match_view/create_match/create_match_view.dart'; import 'package:tallee/presentation/views/main_menu/match_view/match_result_view.dart'; -import 'package:tallee/presentation/widgets/buttons/animated_dialog_button.dart'; import 'package:tallee/presentation/widgets/buttons/main_menu_button.dart'; import 'package:tallee/presentation/widgets/colored_icon_container.dart'; -import 'package:tallee/presentation/widgets/custom_alert_dialog.dart'; +import 'package:tallee/presentation/widgets/dialog/custom_alert_dialog.dart'; +import 'package:tallee/presentation/widgets/dialog/custom_dialog_action.dart'; import 'package:tallee/presentation/widgets/tiles/info_tile.dart'; import 'package:tallee/presentation/widgets/tiles/text_icon_tile.dart'; @@ -64,23 +65,16 @@ class _MatchDetailViewState extends State { context: context, builder: (context) => CustomAlertDialog( title: '${loc.delete_match}?', - content: loc.this_cannot_be_undone, + content: Text(loc.this_cannot_be_undone), actions: [ - AnimatedDialogButton( - onPressed: () => Navigator.of(context).pop(false), - child: Text( - loc.cancel, - style: const TextStyle(color: CustomTheme.textColor), - ), - ), - AnimatedDialogButton( + CustomDialogAction( onPressed: () => Navigator.of(context).pop(true), - child: Text( - loc.delete, - style: const TextStyle( - color: CustomTheme.secondaryColor, - ), - ), + text: loc.delete, + ), + CustomDialogAction( + onPressed: () => Navigator.of(context).pop(false), + buttonType: ButtonType.secondary, + text: loc.cancel, ), ], ), diff --git a/lib/presentation/views/main_menu/settings_view/settings_view.dart b/lib/presentation/views/main_menu/settings_view/settings_view.dart index 6a558ad..8e1cbdc 100644 --- a/lib/presentation/views/main_menu/settings_view/settings_view.dart +++ b/lib/presentation/views/main_menu/settings_view/settings_view.dart @@ -9,8 +9,8 @@ import 'package:tallee/core/custom_theme.dart'; import 'package:tallee/core/enums.dart'; import 'package:tallee/l10n/generated/app_localizations.dart'; import 'package:tallee/presentation/views/main_menu/settings_view/licenses_view.dart'; -import 'package:tallee/presentation/widgets/buttons/animated_dialog_button.dart'; -import 'package:tallee/presentation/widgets/custom_alert_dialog.dart'; +import 'package:tallee/presentation/widgets/dialog/custom_alert_dialog.dart'; +import 'package:tallee/presentation/widgets/dialog/custom_dialog_action.dart'; import 'package:tallee/presentation/widgets/tiles/settings_list_tile.dart'; import 'package:tallee/services/data_transfer_service.dart'; import 'package:url_launcher/url_launcher.dart'; @@ -122,25 +122,16 @@ class _SettingsViewState extends State { context: context, builder: (context) => CustomAlertDialog( title: '${loc.delete_all_data}?', - content: loc.this_cannot_be_undone, + content: Text(loc.this_cannot_be_undone), actions: [ - AnimatedDialogButton( - onPressed: () => Navigator.of(context).pop(false), - child: Text( - loc.cancel, - style: const TextStyle( - color: CustomTheme.textColor, - ), - ), - ), - AnimatedDialogButton( + CustomDialogAction( onPressed: () => Navigator.of(context).pop(true), - child: Text( - loc.delete, - style: const TextStyle( - color: CustomTheme.secondaryColor, - ), - ), + text: loc.delete, + ), + CustomDialogAction( + onPressed: () => Navigator.of(context).pop(false), + buttonType: ButtonType.secondary, + text: loc.cancel, ), ], ), diff --git a/lib/presentation/widgets/buttons/animated_dialog_button.dart b/lib/presentation/widgets/buttons/animated_dialog_button.dart index 798edfa..70deea6 100644 --- a/lib/presentation/widgets/buttons/animated_dialog_button.dart +++ b/lib/presentation/widgets/buttons/animated_dialog_button.dart @@ -1,22 +1,28 @@ import 'package:flutter/material.dart'; -import 'package:tallee/core/custom_theme.dart'; +import 'package:tallee/core/enums.dart'; class AnimatedDialogButton extends StatefulWidget { /// A custom animated button widget that provides a scaling and opacity effect /// when pressed. /// - [onPressed]: Callback function that is triggered when the button is pressed. - /// - [child]: The child widget to be displayed inside the button, typically a text or icon. + /// - [buttonText]: The text to be displayed on the button. + /// - [buttonType]: The type of the button, which determines its styling. + /// - [buttonConstraints]: Optional constraints to control the button's size. const AnimatedDialogButton({ super.key, + required this.buttonText, required this.onPressed, - required this.child, + this.buttonConstraints, + this.buttonType = ButtonType.primary, }); - /// Callback function that is triggered when the button is pressed. + final String buttonText; + final VoidCallback onPressed; - /// The child widget to be displayed inside the button, typically a text or icon. - final Widget child; + final BoxConstraints? buttonConstraints; + + final ButtonType buttonType; @override State createState() => _AnimatedDialogButtonState(); @@ -27,6 +33,29 @@ class _AnimatedDialogButtonState extends State { @override Widget build(BuildContext context) { + final textStyling = TextStyle( + color: widget.buttonType == ButtonType.primary + ? Colors.black + : Colors.white, + fontSize: 16, + fontWeight: FontWeight.bold, + ); + + final buttonDecoration = widget.buttonType == ButtonType.primary + // Primary + ? BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(12), + ) + : widget.buttonType == ButtonType.secondary + // Secondary + ? BoxDecoration( + border: BoxBorder.all(color: Colors.white, width: 2), + borderRadius: BorderRadius.circular(12), + ) + // Tertiary + : const BoxDecoration(); + return GestureDetector( onTapDown: (_) => setState(() => _isPressed = true), onTapUp: (_) => setState(() => _isPressed = false), @@ -38,10 +67,18 @@ class _AnimatedDialogButtonState extends State { child: AnimatedOpacity( opacity: _isPressed ? 0.6 : 1.0, duration: const Duration(milliseconds: 100), - child: Container( - decoration: CustomTheme.standardBoxDecoration, - padding: const EdgeInsets.symmetric(horizontal: 26, vertical: 6), - child: widget.child, + child: Center( + child: Container( + constraints: widget.buttonConstraints, + decoration: buttonDecoration, + padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12), + margin: const EdgeInsets.symmetric(vertical: 8), + child: Text( + widget.buttonText, + style: textStyling, + textAlign: TextAlign.center, + ), + ), ), ), ), diff --git a/lib/presentation/widgets/custom_alert_dialog.dart b/lib/presentation/widgets/dialog/custom_alert_dialog.dart similarity index 74% rename from lib/presentation/widgets/custom_alert_dialog.dart rename to lib/presentation/widgets/dialog/custom_alert_dialog.dart index bf98f2c..606fc49 100644 --- a/lib/presentation/widgets/custom_alert_dialog.dart +++ b/lib/presentation/widgets/dialog/custom_alert_dialog.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:tallee/core/custom_theme.dart'; +import 'package:tallee/presentation/widgets/dialog/custom_dialog_action.dart'; class CustomAlertDialog extends StatelessWidget { /// A custom alert dialog widget that provides a os unspecific AlertDialog, @@ -16,20 +17,23 @@ class CustomAlertDialog extends StatelessWidget { }); final String title; - final String content; - final List actions; + final Widget content; + final List actions; @override Widget build(BuildContext context) { return AlertDialog( - title: Text(title, style: const TextStyle(color: CustomTheme.textColor)), - content: Text( - content, - style: const TextStyle(color: CustomTheme.textColor), + title: Text( + title, + style: const TextStyle( + fontWeight: FontWeight.bold, + color: CustomTheme.textColor, + ), ), + content: content, actions: actions, backgroundColor: CustomTheme.boxColor, - actionsAlignment: MainAxisAlignment.spaceAround, + actionsAlignment: MainAxisAlignment.center, shape: RoundedRectangleBorder( borderRadius: CustomTheme.standardBorderRadiusAll, side: const BorderSide(color: CustomTheme.boxBorderColor), diff --git a/lib/presentation/widgets/dialog/custom_dialog_action.dart b/lib/presentation/widgets/dialog/custom_dialog_action.dart new file mode 100644 index 0000000..aec0dfa --- /dev/null +++ b/lib/presentation/widgets/dialog/custom_dialog_action.dart @@ -0,0 +1,32 @@ +import 'package:flutter/cupertino.dart'; +import 'package:tallee/core/enums.dart'; +import 'package:tallee/presentation/widgets/buttons/animated_dialog_button.dart'; + +class CustomDialogAction extends StatelessWidget { + /// A custom dialog action widget that represents a button in a dialog. + /// - [text]: The text to be displayed on the button. + /// - [buttonType]: The type of the button, which determines its styling. + /// - [onPressed]: Callback function that is triggered when the button is pressed. + const CustomDialogAction({ + super.key, + required this.onPressed, + required this.text, + this.buttonType = ButtonType.primary, + }); + + final String text; + + final ButtonType buttonType; + + final VoidCallback onPressed; + + @override + Widget build(BuildContext context) { + return AnimatedDialogButton( + onPressed: onPressed, + buttonText: text, + buttonType: buttonType, + buttonConstraints: const BoxConstraints(minWidth: 300), + ); + } +}