fix(ui_oauth): fix sign in button layout when width is resized #548

radomir9720 · 2025-09-26T15:55:08Z

Description

This PR fixes the sign in button layout.

Old layout

2025-09-26.16.03.26.mov

New layout

default.mov

Tests

Unit ✅

radomir@MacBook-Air-Radomir FirebaseUI-Flutter % melos run test:unit:all
melos run test:unit:all
  └> melos run test:unit --no-select && \
     melos run test:unit:web --no-select
     └> RUNNING

Select a package to run the test:unit:all script:

1) * [Default - Press Enter]
2) firebase_ui_auth
3) firebase_ui_firestore
4) firebase_ui_localizations
5) firebase_ui_oauth
6) firebase_ui_shared
7) firebase_ui_storage


✔ Enter your choice 5
melos run test:unit
  └> melos exec -c 6 --fail-fast -- "flutter test"
     └> RUNNING

$ melos exec
  └> flutter test
     └> RUNNING (in 1 packages)

--------------------------------------------------------------------------------------------------------------------------
firebase_ui_oauth:
00:00 +0: loading /Users/radomir/StudioProjects/FirebaseUI-Flutter/packages/firebase_ui_oauth/test/flutterfire_ui_oauth_te00:01 +0: loading /Users/radomir/StudioProjects/FirebaseUI-Flutter/packages/firebase_ui_oauth/test/flutterfire_ui_oauth_te00:01 +0: OAuthProviderButton renders label                                                                               00:01 +1: OAuthProviderButton renders label                                                                               00:01 +1: OAuthProviderButton applies background color from style                                                         00:01 +2: OAuthProviderButton applies background color from style                                                         00:01 +2: OAuthProviderButton applies text color from style                                                               00:01 +3: OAuthProviderButton applies text color from style                                                               00:01 +3: OAuthProviderButton applies dark theme background color from style                                              00:01 +4: OAuthProviderButton applies dark theme background color from style                                              00:01 +4: OAuthProviderButton applies dark theme text color from style                                                    00:01 +5: OAuthProviderButton applies dark theme text color from style                                                    00:01 +5: OAuthProviderButton renders an icon                                                                             00:01 +6: OAuthProviderButton renders an icon                                                                             00:01 +6: OAuthProviderButton has layout flow aware padding                                                               00:01 +7: OAuthProviderButton has layout flow aware padding                                                               00:01 +7: All tests passed!                                                                                                                                                                            
firebase_ui_oauth: SUCCESS
--------------------------------------------------------------------------------------------------------------------------

$ melos exec
  └> flutter test
     └> SUCCESS

melos run test:unit
  └> melos exec -c 6 --fail-fast -- "flutter test"
     └> SUCCESS
melos run test:unit:web
  └> melos exec -c 1 --fail-fast -- "flutter test --platform=chrome"
     └> RUNNING

$ melos exec
  └> flutter test --platform=chrome
     └> RUNNING (in 1 packages)

--------------------------------------------------------------------------------------------------------------------------
firebase_ui_oauth:
00:00 +0: loading /Users/radomir/StudioProjects/FirebaseUI-Flutter/packages/firebase_ui_oauth/test/flutterfire_ui_oauth_te00:01 +0: loading /Users/radomir/StudioProjects/FirebaseUI-Flutter/packages/firebase_ui_oauth/test/flutterfire_ui_oauth_te00:02 +0: loading /Users/radomir/StudioProjects/FirebaseUI-Flutter/packages/firebase_ui_oauth/test/flutterfire_ui_oauth_te00:03 +0: loading /Users/radomir/StudioProjects/FirebaseUI-Flutter/packages/firebase_ui_oauth/test/flutterfire_ui_oauth_te00:03 +0: OAuthProviderButton renders label                                                                               00:03 +1: OAuthProviderButton renders label                                                                               00:03 +1: OAuthProviderButton applies background color from style                                                         00:03 +2: OAuthProviderButton applies background color from style                                                         00:03 +2: OAuthProviderButton applies text color from style                                                               00:03 +3: OAuthProviderButton applies text color from style                                                               00:03 +3: OAuthProviderButton applies dark theme background color from style                                              00:03 +4: OAuthProviderButton applies dark theme background color from style                                              00:03 +4: OAuthProviderButton applies dark theme text color from style                                                    00:03 +5: OAuthProviderButton applies dark theme text color from style                                                    00:03 +5: OAuthProviderButton renders an icon                                                                             00:03 +6: OAuthProviderButton renders an icon                                                                             00:03 +6: OAuthProviderButton has layout flow aware padding                                                               00:03 +7: OAuthProviderButton has layout flow aware padding                                                               00:03 +7: All tests passed!                                                                                                                                                                            
firebase_ui_oauth: SUCCESS
--------------------------------------------------------------------------------------------------------------------------

