Skip to content

improve dialog box design #3145

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
malik1004x wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

improve dialog box design #3145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions lib/src/screens/backup/backup_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import 'dart:ui';
import 'package:cake_wallet/core/execution_state.dart';
import 'package:cake_wallet/src/screens/base_page.dart';
import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart';
import 'package:cake_wallet/src/widgets/base_alert_dialog.dart';
import 'package:cake_wallet/src/widgets/primary_button.dart';
import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/routes.dart';
Expand Down Expand Up @@ -116,6 +117,8 @@ class BackupPage extends BasePage {
alertContent: S.of(context).save_backup_password,
rightButtonText: S.of(context).seed_alert_yes,
leftButtonText: S.of(context).seed_alert_back,
leftAlertButtonStyle: AlertButtonStyle.error(context),
rightAlertButtonStyle: AlertButtonStyle.secondary(context),
actionRightButton: () async {
Navigator.of(dialogContext).pop();
final backupFuture = backupViewModelBase.exportBackup();
Expand Down
63 changes: 35 additions & 28 deletions lib/src/widgets/alert_with_one_action.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,32 +39,39 @@ class AlertWithOneAction extends BaseAlertDialog {
String? get headerText => headerTitleText;

@override
Widget actionButtons(BuildContext context) {
return Container(
width: 300,
height: 52,
padding: EdgeInsets.only(left: 12, right: 12),
color: Theme.of(context).colorScheme.surface,
child: ButtonTheme(
minWidth: double.infinity,
child: TextButton(
key: buttonKey,
onPressed: buttonAction,
// FIX-ME: Style
//highlightColor: Colors.transparent,
//splashColor: Colors.transparent,
child: Text(
buttonText,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
fontSize: 15,
fontWeight: FontWeight.w600,
color: Theme.of(context).colorScheme.primary,
decoration: TextDecoration.none,
),
),
),
),
);
}
VoidCallback get actionRight => buttonAction;

@override
bool get showLeftButton => false;

@override
String get rightActionButtonText => buttonText;

// @override
// Widget actionButtons(BuildContext context) {
// return Container(
// padding: EdgeInsets.only(left: 12, right: 12),
// color: Theme.of(context).colorScheme.surface,
// child: ButtonTheme(
// minWidth: double.infinity,
// child: TextButton(
// key: buttonKey,
// onPressed: buttonAction,
// // FIX-ME: Style
// //highlightColor: Colors.transparent,
// //splashColor: Colors.transparent,
// child: Text(
// buttonText,
// textAlign: TextAlign.center,
// style: Theme.of(context).textTheme.bodyMedium!.copyWith(
// fontSize: 15,
// fontWeight: FontWeight.w600,
// color: Theme.of(context).colorScheme.primary,
// decoration: TextDecoration.none,
// ),
// ),
// ),
// ),
// );
// }
}
6 changes: 6 additions & 0 deletions lib/src/widgets/alert_with_two_actions.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ class AlertWithTwoActions extends BaseAlertDialog {
this.isDividerExist = false,
// this.leftActionColor,
// this.rightActionColor,
this.leftAlertButtonStyle,
this.rightAlertButtonStyle,
this.alertRightActionButtonKey,
this.alertLeftActionButtonKey,
this.alertDialogKey,
Expand All @@ -29,6 +31,10 @@ class AlertWithTwoActions extends BaseAlertDialog {
final bool alertBarrierDismissible;
// final Color leftActionColor;
// final Color rightActionColor;
@override
final AlertButtonStyle? leftAlertButtonStyle;
@override
final AlertButtonStyle? rightAlertButtonStyle;
final bool isDividerExist;
final Key? alertRightActionButtonKey;
final Key? alertLeftActionButtonKey;
Expand Down
224 changes: 125 additions & 99 deletions lib/src/widgets/base_alert_dialog.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,45 @@
import 'dart:ui';

import 'package:auto_size_text/auto_size_text.dart';
import 'package:cake_wallet/src/widgets/section_divider.dart';
import 'package:flutter/material.dart';


class AlertButtonStyle {
final Color backgroundColor;
final Color textColor;
final FontWeight fontWeight;

const AlertButtonStyle({
required this.backgroundColor,
required this.textColor,
this.fontWeight = FontWeight.w400
});

factory AlertButtonStyle.primary(BuildContext context) => AlertButtonStyle(
backgroundColor: Theme.of(context).colorScheme.primary,
textColor: Theme.of(context).colorScheme.onPrimary,
);

factory AlertButtonStyle.secondary(BuildContext context) => AlertButtonStyle(
backgroundColor: Theme.of(context).colorScheme.surfaceContainer,
textColor: Theme.of(context).colorScheme.primary,
);

factory AlertButtonStyle.error(BuildContext context) => AlertButtonStyle(
backgroundColor: Theme.of(context).colorScheme.errorContainer,
textColor: Theme.of(context).colorScheme.error,
fontWeight: FontWeight.w500
);
}


class BaseAlertDialog extends StatelessWidget {
String? get headerText => '';

String? get titleText => '';

double? get titleTextSize => 20;
double? get titleTextSize => 18;

String get contentText => '';

Expand All @@ -28,21 +59,19 @@ class BaseAlertDialog extends StatelessWidget {

bool get barrierDismissible => true;

Color? get leftActionButtonTextColor => null;

Color? get rightActionButtonTextColor => null;

Color? get leftActionButtonColor => null;

Color? get rightActionButtonColor => null;

String? get headerImageUrl => null;

Key? leftActionButtonKey;

Key? rightActionButtonKey;

Key? dialogKey;

AlertButtonStyle? get leftAlertButtonStyle => null;

AlertButtonStyle? get rightAlertButtonStyle => null;

bool get showLeftButton => true;

Widget title(BuildContext context) {
return Text(
Expand Down Expand Up @@ -83,7 +112,7 @@ class BaseAlertDialog extends StatelessWidget {
contentText,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
fontSize: 16,
fontSize: 14,
decoration: TextDecoration.none,
),
),
Expand All @@ -93,59 +122,56 @@ class BaseAlertDialog extends StatelessWidget {
}

Widget actionButtons(BuildContext context) {
return Container(
height: 60,
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: TextButton(
key: leftActionButtonKey,
onPressed: actionLeft,
style: TextButton.styleFrom(
backgroundColor: leftActionButtonColor ?? Theme.of(context).colorScheme.surface,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.zero),
final rightButtonStyle = rightAlertButtonStyle ?? AlertButtonStyle.primary(context);
final leftButtonStyle = leftAlertButtonStyle ?? AlertButtonStyle.secondary(context);

return Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
spacing:8,
children: <Widget>[
if(showLeftButton)
Expanded(
child: GestureDetector(
key: leftActionButtonKey,
onTap: actionLeft,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(999999),
color: leftButtonStyle.backgroundColor
),
child: Padding(
padding: EdgeInsets.symmetric(vertical: 16, horizontal: 8),
child: AutoSizeText(
maxLines:1,
leftActionButtonText,
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16, color: leftButtonStyle.textColor, fontWeight: leftButtonStyle.fontWeight)
),
),
child: Text(
leftActionButtonText,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
fontSize: 15,
fontWeight: FontWeight.w600,
color: leftActionButtonTextColor ??
Theme.of(context).colorScheme.errorContainer,
decoration: TextDecoration.none,
),
)),
),
const VerticalSectionDivider(),
Expanded(
child: TextButton(
)),
),
Expanded(
child: GestureDetector(
key: rightActionButtonKey,
onPressed: actionRight,
style: TextButton.styleFrom(
backgroundColor: rightActionButtonColor ?? Theme.of(context).colorScheme.surface,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.zero),
onTap: actionRight,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(999999),
color: rightButtonStyle.backgroundColor
),
),
child: Text(
rightActionButtonText,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
fontSize: 15,
fontWeight: FontWeight.w600,
color: rightActionButtonTextColor ?? Theme.of(context).colorScheme.onSurface,
decoration: TextDecoration.none,
),
),
),
),
],
),
child: Padding(
padding: EdgeInsets.symmetric(vertical: 16, horizontal: 8),
child: AutoSizeText(
maxLines: 1,
rightActionButtonText,
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16, color: rightButtonStyle.textColor, fontWeight: rightButtonStyle.fontWeight)
),
),
)),
),
],
);
}

