🐛 [firebase_ui_auth] Clicking the "sign in" button gives render overflow error

[graemep-nz]

Bug report

Clicking the "sign in" button gives render overflow error See zip file attachment and also github for bug description and relevant files firebase_ui_auth 1.1.10 issues.pdf firebase_ui_auth_stuff/report-13-feb-2023 main.dart - test code derived from flutterfire example code on the internet that now gives a 404 error

The following files are modified versions from firebase_ui_auth V1.1.10 source on pub.dev - they fix some of the issues for me responsive_page.dart universal_text_form_field.dart password_input.dart email_form.dart

Flutter doctor

Run flutter doctor and paste the output below:

Click To Expand

``` Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel stable, 3.7.3, on Microsoft Windows [Version 10.0.22621.1194], locale en-NZ) [√] Windows Version (Installed version of Windows is version 10 or higher) [√] Android toolchain - develop for Android devices (Android SDK version 33.0.1) [√] Chrome - develop for the web [√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.4.1) [!] Android Studio (version 2022.1) X Unable to find bundled Java version. [√] VS Code (version 1.70.2) [√] VS Code, 64-bit edition (version 1.69.2) [√] Connected device (3 available) [√] HTTP Host Availability ! Doctor found issues in 1 category. ```

---

Flutter dependencies

Run flutter pub deps -- --style=compact and paste the output below:

Click To Expand

