fix(firebase_ui_oauth): fix OAuth provider buttons paddings (#9991)

firebase · Dec 1, 2022 · cadf2f2 · cadf2f2
1 parent f746d5d
commit cadf2f2
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 2 deletions.
diff --git a/packages/firebase_ui_auth/lib/firebase_ui_auth.dart b/packages/firebase_ui_auth/lib/firebase_ui_auth.dart
@@ -61,6 +61,7 @@ export 'src/widgets/reauthenticate_dialog.dart';
 export 'src/widgets/different_method_sign_in_dialog.dart';
 export 'src/widgets/email_sign_up_dialog.dart';
 export 'src/widgets/email_link_sign_in_button.dart';
+export 'src/widgets/layout_flow_aware_padding.dart';
 
 export 'src/views/login_view.dart';
 export 'src/views/phone_input_view.dart';

diff --git a/packages/firebase_ui_auth/lib/src/widgets/layout_flow_aware_padding.dart b/packages/firebase_ui_auth/lib/src/widgets/layout_flow_aware_padding.dart
@@ -0,0 +1,56 @@
+import 'package:flutter/widgets.dart';
+
+/// Padding widget that takes into account current layout flow.
+/// If nearest ancestor is [Row] (or [Flex] with [Flex.direction] equal to
+/// [Axis.horizontal]) – horizontal paddings are ignored.
+/// Otherwise vertical paddings are ignored.
+class LayoutFlowAwarePadding extends StatelessWidget {
+  final Widget child;
+  final EdgeInsets padding;
+  const LayoutFlowAwarePadding({
+    Key? key,
+    required this.child,
+    required this.padding,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    Axis? axis;
+
+    context.visitAncestorElements((element) {
+      if (element.widget is Row) {
+        axis = Axis.horizontal;
+        return false;
+      } else if (element.widget is Column) {
+        axis = Axis.vertical;
+        return false;
+      } else if (element.widget is Flex) {
+        axis = (element.widget as Flex).direction;
+        return false;
+      }
+
+      return true;
+    });
+
+    EdgeInsets finalPadding;
+
+    if (axis == null) {
+      finalPadding = padding;
+    } else if (axis == Axis.horizontal) {
+      finalPadding = EdgeInsets.only(
+        left: padding.left,
+        right: padding.right,
+      );
+    } else {
+      finalPadding = EdgeInsets.only(
+        top: padding.top,
+        bottom: padding.bottom,
+      );
+    }
+
+    return Padding(
+      padding: finalPadding,
+      child: child,
+    );
+  }
+}
diff --git a/packages/firebase_ui_oauth/lib/src/oauth_provider_button_base.dart b/packages/firebase_ui_oauth/lib/src/oauth_provider_button_base.dart
@@ -169,7 +169,7 @@ class _OAuthProviderButtonBaseState extends State<OAuthProviderButtonBase>
   ) {
     final br = BorderRadius.circular(borderRadius);
 
-    return Padding(
+    return LayoutFlowAwarePadding(
       padding: EdgeInsets.all(margin),
       child: CupertinoTheme(
         data: CupertinoThemeData(
@@ -488,7 +488,7 @@ class _ButtonContainer extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
+    return LayoutFlowAwarePadding(
       padding: EdgeInsets.all(margin),
       child: SizedBox(
         height: height,

diff --git a/packages/firebase_ui_oauth/test/flutterfire_ui_oauth_test.dart b/packages/firebase_ui_oauth/test/flutterfire_ui_oauth_test.dart
@@ -1,4 +1,5 @@
 import 'package:firebase_auth/firebase_auth.dart' show FirebaseAuth;
+import 'package:firebase_ui_auth/firebase_ui_auth.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:flutter_test/flutter_test.dart';
@@ -138,5 +139,27 @@ void main() {
 
       expect(iconFinder, findsOneWidget);
     });
+
+    testWidgets('has layout flow aware padding', (tester) async {
+      await tester.pumpWidget(DefaultAssetBundle(
+        bundle: FakeAssetBundle(),
+        child: MaterialApp(
+          home: Scaffold(
+            body: Row(
+              children: [
+                OAuthProviderButtonBase(
+                  provider: provider,
+                  auth: FakeAuth(),
+                  label: 'Sign in with Fake provider',
+                  loadingIndicator: const CircularProgressIndicator(),
+                )
+              ],
+            ),
+          ),
+        ),
+      ));
+
+      expect(find.byType(LayoutFlowAwarePadding), findsOneWidget);
+    });
   });
 }