【Flutter】キーボードを表示した時フォームが隠れない様にする

・キーボードの高さを取得

final bottomSpace = MediaQuery.of(context).viewInsets.bottom;

・スクロール可能にするためにSingleChiledScrollViewで全体をラップ

この時スクロールの向きを逆にするために、reverseにtrueを指定

return Scaffold(
   body: SingleChildScrollView(
     reverse: true,
     child: Form(
       ...

・resizeToAvoidBottomInsetプロパティをfalseに

final bottomSpace = MediaQuery.of(context).viewInsets.bottom;
Widget build{
 return Scaffold(
   resizeToAvoidBottomInset: false,
   body: SingleChildScrollView(
     reverse: true,
     child: Form(
       ...
     ),
   ),
 );
}

Paddingを追加して、取得したbottom分の余白をとる

final bottomSpace = MediaQuery.of(context).viewInsets.bottom;
Widget build{
 return Scaffold(
   resizeToAvoidBottomInset: false,
   body: SingleChildScrollView(
     reverse: true,
     child: Padding(
       padding: EdgeInsets.only(bottom: bottomSpace),
       child: Form(
         ...
       ),
     ),
   ),
 );
}

参考


この記事が気に入ったらサポートをしてみませんか?