``` flutter pub deps -- --style=compact Dart SDK 2.19.2 Flutter SDK 3.7.3 firebase_with_flutter 1.0.0+1 dependencies: - cloud_firestore 4.3.2 [cloud_firestore_platform_interface cloud_firestore_web collection firebase_core firebase_core_platform_interface flutter meta] - cupertino_icons 1.0.5 - firebase_auth 4.2.6 [firebase_auth_platform_interface firebase_auth_web firebase_core firebase_core_platform_interface flutter meta] - firebase_auth_platform_interface 6.11.8 [_flutterfire_internals collection firebase_core flutter meta plugin_platform_interface] - firebase_core 2.5.0 [firebase_core_platform_interface firebase_core_web flutter meta] - firebase_core_platform_interface 4.5.3 [collection flutter flutter_test meta plugin_platform_interface] - firebase_ui_auth 1.1.10 [email_validator firebase_auth firebase_core firebase_dynamic_links firebase_ui_localizations firebase_ui_oauth flutter flutter_localizations flutter_svg] - firebase_ui_localizations 1.1.1 [flutter flutter_localizations intl path] - firebase_ui_oauth 1.1.10 [desktop_webview_auth firebase_auth firebase_ui_auth flutter_svg flutter] - firebase_ui_oauth_google 1.0.17 [firebase_auth firebase_ui_oauth flutter google_sign_in] - flutter 0.0.0 [characters collection js material_color_utilities meta vector_math sky_engine] - google_fonts 4.0.3 [flutter http path_provider crypto] - provider 6.0.5 [collection flutter nested] dev dependencies: - flutter_lints 2.0.1 [lints] - flutter_test 0.0.0 [flutter test_api path fake_async clock stack_trace vector_math async boolean_selector characters collection js matcher material_color_utilities meta source_span stream_channel string_scanner term_glyph] transitive dependencies: - _flutterfire_internals 1.0.13 [collection firebase_core firebase_core_platform_interface flutter meta] - async 2.10.0 [collection meta] - boolean_selector 2.1.1 [source_span string_scanner] - characters 1.2.1 - clock 1.1.1 - cloud_firestore_platform_interface 5.10.2 [_flutterfire_internals collection firebase_core flutter meta plugin_platform_interface] - cloud_firestore_web 3.2.2 [_flutterfire_internals cloud_firestore_platform_interface collection firebase_core firebase_core_web flutter flutter_web_plugins js] - collection 1.17.0 - crypto 3.0.2 [typed_data] - desktop_webview_auth 0.0.11 [crypto flutter http flutter_web_plugins plugin_platform_interface] - email_validator 2.1.17 - fake_async 1.3.1 [clock collection] - ffi 2.0.1 - file 6.1.4 [meta path] - firebase_auth_web 5.2.5 [firebase_auth_platform_interface firebase_core firebase_core_web flutter flutter_web_plugins http_parser intl js meta] - firebase_core_web 2.1.1 [firebase_core_platform_interface flutter flutter_web_plugins js meta] - firebase_dynamic_links 5.0.12 [firebase_core firebase_core_platform_interface firebase_dynamic_links_platform_interface flutter meta plugin_platform_interface] - firebase_dynamic_links_platform_interface 0.2.3+27 [_flutterfire_internals firebase_core flutter meta plugin_platform_interface] - flutter_localizations 0.0.0 [flutter intl characters clock collection js material_color_utilities meta path vector_math] - flutter_svg 1.1.6 [flutter meta path_drawing vector_math xml] - flutter_web_plugins 0.0.0 [flutter js characters collection material_color_utilities meta vector_math] - google_sign_in 5.4.4 [flutter google_sign_in_android google_sign_in_ios google_sign_in_platform_interface google_sign_in_web] - google_sign_in_android 6.1.6 [flutter google_sign_in_platform_interface] - google_sign_in_ios 5.5.1 [flutter google_sign_in_platform_interface] - google_sign_in_platform_interface 2.3.0 [flutter plugin_platform_interface quiver] - google_sign_in_web 0.10.2+1 [flutter flutter_web_plugins google_sign_in_platform_interface js] - http 0.13.5 [async http_parser meta path] - http_parser 4.0.2 [collection source_span string_scanner typed_data] - intl 0.17.0 [clock path] - js 0.6.5 [meta] - lints 2.0.1 - matcher 0.12.13 [meta stack_trace] - material_color_utilities 0.2.0 - meta 1.8.0 - nested 1.0.0 [flutter] - path 1.8.2 - path_drawing 1.0.1 [vector_math meta path_parsing flutter] - path_parsing 1.0.1 [vector_math meta] - path_provider 2.0.12 [flutter path_provider_android path_provider_foundation path_provider_linux path_provider_platform_interface path_provider_windows] - path_provider_android 2.0.22 [flutter path_provider_platform_interface] - path_provider_foundation 2.1.1 [flutter path_provider_platform_interface] - path_provider_linux 2.1.8 [ffi flutter path path_provider_platform_interface xdg_directories] - path_provider_platform_interface 2.0.5 [flutter platform plugin_platform_interface] - path_provider_windows 2.1.3 [ffi flutter path path_provider_platform_interface win32] - petitparser 5.1.0 [meta] - platform 3.1.0 - plugin_platform_interface 2.1.3 [meta] - process 4.2.4 [file path platform] - quiver 3.2.1 [matcher] - sky_engine 0.0.99 - source_span 1.9.1 [collection path term_glyph] - stack_trace 1.11.0 [path] - stream_channel 2.1.1 [async] - string_scanner 1.2.0 [source_span] - term_glyph 1.2.1 - test_api 0.4.16 [async boolean_selector collection meta source_span stack_trace stream_channel string_scanner term_glyph matcher] - typed_data 1.3.1 [collection] - vector_math 2.1.4 - win32 3.1.3 [ffi] - xdg_directories 1.0.0 [meta path process] - xml 6.2.2 [collection meta petitparser] ```

see also https://github.com/firebase/FirebaseUI-Flutter/issues/39 https://github.com/firebase/FirebaseUI-Flutter/issues/38 https://github.com/firebase/FirebaseUI-Flutter/issues/37 https://github.com/firebase/FirebaseUI-Flutter/issues/36 https://github.com/firebase/FirebaseUI-Flutter/issues/35

---

report-13-feb-2023.zip

[graemep-nz]

