When i select a Textfield the keyboard moves over

问题:

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

Thank you.

回答1:

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,
              )
            ],
          ),
        ),
      ),
    );
  }
}

回答2:

A pretty short way to realize this is by simply using a MediaQuery for getting the bottom view insets. This would look as follows:

...
return Row(
  children: <Widget>[
    TextField(
      decoration: InputDecoration.collapsed(hintText: "Start typing ..."),
      controller: _chatController,
    ),
    SizedBox(
      height: MediaQuery.of(Context).viewInsets.bottom,
    ),
  ],
);
...

Hope it helps!

回答3:

Just cut and paste your body code in this -

SingleChildScrollView(
            child: Stack(
              children: <Widget>[
                  // your body code 
               ],
             ),
           ),

回答4:

It's not necessary to handle animations manually. Just wrap your text fields by SingleChildScrollView:

SingleChildScrollView(
  child: Column(
    children: <Widget>[
      TextField(),
      TextField(),
      TextField(),
      TextField(),
      TextField()
  ]
)

SingleChildScrollView in Flutter is the same thing as TPKeyboardAvoiding in iOS

回答5:

<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(),
     ]
)