fix(ui_auth): fix PhoneInputScreen layout (#10227)

firebase · Jan 9, 2023 · 7d81786 · 7d81786
1 parent 6380a27
commit 7d81786
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 41 deletions.
diff --git a/packages/firebase_ui_auth/lib/src/screens/phone_input_screen.dart b/packages/firebase_ui_auth/lib/src/screens/phone_input_screen.dart
@@ -119,6 +119,7 @@ class PhoneInputScreen extends StatelessWidget {
           child: Padding(
             padding: const EdgeInsets.all(20),
             child: Column(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
               children: [
                 PhoneInputView(
                   auth: auth,
@@ -129,6 +130,7 @@ class PhoneInputScreen extends StatelessWidget {
                   multiFactorSession: multiFactorSession,
                   mfaHint: mfaHint,
                 ),
+                const SizedBox(height: 8),
                 UniversalButton(
                   text: l.goBackButtonLabel,
                   variant: ButtonVariant.text,

diff --git a/packages/firebase_ui_auth/lib/src/widgets/phone_input.dart b/packages/firebase_ui_auth/lib/src/widgets/phone_input.dart
@@ -287,49 +287,52 @@ class PhoneInputState extends State<PhoneInput> {
           const SizedBox(height: 16),
           Directionality(
             textDirection: TextDirection.ltr,
-            child: Row(
-              children: [
-                SizedBox(
-                  width: 90,
-                  child: UniversalTextFormField(
-                    autofillHints: const [
-                      AutofillHints.telephoneNumberCountryCode
-                    ],
-                    controller: countryController,
-                    prefix: const Text('+'),
-                    placeholder: l.countryCode,
-                    inputFormatters: [
-                      FilteringTextInputFormatter.digitsOnly,
-                    ],
-                    keyboardType: TextInputType.phone,
-                    validator: NotEmpty('').validate,
-                    onSubmitted: (_) {
-                      numberFocusNode.requestFocus();
-                    },
+            child: IntrinsicHeight(
+              child: Row(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  SizedBox(
+                    width: 90,
+                    child: UniversalTextFormField(
+                      autofillHints: const [
+                        AutofillHints.telephoneNumberCountryCode
+                      ],
+                      controller: countryController,
+                      prefix: const Text('+'),
+                      placeholder: l.countryCode,
+                      inputFormatters: [
+                        FilteringTextInputFormatter.digitsOnly,
+                      ],
+                      keyboardType: TextInputType.phone,
+                      validator: NotEmpty('').validate,
+                      onSubmitted: (_) {
+                        numberFocusNode.requestFocus();
+                      },
+                    ),
                   ),
-                ),
-                const SizedBox(width: 8),
-                Expanded(
-                  child: UniversalTextFormField(
-                    autofillHints: const [
-                      AutofillHints.telephoneNumberNational
-                    ],
-                    autofocus: true,
-                    focusNode: numberFocusNode,
-                    controller: numberController,
-                    placeholder: l.phoneInputLabel,
-                    validator: Validator.validateAll([
-                      NotEmpty(l.phoneNumberIsRequiredErrorText),
-                      PhoneValidator(l.phoneNumberInvalidErrorText),
-                    ]),
-                    onSubmitted: _onSubmitted,
-                    inputFormatters: [
-                      FilteringTextInputFormatter.digitsOnly,
-                    ],
-                    keyboardType: TextInputType.phone,
+                  const SizedBox(width: 8),
+                  Expanded(
+                    child: UniversalTextFormField(
+                      autofillHints: const [
+                        AutofillHints.telephoneNumberNational
+                      ],
+                      autofocus: true,
+                      focusNode: numberFocusNode,
+                      controller: numberController,
+                      placeholder: l.phoneInputLabel,
+                      validator: Validator.validateAll([
+                        NotEmpty(l.phoneNumberIsRequiredErrorText),
+                        PhoneValidator(l.phoneNumberInvalidErrorText),
+                      ]),
+                      onSubmitted: _onSubmitted,
+                      inputFormatters: [
+                        FilteringTextInputFormatter.digitsOnly,
+                      ],
+                      keyboardType: TextInputType.phone,
+                    ),
                   ),
-                ),
-              ],
+                ],
+              ),
             ),
           ),
         ],