The supplied file email_form.dart has a possible fix for this but it might not the best way to fix it.

      return Container (
          height:50,
          child: LoadingButton(
        variant: style.signInButtonVariant,
        label: _chooseButtonLabel(),
        isLoading: state is SigningIn || state is SigningUp,
        onTap: _submit,
          )

[darshankawar]

@graemep-nz Using the plugin example from the repo and running it on web, tapping on SignIn button, I don't see the overflow error. I also tried to resize the browser which worked fine.

Note: I looked at the repo you shared and the pdf, I lost the track of the issues mentioned in it so I found it a bit hard to follow.

main.dart - test code derived from flutterfire example code on the internet that now gives a 404 error

Can you share the link for this ?

[graemep-nz]

https://github.com/firebase/flutterfire/tree/master/packages/flutterfire_ui

[graemep-nz]

You need to test with the main.dart code that I posted.

[darshankawar]

@graemep-nz The correct link is: https://github.com/firebase/flutterfire/tree/master/packages/firebase_ui_auth/example

flutterfire_ui is not being used anymore. Earlier I meant to ask from where did you get the url that is now showing 404.

[graemep-nz]

Where did I get the URL from? What a silly question. If you're not gonna test the code that people post with their bug reports you should close your bug reporting system and stop wasting everybody's time.

[graemep-nz]

If I comment out the following two lines in my theme, the render overflow problem goes away.

        minimumSize: MaterialStateProperty.all(const Size(300,50)),  // <<<<<<<<<<<<<<<<<<<<<<<<<<<
        maximumSize: MaterialStateProperty.all(const Size(300,50)), // <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

or if I change it to this - increase the height, the problem also goes away.

        minimumSize: MaterialStateProperty.all(const Size(300,100)),  // <<<<<<<<<<<<<<<<<<<<<<<<<<<
        maximumSize: MaterialStateProperty.all(const Size(300,100)), // <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

I had been unsuccessfully attempting to use these settings to set the width of the textboxes.

  static final signInTheme = ThemeData(
    textTheme: const TextTheme(labelLarge:TextStyle(fontSize:20, color: Colors.blue ),   // the forgot password "button"
      titleMedium: TextStyle(fontSize: 16,color: Colors.blueAccent)),  // text in email text box
    inputDecorationTheme: InputDecorationTheme(
      hintStyle: const TextStyle(fontSize:24, color: Colors.blue ),
      labelStyle: const TextStyle(color: Colors.blue ),   // hint text inside text field
      constraints: const BoxConstraints(maxHeight: 50, maxWidth: 40, minWidth: 40),
      enabledBorder: const OutlineInputBorder(borderSide: BorderSide(width: 2, color:Colors.lightBlue)),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8),
      ),
    ),
    outlinedButtonTheme: OutlinedButtonThemeData(
      style: ButtonStyle(
        // https://medium.flutterdevs.com/flutter-2-0-button-cheat-sheet-93217b3c908a
        backgroundColor: MaterialStateProperty.all<Color>(Color(0xFF64B5F6)),
        textStyle: MaterialStateProperty.all<TextStyle>(TextStyle(fontSize:16)),  // the sign in button text
        padding: MaterialStateProperty.all<EdgeInsets>(
          const EdgeInsets.all(12),
        ),
        minimumSize: MaterialStateProperty.all(const Size(300,50)),  // <<<<<<<<<<<<<<<<<<<<<<<<<<<
        maximumSize: MaterialStateProperty.all(const Size(300,50)), // <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
        foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
        shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(16))) ,
      ),
    ),
  );

[lesnitsky]

I wasn't able to reproduce this issue. If you encounter this issue again, please open another issue with a minimal reproducible example.

[graemep-nz]

So I wasted another hour and a half setting up the example app from ui auth V1.4.2 and found that the problem reproduces almost exactly as described with no changes whatsoever to the example app other than deleting pubspec_overrides.yaml. The exact behaviour depends on what auth provider methods you have enabled. The example app has them all so