Expand Down Expand Up @@ -178,53 +204,53 @@ class BaseAlertDialog extends StatelessWidget {
filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
child: Container(
decoration:
BoxDecoration(color: Theme.of(context).colorScheme.surface.withOpacity(0.8)),
BoxDecoration(color: Theme.of(context).colorScheme.onSurface.withAlpha(25)),
child: Center(
child: GestureDetector(
onTap: () => null,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Theme.of(context).colorScheme.surface,
),
width: 300,
child: Stack(
clipBehavior: Clip.none,
children: [
if (headerImageUrl != null) headerImage(context, headerImageUrl!),
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
if (headerImageUrl != null) const SizedBox(height: 50),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: GestureDetector(
onTap: () => null,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24),
color: Theme.of(context).colorScheme.surface,
),
child: Padding(
padding: const EdgeInsets.all(24.0),
child: Stack(
clipBehavior: Clip.none,
children: [
if (headerImageUrl != null) headerImage(context, headerImageUrl!),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
if (headerText?.isNotEmpty ?? false) headerTitle(context),
titleText != null
? Padding(
padding: EdgeInsets.fromLTRB(24, 20, 24, 0),
child: title(context),
)
: SizedBox(height: 16),
isDividerExists
? Padding(
padding: EdgeInsets.only(top: 16, bottom: 8),
child: const HorizontalSectionDivider(),
)
: Offstage(),
Padding(
padding: EdgeInsets.fromLTRB(24, 8, 24, 32),
child: content(context),
)
if (headerImageUrl != null) const SizedBox(height: 50),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
if (headerText?.isNotEmpty ?? false) headerTitle(context),
titleText != null
? title(context)
: SizedBox(height: 16),
isDividerExists
? Padding(
padding: EdgeInsets.only(top: 16, bottom: 8),
child: const HorizontalSectionDivider(),
)
: Offstage(),
Padding(
padding: EdgeInsets.symmetric(vertical: 25),
child: content(context),
)
],
),
// if (isBottomDividerExists) const HorizontalSectionDivider(),
actionButtons(context)
],
),
if (isBottomDividerExists) const HorizontalSectionDivider(),
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(30)),
child: actionButtons(context))
],
),
],
),
),
),
),
Expand Down
Loading