🐛 [FLUTTERFIRE_UI] sidebar width calculation problem

[graemep-nz]

Bug report

In responsive_page.dart there is the following code

    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.biggest.width > breakpoint) {
            // show sidebar
        else
           // show header

There are several problems here. The value you need to pass in for "breakpoint" is not documented anywhere (ideally put comments in the code for all the constructor parameters everywhere) but if you want to show a header and don't pass in a value for breakpoint, the header may or not appear (in my case it didn't appear). If the callback for the header is not null, it should ignore the value for breakpoint and show the header and no sidebar. Ideally it should allow both a header and a sidebar since you might want to add some text to the header and an icon on the side and maybe also shrink the sidebar to make room for it. The header image gets shrunk when the keyboard pops up.

Secondly, if there is no sidebar and you pass a large value for breakpoint (so that the header appears), the widgets on the signin screen are expanded to take up the whole screen width which means you have text boxes and buttons that are 1900 pixels or so wide on a 1920 pixel width screen which looks silly.

Thirdly the code should do the width calculation only if the sidebar callback is not null so that if both callbacks are null it returns the simple Center widget at the bottom of the function - which shrinkWraps the incoming "child" widget.

Also the parameter "breakpoint" would be better renamed as sidebarTotalWidth or something.

Lastly FYI the _onKeyboardPositionChanged callback is getting called once at startup and also when the screen rotates but it does NOT get called when the on screen keyboard shows up or hides - even though a vertical scroll does occur at the right times. If possible, please try to check if this is expected.

Steps to reproduce

explained above

Expected behavior

explained above

Sample project

Code as here https://github.com/firebase/flutterfire/blob/master/packages/flutterfire_ui/doc/auth/integrating-your-first-screen.md

---

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.0.3, on Microsoft Windows [Version 10.0.22000.795], locale en-NZ)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.2.3)
[√] Android Studio (version 2021.2)
[√] VS Code (version 1.69.2)
[√] VS Code, 64-bit edition (version 1.69.2)
[√] Connected device (4 available)
[√] HTTP Host Availability

• No issues found!

---

Flutter dependencies

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

Click To Expand

Dart SDK 2.17.5
Flutter SDK 3.0.3
firebase_with_flutter 1.0.0+1

dependencies:
- cloud_firestore 3.3.0 [cloud_firestore_platform_interface cloud_firestore_web collection firebase_core firebase_core_platform_interface flutter meta]
- cupertino_icons 1.0.5
- firebase_auth 3.4.2 [firebase_auth_platform_interface firebase_auth_web firebase_core firebase_core_platform_interface flutter meta]
- firebase_core 1.19.2 [firebase_core_platform_interface firebase_core_web flutter meta]
- flutter 0.0.0 [characters collection material_color_utilities meta vector_math sky_engine]
- flutterfire_ui 0.4.2+3 [cloud_firestore collection crypto desktop_webview_auth email_validator firebase_auth firebase_core firebase_database firebase_dynamic_links flutter flutter_facebook_auth flutter_localizations flutter_svg google_sign_in sign_in_with_apple twitter_login]
- google_fonts 3.0.1 [flutter http path_provider crypto]
- provider 6.0.3 [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 charcode collection matcher material_color_utilities meta source_span stream_channel string_scanner term_glyph]

