Setting resizeToAvoidBottomPadding: false on a Scaffold disables scrolling of TextViews into views

[escamoteur]

Also what I realized:

If I set resizeToAvoidBottomPadding: false on my Scaffold no Textfield is scrolled up anymore and I can't even scroll my content up manually.
What if I don't want to have everything below pushe up? I only wan't to have the Textfield scrolled into view. See this two pichtures:

I don't want to have the TabBar (it's not in the bottom of the Scaflold but in an outer Column)pushed up too:

        child: Scaffold(resizeToAvoidBottomPadding: true,
          appBar: new AppBar(
            backgroundColor: Colors.white,
            centerTitle: true,
            title: new Text("Create Event"),
          ),
          body: new Center(
            child: Column(
              children: <Widget>[
                Expanded(
                  child: TabBarView(
                    controller: _tabController,
                    children: [
                      SingleChildScrollView(
                                              child: Container(
                          padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 20.0),
                          child: Column(crossAxisAlignment: CrossAxisAlignment.stretch,
                            children: [
                              ClipRRect(
                                borderRadius:
                                    BorderRadius.all(Radius.circular(10.0)),
                                child: Image.network(
                                  'https://firebasestorage.googleapis.com/v0/b/join-or-create.appspot.com/o/event_type_images%2Ffootball.jpg?alt=media&token=218c0a14-f6e9-48ed-b6a0-ca339a2ff555',
                                ),
                              ),
                              Padding(
                                padding: const EdgeInsets.only(top: 20.0),
                                child: Text('EVENT TITLE', textAlign: TextAlign.left,),
                              ),
                              JoCFormField(hintText: 'Select a appealing title',),
                              Padding(
                                padding: const EdgeInsets.only(top: 20.0),
                                child: Text('DESCRIPTION', textAlign: TextAlign.left,),
                              ),
                              JoCFormField(hintText: 'What are you planing to do?', height: 100.0,),
                              // Expanded(child: Container(color: Colors.blue,)),
                            ],
                          ),
                        ),
                      ),
                      Container(
                        color: Colors.red,
                      ),
                      Container(
                        color: Colors.green,
                      ),
                    ],
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TabBar(
                    labelColor: Theme.of(context).accentColor,
                    controller: _tabController,
                    tabs: [
                      Tab(
                        text: "General",
                      ),
                      Tab(
                        text: "Location & Time",
                      ),
                      Tab(
                        text: "Requirements",
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      ),

PS C:\Entwicklung\FlutterApps\Projects\JoinOrCreate\JoinOrCreate_Mobile> flutter doctor -v
[√] Flutter (Channel master, v0.5.5-pre.45, on Microsoft Windows [Version 10.0.17134.112], locale de-DE)
• Flutter version 0.5.5-pre.45 at C:\Entwicklung\Flutter
• Framework revision 592c5ba (3 hours ago), 2018-06-18 06:37:01 +0100
• Engine revision c3976b3
• Dart version 2.0.0-dev.61.0.flutter-c95617b19c

[√] Android toolchain - develop for Android devices (Android SDK 27.0.3)
• Android SDK at C:\Users\escam\AppData\Local\Android\sdk
• Android NDK location not configured (optional; useful for native profiling support)
• Platform android-27, build-tools 27.0.3
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b02)
• All Android licenses accepted.

[√] Android Studio (version 3.1)
• Android Studio at C:\Program Files\Android\Android Studio
• Flutter plugin version 24.2.1
• Dart plugin version 173.4700
• Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b02)

[!] VS Code, 32-bit edition (version 1.24.1)
• VS Code at C:\Program Files (x86)\Microsoft VS Code
• Flutter extension not installed; install from
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[√] Connected devices (1 available)
• Android SDK built for x86 • emulator-5554 • android-x86 • Android 7.1.1 (API 25) (emulator)

! Doctor found issues in 1 category.

[zoechi]

Please add the output of flutter doctor
This feature was merged into master only very recently #18291
Are you using a Flutter version that contains it?

[escamoteur]

@zoechi done. It works if I set resizeToAvoidBottomPadding= true

[eseidelGoogle]

Another bug for @goderbauer's comment. :)

[alonetech]

@escamoteur try this ...... Until this is fixed, a workaround on android is to remove android:windowSoftInputMode="adjustResize" from the manifest. This is a behaviour change, but at least you can use the textfields, without blocking the whole screen.

[ghost]

@escamoteur try this ...... Until this is fixed, a workaround on android is to remove android:windowSoftInputMode="adjustResize" from the manifest. This is a behaviour change, but at least you can use the textfields, without blocking the whole screen.

iOS is also broken.

Any updates on the fix?

[asijoumi]

Hello,

I have the same issue, sometime, the resizeToAvoidBottomInset to false solved the issue, but when we have multiple textfields, we can't see the lasts because the scaffold is not resized.

[BringeRaj]

Seems this is the behaviour in Column widget as of now. Can you replace with Column widget with ListView widget and add its childrens there. It will be working fine as you have expected.

[ivan-pavliuk]

Hello,
Any updates on it, @zoechi?
(iOS and Android)

[varundroid]

Hi, any update on this? I am trying to build a signup form with submit button. Submit button needs to sit at the bottom. So now when I tap on any text field, keyboard comes up and pushes the button up, which covers the form (in case of resizeToAvoidBottomInset = true). In case of resizeToAvoidBottomInset = false, scrolling has been disabled on ListView that has all my text fields in it. Designing a simple form shouldn't be this hard :(

[narcodico]

P4 for a bug that makes an app unshippable ? This should be really high on the list sir.

[varundroid]

@RollyPeres This is how I solved my problem -

Scaffold(
        resizeToAvoidBottomPadding: true,
        body: SingleChildScrollView(
              child: Container(
              height: MediaQuery.of(context).size.height -
                    AppBar().preferredSize.height -
                    MediaQuery.of(context).padding.top -
                    MediaQuery.of(context).padding.bottom,
                  child: Column()
             )
      )
)

It makes the whole form scrollable when keyboard comes up, which is acceptable due to lack of better solution. Give it a go and see if it works for you.

[narcodico]

@varundroid thanks for suggestion, will give it a go. I'm playing around with a couple of workarounds as my tree is a bit more complex.

[VladyslavBondarenko]

Persists with current master 1.21.0-6.0.pre.129

code sample

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = new TabController(vsync: this, length: 3);
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        resizeToAvoidBottomInset: false,
        appBar: new AppBar(
          backgroundColor: Colors.white,
          centerTitle: true,
          title: new Text("Create Event"),
        ),
        body: new Center(
          child: Column(
            children: <Widget>[
              Expanded(
                child: TabBarView(
                  controller: _tabController,
                  children: [
                    SingleChildScrollView(
                      child: Container(
                        padding: EdgeInsets.symmetric(
                            horizontal: 30.0, vertical: 20.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: [
                            ClipRRect(
                              borderRadius:
                                  BorderRadius.all(Radius.circular(10.0)),
                              child: Image.network(
                                'https://flutter.dev/images/flutter-logo-sharing.png',
                              ),
                            ),
                            Padding(
                              padding: const EdgeInsets.only(top: 40.0),
                              child: Text(
                                'EVENT TITLE',
                                textAlign: TextAlign.left,
                              ),
                            ),
                            TextField(
                              decoration: InputDecoration(
                                hintText: 'Select a appealing title',
                              ),
                            ),
                            Padding(
                              padding: const EdgeInsets.only(top: 20.0),
                              child: Text(
                                'DESCRIPTION',
                                textAlign: TextAlign.left,
                              ),
                            ),
                            TextField(
                              maxLines: 8,
                              decoration: InputDecoration(
                                hintText: 'What are you planing to do?',
                              ),
                            ),
                            // Expanded(child: Container(color: Colors.blue,)),
                          ],
                        ),
                      ),
                    ),
                    Container(
                      color: Colors.red,
                    ),
                    Container(
                      color: Colors.green,
                    ),
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: TabBar(
                  labelColor: Theme.of(context).accentColor,
                  controller: _tabController,
                  tabs: [
                    Tab(
                      text: "General",
                    ),
                    Tab(
                      text: "Location & Time",
                    ),
                    Tab(
                      text: "Requirements",
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel master, 1.21.0-6.0.pre.129, on Mac OS X 10.15.6 19G73, locale en-GB)
    • Flutter version 1.21.0-6.0.pre.129 at /Users/nevercode/dev/flutter
    • Framework revision 30aef0a3b9 (14 hours ago), 2020-07-30 14:20:21 -0700
    • Engine revision a9910e409c
    • Dart version 2.10.0 (build 2.10.0-1.0.dev 24c7666def)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /Users/nevercode/Library/Android/sdk
    • Platform android-29, build-tools 29.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.6, Build version 11E708
    • CocoaPods version 1.9.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.47.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.12.2

[✓] Connected device (6 available)
    • Redmi Note 7 (mobile)       • 6345c469                                 • android-arm64  • Android 9 (API 28)
    • Nevercode’s iPhone (mobile) • b668e524315069f3db3661ac11ff1f66afafebdb • ios            • iOS 13.6
    • iPhone 11 Pro Max (mobile)  • 55C8466B-5367-492B-8EFE-EC45D980571F     • ios            • com.apple.CoreSimulator.SimRuntime.iOS-13-6 (simulator)
    • macOS (desktop)             • macos                                    • darwin-x64     • Mac OS X 10.15.6 19G73
    • Web Server (web)            • web-server                               • web-javascript • Flutter Tools
    • Chrome (web)                • chrome                                   • web-javascript • Google Chrome 84.0.4147.105

• No issues found!

[Victor-Dev77]

Thanks @varundroid ! , your code works but it's a shame to have not very clean workarounds... :/

[Nashati]

Hi,
The second example from here https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html helped me solve a similar problem, check that out!

[darshankawar]

Verifying this using latest versions, the current property is resizeToAvoidBottomInset and per documentation, the original behavior reported is expected:

If true the [body](https://api.flutter.dev/flutter/material/Scaffold/body.html) and the scaffold's floating widgets should size themselves to avoid the onscreen keyboard whose height is defined by the ambient [MediaQuery](https://api.flutter.dev/flutter/widgets/MediaQuery-class.html)'s [MediaQueryData.viewInsets](https://api.flutter.dev/flutter/widgets/MediaQueryData/viewInsets.html) bottom property.

For example, if there is an onscreen keyboard displayed above the scaffold, the body can be resized to avoid overlapping the keyboard, which prevents widgets inside the body from being obscured by the keyboard.

Defaults to true.

https://api.flutter.dev/flutter/material/Scaffold/resizeToAvoidBottomInset.html

Per above documentation, I am going ahead and closing this as WAI. If anybody disagrees, please open a new issue using latest framework code so that we can address it accordingly.

[github-actions]

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.