Cuando aparece el teclado, los widgets de Flutter cambian de tamaño. ¿Cómo prevenir esto?

Tengo una columna de widgets expandidos como este:

 return new Container(
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          new Expanded(
            flex: 1,
            child: convertFrom,
          ),
          new Expanded(
            flex: 1,
            child: convertTo,
          ),
          new Expanded(
            flex: 1,
            child: description,
          ),
        ],
      ),
    );

Se parece a esto:

convertFrom, incluye un TextField. Cuando toco este campo de texto, el teclado de Android aparece en la pantalla. Esto cambia el tamaño de la pantalla, por lo que los widgets cambian de tamaño así:

¿Hay alguna manera de que el teclado "superponga" la pantalla para que mi columna no cambie de tamaño? Si no utilizo Expandedwidgets y codifico una altura para cada widget, los widgets no cambian de tamaño, pero aparece el error de rayas negras y amarillas cuando aparece el teclado (porque no hay suficiente espacio). Esto tampoco es flexible para todos los tamaños de pantalla.

No estoy seguro de si esto es específico de Android o de Flutter.

En su Scaffold, establezca la resizeToAvoidBottomInsetpropiedad en false.

La propiedad "resizeToAvoidBottomPadding" está obsoleta ahora .... En su Scaffold, establezca la resizeToAvoidBottomPaddingpropiedad en false.

La mayoría de las otras respuestas sugieren usar resizeToAvoidBottomPadding=false. En mi experiencia, esto permite que el teclado cubra los campos de texto si están debajo de donde aparecería el teclado.

Mi solución actual es forzar mi columna a tener la misma altura que la pantalla, luego colocarla de SingleChildScrollViewmanera que Flutter se desplace automáticamente lo suficiente por la pantalla cuando se usa el teclado.

Widget build(BuildContext context) {
  return Scaffold(
    body: SingleChildScrollView(
      physics: NeverScrollableScrollPhysics(),
      child: ConstrainedBox(
        constraints: BoxConstraints(
          minWidth: MediaQuery.of(context).size.width,
          minHeight: MediaQuery.of(context).size.height,
        ),
        child: IntrinsicHeight(
          child: Column(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              // CONTENT HERE
            ],
          ),
        ),
      ),
    ),
  );
}

Lo uso NeverScrollableScrollPhysicspara que el usuario no pueda desplazarse por sí mismo.

Establecer en resizeToAvoidBottomInseten falselugar de resizeToAvoidBottomPaddingque está obsoleto.

    return Scaffold(
      resizeToAvoidBottomInset : false,
      body: YourWidgets(),
    );

Método 1: Quitar android:windowSoftInputMode="adjustResize"del archivo AndroidManifest.xml (De lo contrario se anulará el código aleteo) y añadir resizeToAvoidBottomPadding: falseen Andamios, como a continuación:

Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: AppBar()
)

Método 2 (no recomendado): simplemente agregue android:windowSoftInputMode="stateVisible"AndroidManifest.xml de Android en la actividad, solo funcionará para Android y no para IOS.

<activity
       ...
        android:windowSoftInputMode="stateVisible">

Nota: No lo configure enandroid:windowSoftInputMode="adjustResize"

Bueno, creo que si implementamos la solución de @ Aman, nuestra aplicación se comportará mal, ya que cuando aparece el teclado, no ajustará nuestra ventana de visualización de la pantalla según la altura disponible y hará que otros campos se escondan detrás del teclado. Así que sugiero usarlo SingleChildScrollViewen su lugar.

Envuelva su código SingleChildScrollViewcomo se indica a continuación,

 return new Container(
  child: SingleChildScrollView(
    child: new Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      new Expanded(
        flex: 1,
        child: convertFrom,
      ),
      new Expanded(
        flex: 1,
        child: convertTo,
      ),
      new Expanded(
        flex: 1,
        child: description,
      ),
    ],
  ),
 ),
);

Dependiendo del caso de uso también se puede considerar el uso de una vista de lista . Eso aseguraría que el contenido se desplazara cuando no hay suficiente espacio. A modo de ejemplo, se puede ver en el campo de texto de demostración de la aplicación Galería

Mi enfoque es utilizarlo SingleChildScrollViewcon la ClampingScrollPhysicsfísica.

SingleChildScrollView(
  physics: ClampingScrollPhysics(),
  child: Container(),
)

Para mí, cambiar la propiedad del artículo a continuación de verdadero a falso

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

en archivo

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

ha hecho que Flutter arrastre todo el contenido de la página hacia arriba en el foco de entrada

Mi sugerencia es usarlo de resizeToAvoidBottomInset: falsetodos modos para evitar que los widgets cambien de tamaño si el teclado aparece repentinamente en la pantalla. Por ejemplo, si un usuario usa cabezas de chat de Facebook mientras está en su aplicación.

Para evitar que el teclado se superponga a los widgets, en las pantallas donde lo necesite, sugiero el siguiente enfoque, donde se SingleChildScrollViewreduce la altura a la altura del espacio disponible. En este caso, SingleChildScrollViewtambién se desplaza hasta el widget enfocado.

final double screenHeight = MediaQuery.of(context).size.height;
final double keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
return Scaffold(
  resizeToAvoidBottomInset: false,
  body: SizedBox(
    height: screenHeight - keyboardHeight,
    child: SingleChildScrollView(
      child: Column(
        children: [
          const SizedBox(height: 200),
          for (var i = 0; i < 10; i++) const TextField()
        ],
      ),
    ),
  ),
);