transitive dependencies:
- async 2.8.2 [collection meta]
- boolean_selector 2.1.0 [source_span string_scanner]
- characters 1.2.0
- charcode 1.3.1
- clock 1.1.0
- cloud_firestore_platform_interface 5.6.0 [collection firebase_core flutter meta plugin_platform_interface]
- cloud_firestore_web 2.7.0 [cloud_firestore_platform_interface collection firebase_core firebase_core_web flutter flutter_web_plugins js]
- collection 1.16.0
- crypto 3.0.2 [typed_data]
- desktop_webview_auth 0.0.9 [crypto flutter http]
- email_validator 2.0.1
- fake_async 1.3.0 [clock collection]
- ffi 2.0.1
- file 6.1.2 [meta path]
- firebase_auth_platform_interface 6.3.2 [firebase_core flutter meta plugin_platform_interface]
- firebase_auth_web 4.0.0 [firebase_auth_platform_interface firebase_core firebase_core_web flutter flutter_web_plugins http_parser intl js meta]
- firebase_core_platform_interface 4.4.3 [collection flutter flutter_test meta plugin_platform_interface]
- firebase_core_web 1.7.0 [firebase_core_platform_interface flutter flutter_web_plugins js meta]
- firebase_database 9.0.19 [firebase_core firebase_core_platform_interface firebase_database_platform_interface firebase_database_web flutter]
- firebase_database_platform_interface 0.2.1+11 [collection firebase_core flutter meta plugin_platform_interface]
- firebase_database_web 0.2.1 [firebase_core firebase_core_web firebase_database_platform_interface flutter flutter_web_plugins js]
- firebase_dynamic_links 4.3.2 [firebase_core firebase_core_platform_interface firebase_dynamic_links_platform_interface flutter meta plugin_platform_interface]
- firebase_dynamic_links_platform_interface 0.2.3+7 [firebase_core flutter meta plugin_platform_interface]
- flutter_facebook_auth 4.4.0+1 [flutter flutter_facebook_auth_platform_interface flutter_facebook_auth_web]
- flutter_facebook_auth_platform_interface 3.2.0 [flutter plugin_platform_interface]
- flutter_facebook_auth_web 3.2.0 [flutter flutter_web_plugins js flutter_facebook_auth_platform_interface]
- flutter_localizations 0.0.0 [flutter intl characters clock collection material_color_utilities meta path vector_math]
- flutter_svg 1.1.1+1 [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.0 [flutter google_sign_in_android google_sign_in_ios google_sign_in_platform_interface google_sign_in_web]
- google_sign_in_android 6.0.1 [flutter google_sign_in_platform_interface]
- google_sign_in_ios 5.4.0 [flutter google_sign_in_platform_interface]
- google_sign_in_platform_interface 2.2.0 [flutter quiver]
- google_sign_in_web 0.10.2 [flutter flutter_web_plugins google_sign_in_platform_interface js]
- http 0.13.4 [async http_parser meta path]
- http_parser 4.0.1 [collection source_span string_scanner typed_data]
- intl 0.17.0 [clock path]
- js 0.6.4
- lints 2.0.0
- matcher 0.12.11 [stack_trace]
- material_color_utilities 0.1.4
- meta 1.7.0
- nested 1.0.0 [flutter]
- path 1.8.1
- path_drawing 1.0.0 [vector_math meta path_parsing flutter]
- path_parsing 1.0.0 [vector_math meta]
- path_provider 2.0.11 [flutter path_provider_android path_provider_ios path_provider_linux path_provider_macos path_provider_platform_interface path_provider_windows]
- path_provider_android 2.0.16 [flutter path_provider_platform_interface]
- path_provider_ios 2.0.10 [flutter path_provider_platform_interface]
- path_provider_linux 2.1.7 [ffi flutter path path_provider_platform_interface xdg_directories]
- path_provider_macos 2.0.6 [flutter path_provider_platform_interface]
- path_provider_platform_interface 2.0.4 [flutter platform plugin_platform_interface]
- path_provider_windows 2.1.0 [ffi flutter path path_provider_platform_interface win32]
- petitparser 5.0.0 [meta]
- platform 3.1.0
- plugin_platform_interface 2.1.2 [meta]
- process 4.2.4 [file path platform]
- quiver 3.1.0 [matcher]
- sign_in_with_apple 3.3.0 [flutter meta sign_in_with_apple_platform_interface sign_in_with_apple_web]
- sign_in_with_apple_platform_interface 1.0.0 [flutter plugin_platform_interface meta]
- sign_in_with_apple_web 1.0.1 [flutter flutter_web_plugins sign_in_with_apple_platform_interface js]
- sky_engine 0.0.99
- source_span 1.8.2 [collection path term_glyph]
- stack_trace 1.10.0 [path]
- stream_channel 2.1.0 [async]
- string_scanner 1.1.0 [charcode source_span]
- term_glyph 1.2.0
- test_api 0.4.9 [async boolean_selector collection meta source_span stack_trace stream_channel string_scanner term_glyph matcher]
- twitter_login 4.2.3 [flutter crypto http]
- typed_data 1.3.1 [collection]
- vector_math 2.1.2
- win32 2.7.0 [ffi]
- xdg_directories 0.2.0+1 [meta path process]
- xml 6.1.0 [collection meta petitparser]

---

[darshankawar]

/cc @lesnitsky

[whiplashoo]

Seeing the exact same issues when running on larger screen sizes, like on the 11-inch iPad Pro:

My header (which contains a logo) doesn't appear at all and the bottom of the UI gets cut off. Setting the breakpoint property to a larger value works, but this is not documented and feels a bit arbitrary.

[lesnitsky]

fixed in #9343