OAuthProviderIconButtonWidget shapes

[bagintz]

would the team be open to a PR with options to use different shaped buttons (circles for instance)?

[darshankawar]

@bagintz Can you please elaborate on your proposal ? Are you referring to flutterfire_ui plugin and potential changes in it ?

[bagintz]

@darshankawar Yes, the flutterfire_ui package. I thought I had used a FirebaseUI package for a different framework (maybe Android) previously that gave you some flexibility over the login button shape. Right now it is the squircle, I thought it would be nice to have an option for square and circle also. I realize I can do this myself with a custom OAuthController and my own design, but using the GoogleSignInIconButton is very handy.

The PR would introduce a shape option to the OAuthProviderIconButton which would be (?) based on a new enum of IconButtonShape.squircle, IconButtonShape.circle or IconButtonShape.square. These would trigger a switch statement where it would return the correct shape (i.e. currently ClipRRect for IconButtonShape.squircle).

Alternately, it could take a custom container too that just wrapped the SvgPicture.asset.

??

[darshankawar]

Thanks for the details. I'll keep it open and label it as a proposal for the team to look into.

[lesnitsky]

@bagintz are you still willing to contribute this functionality?

This should be relatively straightforward to implement:

diff --git a/packages/flutterfire_ui/lib/src/auth/widgets/internal/oauth_provider_button.dart b/packages/flutterfire_ui/lib/src/auth/widgets/internal/oauth_provider_button.dart
index 0026a0b6..35578d50 100644
--- a/packages/flutterfire_ui/lib/src/auth/widgets/internal/oauth_provider_button.dart
+++ b/packages/flutterfire_ui/lib/src/auth/widgets/internal/oauth_provider_button.dart
@@ -398,16 +398,15 @@ class OAuthProviderIconButton extends StatelessWidget
         width: size,
         height: size,
         margin: EdgeInsets.all(size / 10),
-        decoration: BoxDecoration(
-          color: style.backgroundColor,
-          borderRadius: BorderRadius.circular(size / 6),
-        ),
         child: Stack(
           children: [
-            ClipRRect(
-              borderRadius: borderRadius,
-              child: Builder(
-                builder: _contentBuilder(borderRadius, style),
+            ClipPath(
+              clipper: ShapeBorderClipper(shape: shape),
+              child: Container(
+                color: style.backgroundColor,
+                child: Builder(
+                  builder: _contentBuilder(borderRadius, style),
+                ),
               ),
             ),
             Positioned.fill(

I'd stick with a built in ShapeBorder abstraction instead of enum.

I'm not sure if squircle shape border exists, but that might worth contributing to the flutter itself

[bagintz]

@lesnitsky Yes, I would like to contribute, I don't think I can do it this week, but I will check it out and get something submitted in the next couple weeks.

[github-actions[bot]]

Hello 👋, to help manage issues we automatically close stale issues.

This issue has been automatically marked as stale because it has not had activity for quite some time. Has this issue been fixed, or does it still require attention?

This issue will be closed in 15 days if no further activity occurs.

Thank you for your contributions.