$ melos exec
  └> flutter test --platform=chrome
     └> SUCCESS

melos run test:unit:web
  └> melos exec -c 1 --fail-fast -- "flutter test --platform=chrome"
     └> SUCCESS

melos run test:unit:all
  └> melos run test:unit --no-select && \
     melos run test:unit:web --no-select
     └> SUCCESS

iOS (e2e) ✅

radomir@MacBook-Air-Radomir FirebaseUI-Flutter % melos test:e2e -- 5FEAAA76-753C-4D80-9F96-76B73D6F7EFF
melos run test:e2e
  └> cd tests && flutter test integration_test/firebase_ui_test.dart -r github -d 5FEAAA76-753C-4D80-9F96-76B73D6F7EFF
     └> RUNNING


Running Xcode build...                                          
Xcode build done.                                           25,1s
✅ Firebase UI Auth EmailForm registers new user
✅ Firebase UI Auth EmailForm shows wrong password error
✅ Firebase UI Auth EmailForm signs in the user
❎ Firebase UI Auth EmailForm links email and password when auth action is link (skipped)
✅ Firebase UI Auth EmailLinkSignInView validates email
✅ Firebase UI Auth EmailLinkSignInView sends a link to an email
✅ Firebase UI Auth getControllerForType getControllerForState returns correct controller type
✅ Firebase UI Auth getControllerForType throws a StateError if used outside of the FirebaseUIAction
✅ Firebase UI Auth PhoneInputScreen allows to pick country code
✅ Firebase UI Auth PhoneInputScreen validates phone number
✅ Firebase UI Auth PhoneInputScreen sends sms verification code when next is clicked
✅ Firebase UI Auth PhoneInputScreen opens sms verification screen when code is requested
✅ Firebase UI Auth SMSCodeInputScreen allows to go back to phone input screen
✅ Firebase UI Auth SMSCodeInputScreen shows error message if invalid code was entered
✅ Firebase UI Auth SMSCodeInputScreen signs in if the code is correct
✅ Firebase UI Auth showReauthenticateDialog can reauthenticate using phone number
✅ Firebase UI Auth Reauthenticate dialog doesn't have an overflow when keyboard is visible
✅ Firebase UI OAuth Apple Sign in with Apple button has a correct button label
✅ Firebase UI OAuth Apple Sign in with Apple button calls sign in when tapped
✅ Firebase UI OAuth Apple Sign in with Apple button shows loading indicator when sign in is in progress
✅ Firebase UI OAuth Apple Sign in with Apple button signs the user in
✅ Firebase UI OAuth Apple AppleProvider has default scopes
✅ Firebase UI OAuth Apple AppleProvider provides a way to pass custom scopes
✅ Firebase UI OAuth Facebook Sign in with Facebook button has a correct button label
✅ Firebase UI OAuth Facebook Sign in with Facebook button calls sign in when tapped
✅ Firebase UI OAuth Facebook Sign in with Facebook button shows loading indicator when sign in is in progress
✅ Firebase UI OAuth Facebook Sign in with Facebook button signs the user in
✅ Firebase UI OAuth Google Sign in with Google button has a correct button label
✅ Firebase UI OAuth Google Sign in with Google button calls sign in when tapped
✅ Firebase UI OAuth Google Sign in with Google button shows loading indicator when sign in is in progress
✅ Firebase UI OAuth Google Sign in with Google button signs the user in
✅ Firebase UI OAuth Google Sign in with Google button works standalone
✅ Firebase UI OAuth Twitter Sign in with Twitter button has a correct button label
✅ Firebase UI OAuth Twitter Sign in with Twitter button calls sign in when tapped
✅ Firebase UI OAuth Twitter Sign in with Twitter button shows loading indicator when sign in is in progress
✅ Firebase UI OAuth Twitter Sign in with Twitter button signs the user in
❎ Firebase UI Real-time Database DatabaseListViewBuilder Allows specifying custom error handler (skipped)
✅ Firebase UI Real-time Database DatabaseListViewBuilder Allows specifying custom loading handler
✅ Firebase UI Real-time Database DatabaseListViewBuilder By default, shows a progress indicator when loading
✅ Firebase UI Real-time Database DatabaseListViewBuilder By default, ignore errors
✅ Firebase UI Real-time Database DatabaseListViewBuilder When reaching the end of the list, loads more items
✅ Firebase UI Real-time Database DatabaseListViewBuilder Allows reversing the database query
✅ Firebase UI Firestore FirestoreListViewBuilder Allows specifying custom error handler
✅ Firebase UI Firestore FirestoreListViewBuilder Allows specifying custom loading handler
✅ Firebase UI Firestore FirestoreListViewBuilder By default, shows a progress indicator when loading
✅ Firebase UI Firestore FirestoreListViewBuilder By default, ignore errors
❎ Firebase UI Firestore FirestoreListViewBuilder When reaching the end of the list, loads more items (skipped)

