When I select a Textfield the keyboard moves over it

Question

When i select a Textfield, the keyboard is going to be shown but the keyboard hide my selected TextField. Does someone have a solution?

Answer 1

The most simple way is to just wrap it with

SingleChildScrollView( ... )

When the textfield is on the page bottom and the keyboard appears, the textfield is automatically scrolled up. Then the text may be entered right above the keyboard.

Answer 2

<activity
        android:name="..ActivityName"
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
        android:hardwareAccelerated="true"
        android:windowSoftInputMode="adjustResize"/>

only for android if you use FlutterFragment add configChanges and windowSoftInputMode for the Activity.

another way add your TextField to a ListView

ListView(
   children: <Widget>[
     TextField(),
     TextField(),
     ]
)

Answer 3

Compose an animation and move your TextField container up when a TextField gets focus.

For learning about composing animations refer to: Composing Animations and Chaining Animations in Dart's Flutter Framework

Use Flutter's FocusNode to detect the focus on a TextField

Edit:

Here I've written an example that does exactly what you want:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Animation Demo',
      theme: new ThemeData(
        primaryColor: new Color(0xFFFF0000),
      ),
      home: new FormDemo(),
    );
  }
}

class FormDemo extends StatefulWidget {
  @override
  _FormDemoState createState() => _FormDemoState();
}

class _FormDemoState extends State<FormDemo> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation _animation;

  FocusNode _focusNode = FocusNode();

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(vsync: this, duration: Duration(milliseconds: 300));
    _animation = Tween(begin: 300.0, end: 50.0).animate(_controller)
    ..addListener(() {
      setState(() {});
    });

    _focusNode.addListener(() {
      if (_focusNode.hasFocus) {
        _controller.forward();
      } else {
        _controller.reverse();
      }
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    _focusNode.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false, // this avoids the overflow error
      appBar: AppBar(
        title: Text('TextField Animation Demo'),
      ),
      body: new InkWell( // to dismiss the keyboard when the user tabs out of the TextField
        splashColor: Colors.transparent,
        onTap: () {
          FocusScope.of(context).requestFocus(FocusNode());
        },
        child: Container(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            children: <Widget>[
              SizedBox(height: _animation.value),
              TextFormField(
                decoration: InputDecoration(
                  labelText: 'I move!',
                ),
                focusNode: _focusNode,
              )
            ],
          ),
        ),
      ),
    );
  }
}

Answer 4

The above does not work if you have a CustomScrollview in a NestedScrollView.

1. First, you need to give the TextField a focusNode.

   TextField(focusNode:_focusNode(),
     ...);
   

2. Use NestedScrollViewState to get access to the innerScrollController of the NestedScrollView. You can view the example here on how to get the innerScrollController. Declare a globalKey and assign it to NestedScrollView.

    body: NestedScrollView(
       key: globalKey,
       ...)
   

3. Setup the focusNode Listener to listen for when the textfield has been activated and animate the innerScrollController accordingly.

    void initState() {
      super.initState();

      _focusNode.addListener(() {
        if (_focusNode.hasFocus) {

          double innerOffSet = globalKey.currentState.innerController.offset;
          if(innerOffSet < 100)
            globalKey.currentState.innerController.jumpTo(innerOffSet+100);
      }

    });


  }

Answer 5

var _contentController;

void _settingModalBottomSheet(BuildContext context, String initialText) {
   _contentController = new TextEditingController(text: initialText);
    showModalBottomSheet(
        context: context,
        isDismissible: true,
        builder: (BuildContext bc) {
          return Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Container(
                height: 40,
                margin: EdgeInsets.only(left: 4, right: 4, bottom: 8),
                decoration: BoxDecoration(
                  color: AppColor.bgTextFieldComment,
                  borderRadius: BorderRadius.circular(16),
                ),
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: Padding(
                          padding: EdgeInsets.only(left: 24),
                          child: TextField(
                            focusNode: _contentFocusNode,
                            autofocus: true,
                            controller: _contentController,
                            decoration: InputDecoration(
                              hintText: 'Enter Content',
                              border: InputBorder.none,
                              fillColor: AppColor.bgTextFieldComment,
                            ),
                            keyboardType: TextInputType.multiline,
                            maxLines: null,
                            style: TextStyle(
                              color: Colors.black87,
                              fontSize: 16,
                              fontStyle: FontStyle.normal,
                            ),
                          )),
                    ),
                    InkWell(
                      child: Padding(
                        padding: EdgeInsets.only(left: 4, right: 4),
                        child: Icon(
                          Icons.send,
                          color: Colors.blue,
                        ),
                      ),
                      onTap: () {
                          // do ON TAP
                      },
                    ),
                  ],
                ),
              ),
              SizedBox(
                height: MediaQuery.of(bc).viewInsets.bottom,
              ),
            ],
          );
        },).then((value) {
      print('Exit Modal');
    });
    print('request focus');
    _contentFocusNode.requestFocus();
  }

Answer 6

 Scaffold(
    resizeToAvoidBottomInset: true,
    body: SingleChildScrollView(
      child: Container(
        child: Column(
          children: <Widget>[
            TextFormField(
              decoration: InputDecoration(
                labelText: 'Enter Text',
              ),
            ),TextFormField(
              decoration: InputDecoration(
                labelText: 'Enter Text',
              ),
            ),TextFormField(
              decoration: InputDecoration(
                labelText: 'Enter Text',
              ),
            ),TextFormField(
              decoration: InputDecoration(
                labelText: 'Enter Text',
              ),
            ),TextFormField(
              decoration: InputDecoration(
                labelText: 'Enter Text',
              ),
            ),TextFormField(
              decoration: InputDecoration(
                labelText: 'Enter Text',
              ),
            ),TextFormField(
              decoration: InputDecoration(
                labelText: 'Enter Text',
              ),
            ),
            TextFormField(
              decoration: InputDecoration(
                labelText: 'Enter Text',
              ),
            )
          ],
        ),
      ),
    )
);

// resizeToAvoidBottomPadding: false isDeprecated

use resizeToAvoidBottomInset: true.