Quando o teclado aparece, os widgets Flutter são redimensionados. Como evitar isso?

Eu tenho uma coluna 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 com isso:

convertFrom, inclui um TextField. Quando toco neste campo de texto, o teclado Android aparece na tela. Isso muda o tamanho da tela, para que os widgets sejam redimensionados assim:

Existe uma maneira de fazer com que o teclado "sobreponha" a tela para que minha coluna não seja redimensionada? Se eu não usar Expandedwidgets e codificar uma altura para cada widget, os widgets não são redimensionados, mas recebo o erro de listras pretas e amarelas quando o teclado aparece (porque não há espaço suficiente). Isso também não é flexível para todos os tamanhos de tela.

Não tenho certeza se este é um específico do Android ou específico do Flutter.

Resposta Atualizada

resizeToAvoidBottomPaddingagora está obsoleto .

A solução atualizada é definir a resizeToAvoidBottomInsetpropriedade como false.

Resposta Original

Em seu Scaffold, defina a resizeToAvoidBottomPaddingpropriedade como false.

A maioria das outras respostas sugere o uso resizeToAvoidBottomPadding=false. Na minha experiência, isso permite que o teclado cubra campos de texto se eles estiverem abaixo de onde o teclado apareceria.

Minha solução atual é forçar minha coluna a ter a mesma altura da tela e, em seguida, colocá-la em um SingleChildScrollViewpara que o Flutter role automaticamente minha tela para cima apenas o suficiente quando o teclado for usado.

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

Eu uso NeverScrollableScrollPhysicspara que o usuário não possa rolar sozinho.

Definido resizeToAvoidBottomInsetcomo em falsevez de resizeToAvoidBottomPaddingque está obsoleto.

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

Minha abordagem é usar SingleChildScrollViewcom a ClampingScrollPhysicsfísica.

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

Método 1: Remova android:windowSoftInputMode="adjustResize"do arquivo AndroidManifest.xml (caso contrário, ele substituirá o código de flutter) e adicione o resizeToAvoidBottomPadding: falseScaffold como a seguir:

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

Método 2 (não recomendado): Basta adicionar android:windowSoftInputMode="stateVisible"AndroidManifest.xml em atividade, ele só funcionará para Android e não para IOS.

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

Nota: Não defina comoandroid:windowSoftInputMode="adjustResize"

Bem, eu acho que se implementarmos a solução de @Aman, isso fará com que nosso aplicativo se comporte feio como quando o teclado aparece, não ajustará nossa janela de visualização da tela de acordo com a altura disponível e fará com que outros campos se escondam atrás do teclado. Então, eu sugeriria usar em seu SingleChildScrollViewlugar.

Envolva seu código SingleChildScrollViewconforme fornecido a seguir,

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

Dependendo do caso de uso, você também pode considerar o uso de uma exibição de lista . Isso garantiria que o conteúdo rolar quando não houver espaço suficiente. Como exemplo, você pode ver a demonstração do campo de texto no aplicativo de galeria

Minha sugestão é usar resizeToAvoidBottomInset: falseassim mesmo para evitar que os widgets sejam redimensionados se o teclado aparecer repentinamente na tela. Por exemplo, se um usuário usa o chat do Facebook enquanto está em seu aplicativo.

Para evitar que o teclado se sobreponha aos widgets, nas telas onde for necessário, sugiro a seguinte abordagem, em que a altura é SingleChildScrollViewreduzida à altura do espaço disponível. Nesse caso, SingleChildScrollViewtambém rola para o widget em foco.

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

Para mim, alterando a propriedade do item abaixo de verdadeiro para falso

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

no arquivo

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

fez o Flutter arrastar todo o conteúdo da página para cima no foco de entrada

Eu estava enfrentando o mesmo problema e comecei a tentar soluções aleatórias para corrigi-lo e de repente isso resolveu.

Envolva o contêiner pai principal em SingleChildScrollView () e atribua a altura do dispositivo, ou seja, device_height = MediaQuery.of (context) .size.height.

Isso tornará a página inteira rolável, mas não redimensionará nenhum widget.