firebase / flutterfire

πŸ”₯ A collection of Firebase plugins for Flutter apps.
https://firebase.google.com/docs/flutter/setup
BSD 3-Clause "New" or "Revised" License
8.63k stars 3.95k forks source link

πŸ› UI A RenderFlex overflowed by 20 pixels on the bottom. #9713

Closed ghost closed 1 year ago

ghost commented 1 year ago

Bug report

This is such an awesome package(thanks for making it), I'm using the FF UI as a landing page for a new app. There isn't anything else going on in it yet. The FF UI for the web is overflowing on the following screens(according to the debug):

Minor overflow of 0.69px; Also, there isn't enough padding between the "next" button and the "Go back" button. They are basically stacked with no separation. Picture below. /flutterfire_ui-0.4.3+13/lib/src/auth/screens/phone_input_screen.dart:80:22

Larger overflow of 20px picture below: flutterfire_ui-0.4.3+13/lib/src/auth/views/login_view.dart:187:14

Steps to reproduce

Steps to reproduce the behaviour:

  1. If you use the code from the repo below, and connect it to your firebase project for testing you should get the same overflow problem by running it on chrome:
  2. flutter run -d chrome
  3. Then maximize the window size on a large-resolution display
  4. Click on the phone auth, you will get an overflow on that screen
  5. click on register, and you get an overflow on that screen

If you resize the window, on a screen with an active overflow, once it hits the next lowest breakpoint, the issues disappear. Its got to be something with the sidebar builder, at higher resolutions.

Expected behaviour

It would be nice if the UI didn't overflow, and there was more padding between controls by default so debugging didn't throw exceptions and the UI wasn't so cramped.

Sample project

Providing a minimal example project which demonstrates the bug in isolation from your main App greatly enhances the chance of a timely fix. Please link to the public repository URL.

Here is the minimal project repo. It just needs to be connected to your firebase project because it won't run without FB initialized. https://github.com/wednesdei/FFUIMinimal


Additional context

I'm basically trying to use a stock, unmodified Material3 theme. As all the widgets haven't been converted to M3 yet, I'm using the flex_color_scheme: ^6.0.1 package to fall back when M3 isn't available. When I run the app, the only time the UI overflows is when it is stretched out to web/desktop resolutions.

My monitor is 3840 x 2160, so when I go full screen with the app running in chrome, the sidebar overflows. As noted above, if I resize the window to a smaller resolution, where it hits the next breakpoint, the overflow disappears. The issue seems to be limited to high-resolution web views with the UI side builder. I'm too new to programming/flutter to fix it myself, the layout stuff for the FFUI is pretty intense for me to solve. Everything else works great!


Flutter doctor

Run flutter doctor and paste the output below:

Click To Expand ``` Running flutter doctor... Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel master, 3.5.0-6.0.pre.12, on Microsoft Windows [Version 10.0.22621.521], locale en-CA) [√] Windows Version (Installed version of Windows is version 10 or higher) [√] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1) [√] Chrome - develop for the web [√] Android Studio (version 2021.2) [√] VS Code (version 1.72.1) [√] Connected device (2 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.19.0-299.0.dev Flutter SDK 3.5.0-6.0.pre.12 anyportincmarkermarker 1.0.0+1 dependencies: - cached_network_image 3.2.2 [flutter flutter_cache_manager octo_image cached_network_image_platform_interface cached_network_image_web] - cloud_firestore 3.5.1 [cloud_firestore_platform_interface cloud_firestore_web collection firebase_core firebase_core_platform_interface flutter meta] - cloud_functions 3.3.9 [cloud_functions_platform_interface cloud_functions_web firebase_core firebase_core_platform_interface flutter] - crypto 3.0.2 [typed_data] - cupertino_icons 1.0.5 - dynamic_color 1.5.4 [flutter flutter_test material_color_utilities] - firebase_auth 3.11.2 [firebase_auth_platform_interface firebase_auth_web firebase_core firebase_core_platform_interface flutter meta] - firebase_auth_web 4.6.1 [firebase_auth_platform_interface firebase_core firebase_core_web flutter flutter_web_plugins http_parser intl js meta] - firebase_core 1.24.0 [firebase_core_platform_interface firebase_core_web flutter meta] - firebase_core_web 1.7.3 [firebase_core_platform_interface flutter flutter_web_plugins js meta] - firebase_database 9.1.7 [firebase_core firebase_core_platform_interface firebase_database_platform_interface firebase_database_web flutter] - firebase_dynamic_links 4.3.10 [firebase_core firebase_core_platform_interface firebase_dynamic_links_platform_interface flutter meta plugin_platform_interface] - firebase_storage 10.3.11 [firebase_core firebase_core_platform_interface firebase_storage_platform_interface firebase_storage_web flutter] - flex_color_scheme 6.0.1 [flex_seed_scheme flutter meta] - flutter 0.0.0 [characters collection js material_color_utilities meta vector_math sky_engine] - flutter_adaptive_scaffold 0.0.5 [flutter] - flutter_facebook_auth 4.4.1+1 [flutter flutter_facebook_auth_platform_interface flutter_facebook_auth_web] - flutter_svg 1.1.5 [flutter meta path_drawing vector_math xml] - flutterfire_ui 0.4.3+13 [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] - image_picker 0.8.6 [flutter image_picker_android image_picker_for_web image_picker_ios image_picker_platform_interface] - intl 0.17.0 [clock path] - local_auth 2.1.2 [flutter intl local_auth_android local_auth_ios local_auth_platform_interface local_auth_windows] - shared_preferences 2.0.15 [flutter shared_preferences_android shared_preferences_ios shared_preferences_linux shared_preferences_macos shared_preferences_platform_interface shared_preferences_web shared_preferences_windows] - stream_chat_flutter 5.0.1 [cached_network_image chewie collection contextmenu dart_vlc desktop_drop diacritic dio ezanimation file_picker file_selector flutter flutter_markdown flutter_portal flutter_svg http http_parser image_gallery_saver image_picker jiffy lottie meta path_provider photo_manager photo_view rxdart share_plus shimmer stream_chat_flutter_core synchronized thumblr url_launcher video_player video_player_macos video_thumbnail] - stream_chat_localizations 4.0.0 [flutter flutter_localizations stream_chat_flutter] - stream_chat_persistence 5.0.0 [drift flutter logging meta mutex path path_provider sqlite3_flutter_libs stream_chat] - stream_feed_flutter 0.0.0 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.2 [cloud_firestore_platform_interface cloud_firestore_web collection firebase_core firebase_core_platform_interface flutter meta] - after_layout 1.2.0 [flutter] - animations 2.0.7 [flutter] - archive 3.3.1 [crypto path] - args 2.3.1 - asn1lib 1.1.1 - async 2.9.0 [collection meta] - audio_video_progress_bar 0.11.0 [flutter] - boolean_selector 2.1.0 [source_span string_scanner] - cached_network_image_platform_interface 2.0.0 [flutter flutter_cache_manager] - cached_network_image_web 1.0.2 [flutter flutter_cache_manager cached_network_image_platform_interface] - characters 1.2.1 - chewie 1.3.5 [cupertino_icons flutter provider video_player wakelock] - clock 1.1.1 - cloud_firestore_platform_interface 5.7.7 [_flutterfire_internals collection firebase_core flutter meta plugin_platform_interface] - cloud_firestore_web 2.8.10 [_flutterfire_internals cloud_firestore_platform_interface collection firebase_core firebase_core_web flutter flutter_web_plugins js] - cloud_functions_platform_interface 5.1.18 [firebase_core flutter meta plugin_platform_interface] - cloud_functions_web 4.3.7 [cloud_functions_platform_interface firebase_core firebase_core_web flutter flutter_web_plugins js] - collection 1.16.0 - connectivity_plus 2.3.9 [flutter connectivity_plus_platform_interface connectivity_plus_linux connectivity_plus_macos connectivity_plus_web connectivity_plus_windows] - connectivity_plus_linux 1.3.1 [flutter connectivity_plus_platform_interface meta nm] - connectivity_plus_macos 1.2.6 [connectivity_plus_platform_interface flutter] - connectivity_plus_platform_interface 1.2.1 [flutter meta plugin_platform_interface] - connectivity_plus_web 1.2.5 [connectivity_plus_platform_interface flutter_web_plugins flutter js] - connectivity_plus_windows 1.2.2 [connectivity_plus_platform_interface flutter] - contextmenu 3.0.0 [flutter animations after_layout] - convert 3.0.2 [typed_data] - cross_file 0.3.3+2 [js meta] - crypto_keys 0.3.0 [pointycastle meta collection quiver] - csslib 0.17.2 [source_span] - dart_vlc 0.3.0 [flutter dart_vlc_ffi path path_provider audio_video_progress_bar flutter_native_view window_manager] - dart_vlc_ffi 0.1.8 [ffi path] - dbus 0.7.4 [args ffi meta xml] - desktop_drop 0.3.3 [flutter flutter_web_plugins cross_file] - desktop_webview_auth 0.0.9 [crypto flutter http] - diacritic 0.1.3 - dio 4.0.6 [http_parser path] - drift 1.7.1 [async convert collection js meta stream_channel sqlite3] - email_validator 2.1.17 - equatable 2.0.5 [collection meta] - ezanimation 0.6.0 [flutter] - fake_async 1.3.1 [clock collection] - ffi 1.2.1 - file 6.1.4 [meta path] - file_picker 4.6.1 [flutter flutter_web_plugins flutter_plugin_android_lifecycle plugin_platform_interface ffi path win32] - file_selector 0.9.2+1 [file_selector_ios file_selector_linux file_selector_macos file_selector_platform_interface file_selector_web file_selector_windows flutter] - file_selector_ios 0.5.0+2 [file_selector_platform_interface flutter] - file_selector_linux 0.9.0+1 [cross_file file_selector_platform_interface flutter] - file_selector_macos 0.9.0+3 [cross_file file_selector_platform_interface flutter] - file_selector_platform_interface 2.2.0 [cross_file flutter http plugin_platform_interface] - file_selector_web 0.9.0+2 [file_selector_platform_interface flutter flutter_web_plugins] - file_selector_windows 0.9.1+4 [cross_file file_selector_platform_interface flutter] - firebase_auth_platform_interface 6.10.1 [_flutterfire_internals collection firebase_core flutter meta plugin_platform_interface] - firebase_core_platform_interface 4.5.1 [collection flutter flutter_test meta plugin_platform_interface] - firebase_database_platform_interface 0.2.2+7 [_flutterfire_internals collection firebase_core flutter meta plugin_platform_interface] - firebase_database_web 0.2.1+9 [firebase_core firebase_core_web firebase_database_platform_interface flutter flutter_web_plugins js] - firebase_dynamic_links_platform_interface 0.2.3+15 [_flutterfire_internals firebase_core flutter meta plugin_platform_interface] - firebase_storage_platform_interface 4.1.18 [collection firebase_core flutter meta plugin_platform_interface] - firebase_storage_web 3.3.9 [_flutterfire_internals async firebase_core firebase_core_web firebase_storage_platform_interface flutter flutter_web_plugins http js meta] - flex_seed_scheme 1.0.1 [flutter material_color_utilities meta] - flutter_blurhash 0.7.0 [flutter] - flutter_cache_manager 3.3.0 [clock collection file flutter http path path_provider pedantic rxdart sqflite uuid] - 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 js material_color_utilities meta path vector_math] - flutter_markdown 0.6.12 [flutter markdown meta path] - flutter_native_view 0.0.2 [flutter path] - flutter_plugin_android_lifecycle 2.0.7 [flutter] - flutter_portal 1.1.1 [collection flutter vector_math] - flutter_web_plugins 0.0.0 [flutter js characters collection material_color_utilities meta vector_math] - freezed_annotation 2.1.0 [collection json_annotation meta] - google_sign_in 5.4.2 [flutter google_sign_in_android google_sign_in_ios google_sign_in_platform_interface google_sign_in_web] - google_sign_in_android 6.1.1 [flutter google_sign_in_platform_interface] - google_sign_in_ios 5.5.0 [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 [flutter flutter_web_plugins google_sign_in_platform_interface js] - html 0.15.0 [csslib source_span] - http 0.13.5 [async http_parser meta path] - http_parser 4.0.1 [collection source_span string_scanner typed_data] - image_gallery_saver 1.7.1 [flutter] - image_picker_android 0.8.5+3 [flutter flutter_plugin_android_lifecycle image_picker_platform_interface] - image_picker_for_web 2.1.10 [flutter flutter_web_plugins image_picker_platform_interface] - image_picker_ios 0.8.6+1 [flutter image_picker_platform_interface] - image_picker_platform_interface 2.6.2 [cross_file flutter http plugin_platform_interface] - jiffy 5.0.0 [intl] - jose 0.3.2 [crypto_keys meta typed_data x509 http http_parser asn1lib collection] - js 0.6.4 - json_annotation 4.7.0 [meta] - lints 2.0.0 - local_auth_android 1.0.13 [flutter flutter_plugin_android_lifecycle intl local_auth_platform_interface] - local_auth_ios 1.0.10 [flutter intl local_auth_platform_interface] - local_auth_platform_interface 1.0.5 [flutter intl plugin_platform_interface] - local_auth_windows 1.0.4 [flutter local_auth_platform_interface] - logging 1.1.0 - lottie 1.4.3 [archive flutter path vector_math] - markdown 6.0.1 [args meta] - matcher 0.12.12 [stack_trace] - material_color_utilities 0.2.0 - meta 1.8.0 - mime 1.0.2 - mutex 3.0.0 - nested 1.0.0 [flutter] - nm 0.5.0 [dbus] - octo_image 1.0.2 [flutter flutter_blurhash] - 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.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.20 [flutter path_provider_platform_interface] - path_provider_ios 2.0.11 [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.5 [flutter platform plugin_platform_interface] - path_provider_windows 2.0.7 [ffi flutter path path_provider_platform_interface win32] - pedantic 1.11.1 - petitparser 5.0.0 [meta] - photo_manager 2.4.0 [flutter] - photo_view 0.14.0 [flutter] - platform 3.1.0 - plugin_platform_interface 2.1.3 [meta] - pointycastle 3.6.2 [collection convert js] - process 4.2.4 [file path platform] - provider 6.0.4 [collection flutter nested] - quiver 3.1.0 [matcher] - rate_limiter 0.1.1 - rxdart 0.27.5 - screen_retriever 0.1.3 [flutter] - share_plus 4.5.3 [cross_file meta mime flutter share_plus_platform_interface share_plus_linux share_plus_macos share_plus_windows share_plus_web] - share_plus_linux 3.0.1 [cross_file share_plus_platform_interface file flutter meta url_launcher] - share_plus_macos 3.0.1 [share_plus_platform_interface flutter] - share_plus_platform_interface 3.1.1 [cross_file flutter meta mime plugin_platform_interface] - share_plus_web 3.1.0 [cross_file share_plus_platform_interface url_launcher flutter flutter_web_plugins meta mime] - share_plus_windows 3.0.1 [share_plus_platform_interface flutter meta url_launcher] - shared_preferences_android 2.0.13 [flutter shared_preferences_platform_interface] - shared_preferences_ios 2.1.1 [flutter shared_preferences_platform_interface] - shared_preferences_linux 2.1.1 [file flutter path path_provider_linux path_provider_platform_interface shared_preferences_platform_interface] - shared_preferences_macos 2.0.4 [flutter shared_preferences_platform_interface] - shared_preferences_platform_interface 2.1.0 [flutter plugin_platform_interface] - shared_preferences_web 2.0.4 [flutter flutter_web_plugins shared_preferences_platform_interface] - shared_preferences_windows 2.1.1 [file flutter path path_provider_platform_interface path_provider_windows shared_preferences_platform_interface] - shimmer 2.0.0 [flutter] - 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.9.1 [collection path term_glyph] - sqflite 2.1.0+1 [flutter sqflite_common path] - sqflite_common 2.3.0 [synchronized path meta] - sqlite3 1.9.0 [collection ffi js meta path] - sqlite3_flutter_libs 0.5.10 [flutter] - stack_trace 1.10.0 [path] - stream_channel 2.1.1 [async] - stream_chat 5.0.0 [async collection dio equatable freezed_annotation http_parser jose json_annotation logging meta mime rate_limiter rxdart uuid web_socket_channel] - stream_chat_flutter_core 5.0.0 [collection connectivity_plus flutter freezed_annotation meta rxdart stream_chat] - string_scanner 1.1.1 [source_span] - synchronized 3.0.0+3 - term_glyph 1.2.1 - test_api 0.4.14 [async boolean_selector collection meta source_span stack_trace stream_channel string_scanner term_glyph matcher] - thumblr 0.0.4 [flutter thumblr_platform_interface thumblr_macos thumblr_windows] - thumblr_macos 0.4.0 [flutter thumblr_platform_interface] - thumblr_platform_interface 0.3.1+1 [flutter plugin_platform_interface] - thumblr_windows 0.0.3+1 [flutter thumblr_platform_interface path_provider] - twitter_login 4.2.3 [flutter crypto http] - typed_data 1.3.1 [collection] - url_launcher 6.1.6 [flutter url_launcher_android url_launcher_ios url_launcher_linux url_launcher_macos url_launcher_platform_interface url_launcher_web url_launcher_windows] - url_launcher_android 6.0.19 [flutter url_launcher_platform_interface] - url_launcher_ios 6.0.17 [flutter url_launcher_platform_interface] - url_launcher_linux 3.0.1 [flutter url_launcher_platform_interface] - url_launcher_macos 3.0.1 [flutter url_launcher_platform_interface] - url_launcher_platform_interface 2.1.1 [flutter plugin_platform_interface] - url_launcher_web 2.0.13 [flutter flutter_web_plugins url_launcher_platform_interface] - url_launcher_windows 3.0.1 [flutter url_launcher_platform_interface] - uuid 3.0.6 [crypto] - vector_math 2.1.4 - video_player 2.4.7 [flutter html video_player_android video_player_avfoundation video_player_platform_interface video_player_web] - video_player_android 2.3.9 [flutter video_player_platform_interface] - video_player_avfoundation 2.3.7 [flutter video_player_platform_interface] - video_player_macos 1.0.6 [flutter video_player_platform_interface] - video_player_platform_interface 5.1.4 [flutter plugin_platform_interface] - video_player_web 2.0.12 [flutter flutter_web_plugins video_player_platform_interface] - video_thumbnail 0.5.3 [flutter] - wakelock 0.6.2 [flutter meta wakelock_macos wakelock_platform_interface wakelock_web wakelock_windows] - wakelock_macos 0.4.0 [flutter flutter_web_plugins wakelock_platform_interface] - wakelock_platform_interface 0.3.0 [flutter meta] - wakelock_web 0.4.0 [flutter flutter_web_plugins js wakelock_platform_interface] - wakelock_windows 0.2.0 [flutter wakelock_platform_interface win32] - web_socket_channel 2.2.0 [async crypto stream_channel] - win32 2.6.1 [ffi] - window_manager 0.2.7 [flutter path screen_retriever] - x509 0.2.2 [asn1lib quiver crypto_keys] - xdg_directories 0.2.0+2 [meta path process] - xml 6.1.0 [collection meta petitparser] ```

padding register_overflow phone_padding sign_in_with_phone_overflow overflow

darshankawar commented 1 year ago

Thanks for the report. There are couple of existing open issues that describes the problem you are facing:

https://github.com/firebase/flutterfire/issues/8396 https://github.com/firebase/flutterfire/issues/8941

Fixes for above linked issues should also fix the behavior you are seeing.

Please follow-up in it for further updates. Closing this as a duplicate.