🎉 44 tests passed, 3 skipped.

melos run test:e2e
  └> cd tests && flutter test integration_test/firebase_ui_test.dart -r github -d 5FEAAA76-753C-4D80-9F96-76B73D6F7EFF
     └> SUCCESS

Android (e2e) ✅

radomir@MacBook-Air-Radomir FirebaseUI-Flutter % melos test:e2e -- emulator-5554
melos run test:e2e
  └> cd tests && flutter test integration_test/firebase_ui_test.dart -r github -d emulator-5554
     └> RUNNING


Running Gradle task 'assembleDebug'...                          
Warning: The plugin app_links requires Android SDK version 35 or higher.
For more information about build configuration, see https://flutter.dev/to/review-gradle-config.
Warning: The plugin integration_test requires Android SDK version 35 or higher.
For more information about build configuration, see https://flutter.dev/to/review-gradle-config.
Your project is configured to compile against Android SDK 34, but the following plugin(s) require to be compiled against a higher Android SDK version:

- app_links compiles against Android SDK 35
- integration_test compiles against Android SDK 35
Fix this issue by compiling against the highest Android SDK version (they are backward compatible).
Add the following to /Users/radomir/StudioProjects/FirebaseUI-Flutter/tests/android/app/build.gradle:

    android {
        compileSdk = 35
        ...
    }

Running Gradle task 'assembleDebug'...                             11,8s
✓ Built build/app/outputs/flutter-apk/app-debug.apk
Installing build/app/outputs/flutter-apk/app-debug.apk...        2 129ms
::group::✅ (setUpAll)
Mapping Auth Emulator host "localhost" to "10.0.2.2".
Mapping Firestore Emulator host "localhost" to "10.0.2.2".
Mapping Database Emulator host "localhost" to "10.0.2.2".
::endgroup::
✅ Firebase UI Auth EmailForm registers new user
✅ Firebase UI Auth EmailForm shows wrong password error
✅ Firebase UI Auth EmailForm signs in the user
❎ Firebase UI Auth EmailForm links email and password when auth action is link (skipped)
✅ Firebase UI Auth EmailLinkSignInView validates email
✅ Firebase UI Auth EmailLinkSignInView sends a link to an email
✅ Firebase UI Auth getControllerForType getControllerForState returns correct controller type
✅ Firebase UI Auth getControllerForType throws a StateError if used outside of the FirebaseUIAction
✅ Firebase UI Auth PhoneInputScreen allows to pick country code
✅ Firebase UI Auth PhoneInputScreen validates phone number
✅ Firebase UI Auth PhoneInputScreen sends sms verification code when next is clicked
✅ Firebase UI Auth PhoneInputScreen opens sms verification screen when code is requested
✅ Firebase UI Auth SMSCodeInputScreen allows to go back to phone input screen
✅ Firebase UI Auth SMSCodeInputScreen shows error message if invalid code was entered
✅ Firebase UI Auth SMSCodeInputScreen signs in if the code is correct
✅ Firebase UI Auth showReauthenticateDialog can reauthenticate using phone number
✅ Firebase UI Auth Reauthenticate dialog doesn't have an overflow when keyboard is visible
✅ Firebase UI OAuth Apple Sign in with Apple button has a correct button label
✅ Firebase UI OAuth Apple Sign in with Apple button calls sign in when tapped
✅ Firebase UI OAuth Apple Sign in with Apple button shows loading indicator when sign in is in progress
✅ Firebase UI OAuth Apple Sign in with Apple button signs the user in
✅ Firebase UI OAuth Apple AppleProvider has default scopes
✅ Firebase UI OAuth Apple AppleProvider provides a way to pass custom scopes
✅ Firebase UI OAuth Facebook Sign in with Facebook button has a correct button label
✅ Firebase UI OAuth Facebook Sign in with Facebook button calls sign in when tapped
✅ Firebase UI OAuth Facebook Sign in with Facebook button shows loading indicator when sign in is in progress
✅ Firebase UI OAuth Facebook Sign in with Facebook button signs the user in
✅ Firebase UI OAuth Google Sign in with Google button has a correct button label
✅ Firebase UI OAuth Google Sign in with Google button calls sign in when tapped
✅ Firebase UI OAuth Google Sign in with Google button shows loading indicator when sign in is in progress
✅ Firebase UI OAuth Google Sign in with Google button signs the user in
✅ Firebase UI OAuth Google Sign in with Google button works standalone
✅ Firebase UI OAuth Twitter Sign in with Twitter button has a correct button label
✅ Firebase UI OAuth Twitter Sign in with Twitter button calls sign in when tapped
✅ Firebase UI OAuth Twitter Sign in with Twitter button shows loading indicator when sign in is in progress
✅ Firebase UI OAuth Twitter Sign in with Twitter button signs the user in
✅ Firebase UI Real-time Database DatabaseListViewBuilder Allows specifying custom error handler
✅ Firebase UI Real-time Database DatabaseListViewBuilder Allows specifying custom loading handler
✅ Firebase UI Real-time Database DatabaseListViewBuilder By default, shows a progress indicator when loading
✅ Firebase UI Real-time Database DatabaseListViewBuilder By default, ignore errors
✅ Firebase UI Real-time Database DatabaseListViewBuilder When reaching the end of the list, loads more items
✅ Firebase UI Real-time Database DatabaseListViewBuilder Allows reversing the database query
✅ Firebase UI Firestore FirestoreListViewBuilder Allows specifying custom error handler
✅ Firebase UI Firestore FirestoreListViewBuilder Allows specifying custom loading handler
✅ Firebase UI Firestore FirestoreListViewBuilder By default, shows a progress indicator when loading
✅ Firebase UI Firestore FirestoreListViewBuilder By default, ignore errors
❎ Firebase UI Firestore FirestoreListViewBuilder When reaching the end of the list, loads more items (skipped)

🎉 45 tests passed, 2 skipped.

melos run test:e2e
  └> cd tests && flutter test integration_test/firebase_ui_test.dart -r github -d emulator-5554
     └> SUCCESS

MacOS (e2e) ✅

