'Keyboard slides up and covers the TextField in Flutter

When I run the pure Flutter project and the keyboard activates the TextField() moves above it and self-adapts. But when I add Flutter module to native project, the keyboard covers the textfield.

I don't know how to solve this problem.

Flutter:

class HomeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          'this is a project to test keyboard',
        ),

        Flexible(
          fit: FlexFit.tight,
          child: CustomScrollView(
            slivers: <Widget>[

              SliverToBoxAdapter(
                child: SizedBox(
                  width: 100,
                  height: 160,
                  child: Container(
                    color: Colors.blue,
                  ),
                ),
              ),

              SliverToBoxAdapter(
                child: SizedBox(
                  width: 100,
                  height: 140,
                  child: Container(
                    color: Colors.grey,
                  ),
                ),
              ),

              SliverToBoxAdapter(
                child: SizedBox(
                  width: 100,
                  height: 120,
                  child: Container(
                    color: Colors.red,
                  ),
                ),
              ),

              SliverToBoxAdapter(
                child: SizedBox(
                  width: 100,
                  height: 100,
                  child: Container(
                    color: Colors.deepPurple,
                  ),
                ),
              ),

              SliverToBoxAdapter(
                child: TextField(
                  decoration: InputDecoration(
                      hintText: 'this is first input text'
                  ),
                ),
              ),

              SliverToBoxAdapter(
                child: Padding(padding: EdgeInsets.only(top: 20),),
              ),

              SliverToBoxAdapter(
                child: TextField(
                  decoration: InputDecoration(
                      hintText: 'this is second input text'
                  ),
                ),
              ),
            ],
          ),
        ),

        Container(
          color: Colors.grey[400],
          padding: EdgeInsets.all(8),
          height: 50,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              FlatButton(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(2)
                  ),
                  color: Colors.black,
                  textColor: Colors.white,
                  onPressed: () {
                  },
                  child: Text(
                      'button1'
                  )
              ),
              FlatButton(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(2)
                  ),
                  color: Colors.black,
                  textColor: Colors.white,
                  onPressed: () {

                  },
                  child: Text(
                      'button2'
                  )
              ),
              FlatButton(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(2)
                  ),
                  color: Colors.black,
                  textColor: Colors.white,
                  onPressed: () {

                  },
                  child: Text(
                      'button3'
                  )
              )
            ],
          ),
        )
      ],
    );
  }

}

native:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//        setContentView(R.layout.activity_main);
//
//        FrameLayout container = findViewById(R.id.container);

        FlutterView flutterView = Flutter.createView(this, getLifecycle(), "route");
        addContentView(flutterView, new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT));
    }
}

this is pure flutter project: https://github.com/longdw/flutter_keyboard

this is native project contain flutter module: https://github.com/longdw/keyboard_host

android flutter

Solution 1:^[1]

In your Scaffold you can use the property

resizeToAvoidBottomInset: false,

It won't move the content. Here are the corresponding docs.

resizeToAvoidBottomPadding is deprecated after Flutter v1.1.9.

Solution 2:^[2]

You can wrap your body in to SingleChildScrollView

https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

I made small change just added TextFiled inside Column. Hope its workfine for you.

    import 'package:flutter/material.dart';
    void main() => runApp(new MyApp());
    class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
        title: 'NonStopIO',
        theme: new ThemeData(
            primarySwatch: Colors.red,
        ),
        home: new HomeWidget(),
        );
    }
    }

    class HomeWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
        appBar: AppBar(
            // Here we take the value from the MyHomePage object that was created by
            // the App.build method, and use it to set our appbar title.
            title: Text("hello"),
        ),
        body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
            Text(
            'this is a project to test keyboard',
            ),

            Flexible(
            fit: FlexFit.tight,
            child: CustomScrollView(
                slivers: <Widget>[

                SliverToBoxAdapter(
                    child: SizedBox(
                    width: 100,
                    height: 160,
                    child: Container(
                        color: Colors.blue,
                    ),
                    ),
                ),

                SliverToBoxAdapter(
                    child: SizedBox(
                    width: 100,
                    height: 140,
                    child: Container(
                        color: Colors.grey,
                    ),
                    ),
                ),

                SliverToBoxAdapter(
                    child: SizedBox(
                    width: 100,
                    height: 120,
                    child: Container(
                        color: Colors.red,
                    ),
                    ),
                ),

                SliverToBoxAdapter(
                    child: SizedBox(
                    width: 100,
                    height: 100,
                    child: Container(
                        color: Colors.deepPurple,
                    ),
                    ),
                ),
                ],
            ),
            ),
        TextField(
            decoration: InputDecoration(
                hintText: 'this is first input text'
            )
            ),

            TextField(
            decoration: InputDecoration(
            hintText: 'this is lst input text'
            )
        ),

            Container(
            color: Colors.grey[400],
            padding: EdgeInsets.all(8),
            height: 50,
            child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                FlatButton(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(2)
                    ),
                    color: Colors.black,
                    textColor: Colors.white,
                    onPressed: () {
                    },
                    child: Text(
                        'button1'
                    )
                ),
                FlatButton(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(2)
                    ),
                    color: Colors.black,
                    textColor: Colors.white,
                    onPressed: () {

                    },
                    child: Text(
                        'button2'
                    )
                ),
                FlatButton(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(2)
                    ),
                    color: Colors.black,
                    textColor: Colors.white,
                    onPressed: () {

                    },
                    child: Text(
                        'button3'
                    )
                )
                ],
            ),
            ),
        ],
        )
        );
    }
    }

Solution 3:^[3]

I solved by removing

<item name="android:windowFullscreen">true</item>

in app/src/main/res/values/styles.xml

Don't know why it was there :)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Throvn
Solution 2
Solution 3	Fabrizio Tognetto

'Keyboard slides up and covers the TextField in Flutter

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]