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 se "superponga" a la pantalla para que mi columna no cambie de tamaño? Si no uso 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.
Respuesta actualizada
resizeToAvoidBottomPaddingahora está en desuso .
La solución actualizada es establecer resizeToAvoidBottomInsetla propiedad en false.
Respuesta original
En su Scaffold, establezca resizeToAvoidBottomPaddingla propiedad en false.
La mayoría de las otras respuestas sugieren usar resizeToAvoidBottomPadding=false. En mi experiencia, esto permite que el teclado cubra campos de texto si están debajo de donde aparecería el teclado.
Mi solución actual es forzar que mi columna tenga la misma altura que la pantalla, luego colocarla en un lugar SingleChildScrollViewpara que Flutter desplace automáticamente mi pantalla hacia arriba lo suficiente cuando se usa el teclado.
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
physics: const 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 resizeToAvoidBottomInseten falselugar de resizeToAvoidBottomPaddingcual está en desuso.
return Scaffold(
resizeToAvoidBottomInset : false,
body: YourWidgets(),
);
Mi enfoque es utilizar SingleChildScrollViewcon la ClampingScrollPhysicsfísica.
SingleChildScrollView(
physics: ClampingScrollPhysics(),
child: Container(),
)
