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.