【Flutter】文字入力中に画面上部に移動してしまう問題を解消

記事内に商品プロモーションを含む場合があります

技術メモ

Flutterでアプリを開発している途中で、フォームの入力中に画面が上部に戻ってしまう問題が発生しました。

こんな感じです。

 

 

ちなみにSingleChildScrollViewでラップしてスクロール可能にしています。

 

開発環境

  • MacBook Pro (macOS Catalina バージョン10.15.1)
  • Flutter 1.12.13+hotfix.5 channel stable
  • Dart 2.7.0

 

 

どうして文字入力中に画面上部に移動してしまうのか

この原因は以下の通りです。

①フォームに文字が入力されるたびにsetStateが呼び出される

buildメソッド内でUniqueKey()しているので、setStateが呼び出されるたびに新しいKeyが生成されて画面上部に移動する

 

ということで、buildメソッド内でKeyを生成するのではなく、外で生成するように変更します。

final _formKey = UniqueKey();
@override
  Widget build(BuildContext context) {
               〜省略〜
  }

 

これでフォームの入力中に画面が上部に戻らなくなりました。

 

 

 

日本語でFlutterの概要を知るなら以下の書籍がオススメです。

 

技術メモ
スポンサーリンク
スポンサーリンク
のすけをフォローする
やばブロ!

コメント