radomir@MacBook-Air-Radomir tests % flutter test ./integration_test/firebase_ui_test.dart -d macos --dart-define=CI=true
00:01 +0: ... /Users/radomir/StudioProjects/FirebaseUI-Flutter/tests/integration_test/firebase_ui_test.dart             Bu
--- xcodebuild: WARNING: Using the first of multiple matching destinations:
{ platform:macOS, arch:arm64, id:00008132-001059E11121801C, name:My Mac }
{ platform:macOS, arch:x86_64, id:00008132-001059E11121801C, name:My Mac }
/Users/radomir/StudioProjects/FirebaseUI-Flutter/tests/macos/Pods/Pods.xcodeproj: warning: The macOS deployment target 'MACOSX_DEPLOYMENT_TARGET' is set to 10.12, but the range of supported deployment target versions is 10.13 to 15.5.99. (in target 'AppAuth-AppAuthCore_Privacy' from project 'Pods')
/Users/radomir/StudioProjects/FirebaseUI-Flutter/tests/macos/Pods/Pods.xcodeproj: warning: The macOS deployment target 'MACOSX_DEPLOYMENT_TARGET' is set to 10.12, but the range of supported deployment target versions is 10.13 to 15.5.99. (in target 'AppAuth' from project 'Pods')
/Users/radomir/StudioProjects/FirebaseUI-Flutter/tests/macos/Pods/Pods.xcodeproj: warning: The macOS deployment target 'MACOSX_DEPLOYMENT_TARGET' is set to 10.11, but the range of supported deployment target versions is 10.13 to 15.5.99. (in target 'PromisesObjC-FBLPromises_Privacy' from project 'Pods')
/Users/radomir/StudioProjects/FirebaseUI-Flutter/tests/macos/Pods/Pods.xcodeproj: warning: The macOS deployment target 'MACOSX_DEPLOYMENT_TARGET' is set to 10.11, but the range of supported deployment target versions is 10.13 to 15.5.99. (in target 'PromisesObjC' from project 'Pods')
/Users/radomir/StudioProjects/FirebaseUI-Flutter/tests/macos/Pods/Pods.xcodeproj: warning: The macOS deployment target 'MACOSX_DEPLOYMENT_TARGET' is set to 10.12, but the range of supported deployment target versions is 10.13 to 15.5.99. (in target 'GTMSessionFetcher-GTMSessionFetcher_Core_Privacy' from project 'Pods')
/Users/radomir/StudioProjects/FirebaseUI-Flutter/tests/macos/Pods/Pods.xcodeproj: warning: The macOS deployment target 'MACOSX_DEPLOYMENT_TARGET' is set to 10.12, but the range of supported deployment target versions is 10.13 to 15.5.99. (in target 'GTMSessionFetcher-GTMSessionFetcher_Full_Privacy' from project 'Pods')
/Users/radomir/StudioProjects/FirebaseUI-Flutter/tests/macos/Pods/Pods.xcodeproj: warning: The macOS deployment target 'MACOSX_DEPLOYMENT_TARGET' is set to 10.12, but the range of supported deployment target versions is 10.13 to 15.5.99. (in target 'GTMSessionFetcher' from project 'Pods')
/Users/radomir/StudioProjects/FirebaseUI-Flutter/tests/macos/Pods/Pods.xcodeproj: warning: The macOS deployment target 'MACOSX_DEPLOYMENT_TARGET' is set to 10.12, but the range of supported deployment target versions is 10.13 to 15.5.99. (in target 'GTMAppAuth-GTMAppAuth_Privacy' from project 'Pods')
/Users/radomir/StudioProjects/FirebaseUI-Flutter/tests/macos/Pods/Pods.xcodeproj: warning: The macOS deployment target 'MACOSX_DEPLOYMENT_TARGET' is set to 10.12, but the range of supported deployment target versions is 10.13 to 15.5.99. (in target 'GTMAppAuth' from project 'Pods')
warning: no rule to process file '/Users/radomir/.pub-cache/hosted/pub.dev/twitter_login-4.4.2/macos/twitter_login.podspec' of type 'text.script.ruby' for architecture 'arm64' (in target 'twitter_login' from project 'Pods')
Building macOS application...                                           
✓ Built build/macos/Build/Products/Debug/tests.app
00:21 +6 ~13: All tests passed!

Checklist