1. when you first add google auth on the profile page it incorrectly stays in the "enable more" row.
2. when you sign out and back in, google auth appears in the list of enabled methods on the profile page and if you remove it, it correctly goes back into the list of "enable more" icons. If you then click the google icon to enable it as a provider - it thinks that you clicked the next icon in the row - which is the apple icon. You will see this in the video. Video is here. https://drive.google.com/file/d/1_tdgN8ApJ4C2OTEIPScEflPPw19pCFmf/view?usp=sharing

How about providing some instructions on how to use the example app. I had to guess that deleting pubspec_overrides.yaml would allow it to build.

Also how about providing a roadmap for this package so that people know when this package will be useable in their projects.

------ Original Message ------ From "Andrei Lesnitsky" @.> To "firebase/flutterfire" @.> Cc "graemep-nz" @.>; "Mention" @.> Date 20/06/2023 11:39:28 pm Subject Re: [firebase/flutterfire] 🐛 [firebase_ui_auth] Clicking the "sign in" button gives render overflow error (Issue firebase/flutterfire#10431)

I wasn't able to reproduce this issue. If you encounter this issue again, please open another issue with a minimal reproducible example https://stackoverflow.com/help/minimal-reproducible-example.

— Reply to this email directly, view it on GitHub https://github.com/firebase/flutterfire/issues/10431#issuecomment-1598613721, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJMCMWGJFJODI3HQXHKCVRLXMGDXBANCNFSM6AAAAAAUZVRDP4. You are receiving this because you were mentioned.Message ID: @.***>

[graemep-nz]

Oops, forget the above message. I mistakenly assumed that an email I received about the issue being closed was for issue 11156, probably because I don't see much of the email subject in my email client. Hence the reply above was actually for 11156. https://github.com/firebase/flutterfire/issues/11156

[graemep-nz]

@darshankawar @lesnitsky

Using auth ui V1.4.2 and the example app I am no longer able to set the style of the sign-in button using ThemeData, which is what I was doing with the code that produced the error. If you tell me how to set the style of the sign-in button I will see if I can reproduce the overflow error with 1.4.2.

Setting the background color to red for OutlinedButton has no effect using the theme below.

final signInTheme = ThemeData(
  textTheme: const TextTheme(
    labelLarge:TextStyle(fontSize:16, color: Colors.blue ),   // the forgot password "button"
    titleMedium: TextStyle(fontSize: 16,color: Colors.blueAccent),  // text in email text box
    labelMedium: TextStyle(fontSize:16, color: Colors.blue ),
  ),
  inputDecorationTheme: InputDecorationTheme(
    hintStyle: const TextStyle(fontSize:24, color: Colors.blue ),
    labelStyle: const TextStyle(color: Colors.blue ),   // hint text inside text field
    constraints: const BoxConstraints(maxHeight: 50, maxWidth: 40, minWidth: 40),
    enabledBorder: const OutlineInputBorder(borderSide: BorderSide(width: 2, color:Colors.lightBlue)),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
  outlinedButtonTheme: OutlinedButtonThemeData(
    style: ButtonStyle(
      // https://medium.flutterdevs.com/flutter-2-0-button-cheat-sheet-93217b3c908a
      //backgroundColor: MaterialStateProperty.all<Color>(Color(0xFF64B5F6)),
      backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
      textStyle: MaterialStateProperty.all<TextStyle>(TextStyle(fontSize:32)),  // the sign in button text
      padding: MaterialStateProperty.all<EdgeInsets>(
        const EdgeInsets.all(12),
      ),
      minimumSize: MaterialStateProperty.all(const Size(300,50)),  // <<<<<<<<<<<<<<<<<<<<<<<<<<<
      maximumSize: MaterialStateProperty.all(const Size(300,50)), // <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
      foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
      shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(16))) ,
    ),
  ),
);