キーボードが表示されると、Flutterウィジェットのサイズが変更されます。これを防ぐ方法は？

私はこのような拡張ウィジェットの列を持っています：

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

次のようになります。

convertFrom、TextFieldが含まれます。このテキストフィールドをタップすると、Androidキーボードが画面に表示されます。これにより画面サイズが変更されるため、ウィジェットのサイズは次のようになります。

列のサイズが変更されないように、キーボードで画面を「オーバーレイ」する方法はありますか？Expandedウィジェットを使用せず、各ウィジェットの高さをハードコーディングすると、ウィジェットのサイズは変更されませんが、キーボードが表示されたときに黒と黄色の縞模様のエラーが発生します（十分なスペースがないため）。これは、すべての画面サイズに柔軟に対応できるわけではありません。

これがAndroid固有なのかFlutter固有なのかわかりません。

更新された回答

resizeToAvoidBottomPadding現在は非推奨です。

更新された解決策は、resizeToAvoidBottomInsetプロパティをに設定することfalseです。

元の回答

でScaffold、resizeToAvoidBottomPaddingプロパティをに設定しますfalse。

他のほとんどの回答は、の使用を提案していresizeToAvoidBottomPadding=falseます。私の経験では、これにより、キーボードが表示される場所の下にある場合、キーボードがテキストフィールドを隠すことができます。

私の現在の解決策は、列を画面と同じ高さに強制SingleChildScrollViewし、キーボードを使用したときにFlutterが画面を自動的に上にスクロールするように配置することです。

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

NeverScrollableScrollPhysicsユーザーが自分でスクロールできないようにするために使用します。

非推奨の代わりにに設定resizeToAvoidBottomInsetします。falseresizeToAvoidBottomPadding

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

私のアプローチはSingleChildScrollView、ClampingScrollPhysics物理学で使用することです。

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

方法1：android:windowSoftInputMode="adjustResize" AndroidManifest.xmlファイルから削除し（そうでない場合はフラッターコードをオーバーライドします）、resizeToAvoidBottomPadding: false以下のようにScaffoldを追加します。

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

方法2（非推奨）：android:windowSoftInputMode="stateVisible"アクティビティにandroid AndroidManifest.xmlを追加するだけで、Androidでのみ機能し、IOSでは機能しません。

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

注：に設定しないでくださいandroid:windowSoftInputMode="adjustResize"

@Amanのソリューションを実装すると、キーボードが表示されたときのようにアプリが醜く動作し、使用可能な高さに従って画面のビューポートが調整されず、他のフィールドがキーボードの後ろに隠れてしまうと思います。したがって、SingleChildScrollView代わりに使用することをお勧めします。

SingleChildScrollView以下のようにコードをラップします。

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

ユースケースによっては、リストビューの使用を検討することもできます。これにより、十分なスペースがない場合にコンテンツが確実にスクロールします。例として、ギャラリーアプリのテキストフィールドデモを見ることができます

私の提案はresizeToAvoidBottomInset: false、キーボードが突然画面に表示された場合にウィジェットのサイズが変更されないようにするためにとにかく使用することです。たとえば、ユーザーがアプリ内でFacebookチャットヘッドを使用している場合です。

キーボードがウィジェットをオーバーレイしないようにするために、必要な画面で、次のアプローチをお勧めします。ここで、は高さをSingleChildScrollView使用可能なスペースの高さに減らします。この場合、SingleChildScrollViewフォーカスされたウィジェットにもスクロールします。

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

私にとって、以下のアイテムプロパティをtrueからfalseに変更します

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

ファイル内

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

Flutterが入力フォーカスですべてのページコンテンツを上にドラッグするようにしました

私は同じ問題に直面していました、そして私はそれを修正するためにランダムな解決策を試し始めました、そして突然これはそれを修正しました。

メインの親コンテナをSingleChildScrollView（）内でラップし、デバイスの高さを指定します。つまり、device_height = MediaQuery.of（context）.size.heightです。

これにより、ページ全体がスクロール可能になりますが、ウィジェットのサイズは変更されません。