From 60ff1dfe32abe6780fc5aafad63606b00af3f3e2 Mon Sep 17 00:00:00 2001 From: Andrei Lesnitsky Date: Mon, 27 Mar 2023 12:47:08 +0200 Subject: [PATCH] feat(ui_shared): pass platform-specific icons and colors explicitly (#10655) --- .../lib/src/screens/profile_screen.dart | 3 +- .../src/widgets/delete_account_button.dart | 7 +-- .../widgets/email_link_sign_in_button.dart | 4 +- .../lib/src/widgets/sign_out_button.dart | 4 +- .../lib/src/loading_button.dart | 26 +++++++---- .../lib/src/universal_button.dart | 44 +++++++++++-------- 6 files changed, 54 insertions(+), 34 deletions(-) diff --git a/packages/firebase_ui_auth/lib/src/screens/profile_screen.dart b/packages/firebase_ui_auth/lib/src/screens/profile_screen.dart index 1ba3a15b8092..db5f329eaa81 100644 --- a/packages/firebase_ui_auth/lib/src/screens/profile_screen.dart +++ b/packages/firebase_ui_auth/lib/src/screens/profile_screen.dart @@ -417,7 +417,8 @@ class _EmailVerificationBadgeState extends State<_EmailVerificationBadge> { state != EmailVerificationState.sending) UniversalButton( variant: ButtonVariant.text, - color: Theme.of(context).colorScheme.error, + materialColor: Theme.of(context).colorScheme.error, + cupertinoColor: CupertinoColors.destructiveRed, text: 'Dismiss', onPressed: () { setState(service.dismiss); diff --git a/packages/firebase_ui_auth/lib/src/widgets/delete_account_button.dart b/packages/firebase_ui_auth/lib/src/widgets/delete_account_button.dart index f27a4d94f497..9aa0b55e054a 100644 --- a/packages/firebase_ui_auth/lib/src/widgets/delete_account_button.dart +++ b/packages/firebase_ui_auth/lib/src/widgets/delete_account_button.dart @@ -78,15 +78,16 @@ class _DeleteAccountButtonState extends State { @override Widget build(BuildContext context) { final l = FirebaseUILocalizations.labelsOf(context); - bool isCupertino = CupertinoUserInterfaceLevel.maybeOf(context) != null; final themeData = Theme.of(context); final colorScheme = themeData.colorScheme; return LoadingButton( isLoading: _isLoading, - color: isCupertino ? CupertinoColors.destructiveRed : colorScheme.error, - icon: isCupertino ? CupertinoIcons.delete : Icons.delete, + cupertinoColor: CupertinoColors.destructiveRed, + materialColor: colorScheme.error, + cupertinoIcon: CupertinoIcons.delete, + materialIcon: Icons.delete, label: l.deleteAccount, labelColor: colorScheme.onError, onTap: _deleteAccount, diff --git a/packages/firebase_ui_auth/lib/src/widgets/email_link_sign_in_button.dart b/packages/firebase_ui_auth/lib/src/widgets/email_link_sign_in_button.dart index 7a9cfe9476a8..01edc7f2a698 100644 --- a/packages/firebase_ui_auth/lib/src/widgets/email_link_sign_in_button.dart +++ b/packages/firebase_ui_auth/lib/src/widgets/email_link_sign_in_button.dart @@ -35,12 +35,12 @@ class EmailLinkSignInButton extends StatelessWidget { @override Widget build(BuildContext context) { - final isCupertino = CupertinoUserInterfaceLevel.maybeOf(context) != null; final l = FirebaseUILocalizations.labelsOf(context); return UniversalButton( text: l.emailLinkSignInButtonLabel, - icon: isCupertino ? CupertinoIcons.link : Icons.link, + cupertinoIcon: CupertinoIcons.link, + materialIcon: Icons.link, onPressed: () { final action = FirebaseUIAction.ofType(context); if (action != null) { diff --git a/packages/firebase_ui_auth/lib/src/widgets/sign_out_button.dart b/packages/firebase_ui_auth/lib/src/widgets/sign_out_button.dart index ba7b5a02bb1c..7e7dec51148b 100644 --- a/packages/firebase_ui_auth/lib/src/widgets/sign_out_button.dart +++ b/packages/firebase_ui_auth/lib/src/widgets/sign_out_button.dart @@ -29,7 +29,6 @@ class SignOutButton extends StatelessWidget { @override Widget build(BuildContext context) { final l = FirebaseUILocalizations.labelsOf(context); - final isCupertino = CupertinoUserInterfaceLevel.maybeOf(context) != null; return UniversalButton( text: l.signOutButtonText, @@ -37,7 +36,8 @@ class SignOutButton extends StatelessWidget { context: context, auth: auth, ), - icon: isCupertino ? CupertinoIcons.arrow_right_circle : Icons.logout, + cupertinoIcon: CupertinoIcons.arrow_right_circle, + materialIcon: Icons.logout, variant: variant, ); } diff --git a/packages/firebase_ui_shared/lib/src/loading_button.dart b/packages/firebase_ui_shared/lib/src/loading_button.dart index f8b917ea7a38..81f4d5d5cd09 100644 --- a/packages/firebase_ui_shared/lib/src/loading_button.dart +++ b/packages/firebase_ui_shared/lib/src/loading_button.dart @@ -55,11 +55,17 @@ class LoadingButton extends StatelessWidget { /// The text to display in the button. final String label; - /// The icon to display in the button. - final IconData? icon; + /// The icon to display in the button under [MaterialApp]. + final IconData? materialIcon; - /// The color of the button background. - final Color? color; + /// The icon to display in the button under [CupertinoApp]. + final IconData? cupertinoIcon; + + /// The color of the button background under [MaterialApp]. + final Color? materialColor; + + /// The color of the button background under [CupertinoApp]. + final Color? cupertinoColor; /// The color of the button content. final Color? labelColor; @@ -75,8 +81,10 @@ class LoadingButton extends StatelessWidget { required this.label, required this.onTap, this.isLoading = false, - this.icon, - this.color, + this.materialIcon, + this.cupertinoIcon, + this.materialColor, + this.cupertinoColor, this.labelColor, this.variant = ButtonVariant.outlined, }) : super(key: key); @@ -99,8 +107,10 @@ class LoadingButton extends StatelessWidget { ); return UniversalButton( - color: color, - icon: icon, + materialColor: materialColor, + cupertinoColor: cupertinoColor, + materialIcon: materialIcon, + cupertinoIcon: cupertinoIcon, contentColor: contentColor, onPressed: onTap, variant: variant, diff --git a/packages/firebase_ui_shared/lib/src/universal_button.dart b/packages/firebase_ui_shared/lib/src/universal_button.dart index 5ce84dc9dc0a..d8a07d91450a 100644 --- a/packages/firebase_ui_shared/lib/src/universal_button.dart +++ b/packages/firebase_ui_shared/lib/src/universal_button.dart @@ -34,8 +34,11 @@ class UniversalButton extends PlatformWidget { /// The child to display in the button. final Widget? child; - /// The icon to display in the button. - final IconData? icon; + /// The icon to display in the button under [MaterialApp]. + final IconData? materialIcon; + + /// The icon to display in the button under [CupertinoApp]. + final IconData? cupertinoIcon; /// Defines the order of the icon and the label. /// Icon will be placed on the left if [TextDirection.ltr] and on the right @@ -46,8 +49,11 @@ class UniversalButton extends PlatformWidget { /// If not provided, [ButtonVariant.filled] will be used. final ButtonVariant variant; - /// The color of the button background. - final Color? color; + /// The color of the button background under [MaterialApp]. + final Color? materialColor; + + /// The color of the button background under [CupertinoApp]. + final Color? cupertinoColor; /// The color of the button content. final Color? contentColor; @@ -57,10 +63,12 @@ class UniversalButton extends PlatformWidget { this.text, this.child, this.onPressed, - this.icon, + this.materialIcon, + this.cupertinoIcon, this.direction = TextDirection.ltr, this.variant = ButtonVariant.filled, - this.color, + this.materialColor, + this.cupertinoColor, this.contentColor, }) : assert(text != null || child != null), super(key: key); @@ -73,9 +81,9 @@ class UniversalButton extends PlatformWidget { textDirection: direction, mainAxisAlignment: MainAxisAlignment.center, children: [ - if (icon != null) ...[ + if (cupertinoIcon != null) ...[ if (direction == TextDirection.rtl) const SizedBox(width: 8), - Icon(icon, size: 20, color: contentColor), + Icon(cupertinoIcon, size: 20, color: contentColor), if (direction == TextDirection.ltr) const SizedBox(width: 8), ], this.child ?? Text(text!), @@ -95,9 +103,9 @@ class UniversalButton extends PlatformWidget { ); } - if (color != null) { + if (cupertinoColor != null) { return CupertinoTheme( - data: CupertinoTheme.of(context).copyWith(primaryColor: color), + data: CupertinoTheme.of(context).copyWith(primaryColor: cupertinoColor), child: button, ); } else { @@ -111,31 +119,31 @@ class UniversalButton extends PlatformWidget { ButtonStyle? style; - if (color != null) { + if (materialColor != null) { MaterialStateColor? foregroundColor; MaterialStateColor? backgroundColor; if (variant == ButtonVariant.text) { - foregroundColor = MaterialStateColor.resolveWith((_) => color!); + foregroundColor = MaterialStateColor.resolveWith((_) => materialColor!); } else { foregroundColor = MaterialStateColor.resolveWith((_) => contentColor!); - backgroundColor = MaterialStateColor.resolveWith((_) => color!); + backgroundColor = MaterialStateColor.resolveWith((_) => materialColor!); } style = ButtonStyle( foregroundColor: foregroundColor, backgroundColor: backgroundColor, overlayColor: MaterialStateColor.resolveWith( - (states) => color!.withAlpha(20), + (states) => materialColor!.withAlpha(20), ), ); } - if (icon != null) { + if (materialIcon != null) { switch (variant) { case ButtonVariant.text: return TextButton.icon( - icon: Icon(icon, color: contentColor), + icon: Icon(materialIcon, color: contentColor), onPressed: onPressed, label: child, style: style, @@ -143,14 +151,14 @@ class UniversalButton extends PlatformWidget { case ButtonVariant.filled: return ElevatedButton.icon( onPressed: onPressed, - icon: Icon(icon, color: contentColor), + icon: Icon(materialIcon, color: contentColor), label: child, style: style, ); case ButtonVariant.outlined: return OutlinedButton.icon( onPressed: onPressed, - icon: Icon(icon, color: contentColor), + icon: Icon(materialIcon, color: contentColor), label: child, style: style, );