Before you create this PR confirm that it meets all requirements listed below by checking the relevant checkboxes ([x]).
This will ensure a smooth and quick review process. Updating the pubspec.yaml and changelogs is not required.

I read the Contributor Guide and followed the process outlined there for submitting PRs.
My PR includes unit or integration tests for all changed/updated/fixed behaviors (See Contributor Guide).
All existing and new tests are passing.
I updated/added relevant documentation (doc comments with ///).
The analyzer (melos run analyze) does not report any problems on my PR.
All unit tests pass (melos run test:unit:all doesn't fail).
I read and followed the Flutter Style Guide.
I signed the CLA.
I am willing to follow-up on review comments in a timely manner.

Breaking Change

Does your PR require plugin users to manually update their apps to accommodate your change?

Yes, this is a breaking change.
No, this is not a breaking change.

github-actions · 2025-10-24T16:41:55Z

Hello 👋, this PR has been opened for more than 2 months with no activity on it.

If you think this is a mistake please comment and ping a maintainer to get this merged ASAP! Thanks for contributing!

You have 15 days until this gets closed automatically

radomir9720 · 2025-11-08T17:57:37Z

Hey @russellwheatley, IMHO it would be nice to merge this one.

russellwheatley · 2025-11-11T11:20:46Z

@radomir9720 - could you explain what this PR is needed for? Use images if it is a UI issue

radomir9720 · 2025-11-11T11:28:19Z

@russellwheatley, Have you seen the videos attached to the PR's description?

github-actions · 2025-12-09T11:37:55Z

Hello 👋, this PR has been opened for more than 2 months with no activity on it.

If you think this is a mistake please comment and ping a maintainer to get this merged ASAP! Thanks for contributing!

You have 15 days until this gets closed automatically

radomir9720 added 4 commits September 26, 2025 15:43

fix(ui_oauth): sign in button's layout(made responsive)

54c410d

docs: fix emulators launching command in CONTRIBUTING.md

67d73ab

fix(ui_oauth): pass text style to the RichText explicity

63f41f3

test(ui_oauth): fix a test because the button layout has changed

fbea049

github-actions bot added the Stale Issue with no recent activity label Oct 24, 2025

github-actions bot closed this Nov 8, 2025

russellwheatley removed the Stale Issue with no recent activity label Nov 11, 2025

russellwheatley reopened this Nov 11, 2025

github-actions bot added the Stale Issue with no recent activity label Dec 9, 2025

russellwheatley removed the Stale Issue with no recent activity label Dec 16, 2025

russellwheatley added 2 commits December 16, 2025 15:06

Merge branch 'main' into fix/sign_in_button_layout

3e20686

Merge branch 'main' into fix/sign_in_button_layout

89a35f4

russellwheatley approved these changes Dec 17, 2025

View reviewed changes

russellwheatley changed the title ~~fix(ui_oauth): sign in button layout~~ fix(ui_oauth): fix sign in button layout when width is resized Dec 17, 2025

russellwheatley merged commit 7725166 into firebase:main Dec 17, 2025
15 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(ui_oauth): fix sign in button layout when width is resized #548

fix(ui_oauth): fix sign in button layout when width is resized #548

Uh oh!

radomir9720 commented Sep 26, 2025

Uh oh!

github-actions bot commented Oct 24, 2025

Uh oh!

radomir9720 commented Nov 8, 2025

Uh oh!

russellwheatley commented Nov 11, 2025

Uh oh!

radomir9720 commented Nov 11, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Dec 9, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

fix(ui_oauth): fix sign in button layout when width is resized #548

fix(ui_oauth): fix sign in button layout when width is resized #548

Uh oh!

Conversation

radomir9720 commented Sep 26, 2025

Description

Old layout

New layout

Tests

Checklist

Breaking Change

Uh oh!

github-actions bot commented Oct 24, 2025

Uh oh!

radomir9720 commented Nov 8, 2025

Uh oh!

russellwheatley commented Nov 11, 2025

Uh oh!

radomir9720 commented Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Dec 9, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

radomir9720 commented Nov 11, 2025 •

edited

Loading