Skip to content

Commit

Permalink
feat(ui): Enhance the oauth provider button widget by showing error t…
Browse files Browse the repository at this point in the history 
…ext underneath. (#8032)
  • Loading branch information
@lesnitsky
lesnitsky committed Feb 15, 2022
1 parent 2e93a67 commit 2b47f5a
Showing 1 changed file with 130 additions and 103 deletions.
233 changes: 130 additions & 103 deletions packages/flutterfire_ui/lib/src/auth/widgets/internal/oauth_provider_button.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ class OAuthProviderButtonContent extends StatelessWidget {

@override
Widget build(BuildContext context) {
bool isLoading = AuthState.of(context) is SigningIn;
final isLoading = AuthState.of(context) is SigningIn;
late Widget content;

if (isLoading) {
Expand Down Expand Up @@ -88,6 +88,23 @@ mixin SignInWithOAuthProviderMixin {
}
}

class _ErrorListener extends StatelessWidget {
const _ErrorListener({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
final state = AuthState.of(context);
if (state is AuthFailed) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 4),
child: ErrorText(exception: state.exception),
);
}

return const SizedBox.shrink();
}
}

class OAuthProviderButton extends StatelessWidget
with SignInWithOAuthProviderMixin {
final double size;
Expand Down Expand Up @@ -128,53 +145,58 @@ class OAuthProviderButton extends StatelessWidget
action: action,
auth: auth,
config: providerConfig,
child: Container(
margin: EdgeInsets.symmetric(vertical: margin),
child: CupertinoTheme(
data: CupertinoThemeData(
primaryColor: style.backgroundColor,
),
child: Builder(
builder: (context) => CupertinoButton.filled(
padding: EdgeInsets.zero,
borderRadius: BorderRadius.circular(borderRadius),
child: SizedBox(
height: _height,
child: Row(
children: [
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(iconBorderRadius),
bottomLeft: Radius.circular(iconBorderRadius),
),
child: SizedBox(
width: _height,
height: _height,
child: SvgPicture.asset(
style.iconSrc,
package: 'flutterfire_ui',
width: size,
height: size,
child: Column(
children: [
Container(
margin: EdgeInsets.symmetric(vertical: margin),
child: CupertinoTheme(
data: CupertinoThemeData(
primaryColor: style.backgroundColor,
),
child: Builder(
builder: (context) => CupertinoButton.filled(
padding: EdgeInsets.zero,
borderRadius: BorderRadius.circular(borderRadius),
child: SizedBox(
height: _height,
child: Row(
children: [
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(iconBorderRadius),
bottomLeft: Radius.circular(iconBorderRadius),
),
child: SizedBox(
width: _height,
height: _height,
child: SvgPicture.asset(
style.iconSrc,
package: 'flutterfire_ui',
width: size,
height: size,
),
),
),
),
),
Expanded(
child: OAuthProviderButtonContent(
label: providerConfig.getLabel(l),
style: style,
size: size,
),
Expanded(
child: OAuthProviderButtonContent(
label: providerConfig.getLabel(l),
style: style,
size: size,
),
),
],
),
],
),
onPressed: () {
if (onTap != null) onTap!.call();
signIn(context);
},
),
),
onPressed: () {
if (onTap != null) onTap!.call();
signIn(context);
},
),
),
),
const _ErrorListener(),
],
),
);
}
Expand All @@ -183,73 +205,78 @@ class OAuthProviderButton extends StatelessWidget
action: action,
auth: auth,
config: providerConfig,
child: Container(
margin: EdgeInsets.symmetric(vertical: margin),
child: Stack(
children: [
Material(
elevation: 1,
color: style.backgroundColor,
borderRadius: BorderRadius.circular(borderRadius),
child: Container(
decoration: BoxDecoration(
border: Border.all(color: style.backgroundColor),
child: Column(
children: [
Container(
margin: EdgeInsets.symmetric(vertical: margin),
child: Stack(
children: [
Material(
elevation: 1,
color: style.backgroundColor,
borderRadius: BorderRadius.circular(borderRadius),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(iconBorderRadius),
child: SizedBox(
height: _height,
child: Row(
children: [
SizedBox(
width: _height,
height: _height,
child: SvgPicture.asset(
style.iconSrc,
package: 'flutterfire_ui',
width: size,
height: size,
),
),
Expanded(
child: OAuthProviderButtonContent(
label: providerConfig.getLabel(l),
style: style,
size: size,
),
child: Container(
decoration: BoxDecoration(
border: Border.all(color: style.backgroundColor),
borderRadius: BorderRadius.circular(borderRadius),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(iconBorderRadius),
child: SizedBox(
height: _height,
child: Row(
children: [
SizedBox(
width: _height,
height: _height,
child: SvgPicture.asset(
style.iconSrc,
package: 'flutterfire_ui',
width: size,
height: size,
),
),
Expanded(
child: OAuthProviderButtonContent(
label: providerConfig.getLabel(l),
style: style,
size: size,
),
),
],
),
],
),
),
),
),
),
),
Positioned.fill(
child: OAuthProviderButtonTapHandler(
borderRadius: borderRadius,
onTap: onTap != null ? (context) => onTap!() : signIn,
),
Positioned.fill(
child: OAuthProviderButtonTapHandler(
borderRadius: borderRadius,
onTap: onTap != null ? (context) => onTap!() : signIn,
),
),
Builder(
builder: (context) {
bool isLoading = AuthState.of(context) is SigningIn;

if (isLoading) {
return Positioned.fill(
child: LoadingIndicator(
size: size,
borderWidth: borderWidth,
color: style.color,
),
);
} else {
return const SizedBox.shrink();
}
},
)
],
),
Builder(
builder: (context) {
bool isLoading = AuthState.of(context) is SigningIn;

if (isLoading) {
return Positioned.fill(
child: LoadingIndicator(
size: size,
borderWidth: borderWidth,
color: style.color,
),
);
} else {
return const SizedBox.shrink();
}
},
)
],
),
),
const _ErrorListener(),
],
),
);
}
Expand Down

0 comments on commit 2b47f5a

Please sign in to comment.