Closed tanweer919 closed 1 year ago
Hi @tanweer919
could you please provide your flutter doctor -v
and, assuming that you are testing the web app on mobile via a static website,
could you please provide a link?
thank you
[✓] Flutter (Channel beta, v1.15.17, on Mac OS X 10.14.5 18F132, locale en-IN)
• Flutter version 1.15.17 at /Users/tanweeranwar/Downloads/flutter/flutter
• Framework revision 2294d75bfa (3 weeks ago), 2020-03-07 00:28:38 +0900
• Engine revision 5aff311948
• Dart version 2.8.0 (build 2.8.0-dev.12.0 9983424a3c)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
• Android SDK at /Users/tanweeranwar/Library/Android/sdk
• Android NDK location not configured (optional; useful for native profiling support)
• Platform android-29, build-tools 29.0.2
• Java binary at: /Applications/Android
Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)
• All Android licenses accepted.
[!] Xcode - develop for iOS and macOS (Xcode 11.3.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 11.3.1, Build version 11C504
✗ CocoaPods not installed.
CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that
responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To install:
sudo gem install cocoapods
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 3.5)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin version 43.0.1
• Dart plugin version 191.8593
• Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)
[✓] VS Code (version 1.43.0)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.8.1
[✓] Connected device (2 available)
• Chrome • chrome • web-javascript • Google Chrome 80.0.3987.149
• Web Server • web-server • web-javascript • Flutter Tools
Website is in production https://console.makenica.com/
We do have the same behavior on our side, is there any workaround?
Thank for the logs and the link @tanweer919
I have the exact same problem, this is what happens natively on mobile:
And this is the web version:
The url is: https://pwa.test.newssupply.com/#login
You can see that the whole scafold moves up on web, while natively, it just moves the keyboard over the screen and the Singlechildscrollview scrolls up.
I am using the "MediaQuery.of(context).viewInsets.bottom" to determine the inset needed. I use that inset as bottom padding in the a SinglechildScrollview, but this will always return 0 on web, since the app whole moves up.
I logged the mediaquery viewinset bottom on web, so you can check it on web.
Do you guys know any workarounds?
There is no proper workaround at the moment. To compensate for this issue, I have made pages with text input scrollable by wrapping in a SingleChildScrollView widget.
Hi @tanweer919
Based on your code sample, I see keyboard matches expected results on the latest master
Are you still experiencing this issue?
If yes, Can you please provide your flutter doctor -v
with latest stable
and flutter run --verbose
logs, and a minimal complete reproducible code sample
Thank you
@TahaTesser Sorry, but the problem seems to persist in the latest master build too.
Flutter doctor -v
flutter run --verbose
Hi @tanweer919 Please provide the complete code sample you're using in the screenshot Thank you
Code sample is same as above. Code sample
Scaffold(
resizeToAvoidBottomInset: false,
bottomNavigationBar:
BottomNavBar(),
backgroundColor: Theme.of(context).primaryColor,
body: Container(
margin: EdgeInsets.symmetric(vertical: 35, horizontal: 20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Colors.white,
),
padding: EdgeInsets.all(5.0),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Center(
child: Text(
'Create Account',
style: TextStyle(fontSize: 30),
)),
Flexible(
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Text(
'To get quotation and quickly scale to production. Kindly signup with us.',
style: TextStyle(
color: Color(0xff707070),
fontSize: 15.0,
fontWeight: FontWeight.w300),
),
),
),
Form(
key: Signup._signupFormKey,
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: InputElement(
label: 'Name',
obscureText: false,
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: InputElement(
label: 'Phone no',
obscureText: false,
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: InputElement(
label: 'Email',
obscureText: false,
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: InputElement(
label: 'Password',
obscureText: true,
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: InputElement(
label: 'Repeat Password',
obscureText: true,
),
),
),
RegisterButtons(
onRegisterPressed: () {},
)
],
),
),
],
),
),
);
This seems to be related to an issue I submitted earlier.
The problem was that the inset on web always seemed to happen regardless of the resizeToAvoidBottomInset setting, but I believe this was fixed at least for iOS 13 devices but it's still an issue on earlier iOS versions. Either-way I uploaded some gifs to show what happened and some explanation in my earlier issue, so perhaps this is relevant to finding a solution to this as well:ok_hand:
I used this solution to hide the bottom navigation bar https://stackoverflow.com/questions/48750361/flutter-detect-keyboard-open-close/63241409#63241409
Seems like this issue is still occurring to this day. Is there any available fix, since resizeToAvoidBottomInset: false
does not work on the web?
@tanweer919 I verified using the below code sample based on https://github.com/flutter/flutter/issues/53489#issuecomment-688919421 and I am unable to reproduce the issue neither on the web nor on Android. Does this still reproduce on your end? if it does then please share a minimal and complete code sample that we can directly run with minimal or no code changes. Android | IOS |
---|---|
![]() |
![]() |
The issue seems to have been resolved in the latest stable
build.
Thanks for the confirmation.
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v
and a minimal reproduction of the issue.
When Keyboard is opened, whole screen resizes and content is pushed up along with bottom navbar even after setting resizeToAvoidBottomInset to false. I am facing this unexpected behaviour only on Flutter web while on Flutter mobile app this seems to work correctly.
Steps to Reproduce
Code snippet
Expected results:
Form working correctly on Mobile App(Expected behaviour):
Actual results:
Form is resized and pushed up along with bottom navbar on Chrome: