FlutterのTextFieldをタップするとリロードされる

Flutterで、TextFieldに入力された文字で検索をかけるという機能を作成しております。
iosでは期待通りに動くのですが、Androidでは文字を入力しようとタップすると画面全体がリロードされてしまい、文字を入力することができません。

画面が表示される
→TextFieldをタップする
→キーボードが出てくるがすぐに画面がリロードされる(通信中と表示される)
→画面が表示されると初期の状態に戻っている

リロードしないようにしたいのですが、調べても解決できないため、お力をお借りできればと思います。
よろしくお願いいたします。

Flutter
1// 呼び出し元
2// ボタンをタップすると次の画面へ遷移するようになっています
3onPressed: () {
4  Navigator.push(context, MaterialPageRoute(builder: (context) => const test(searchText: "searchText")));
5}

Flutter
1class test extends StatefulWidget {
2  const GolfCourseSearch({Key? key, required this.searchText}) : super(key: key);
3  final String searchText;
4
5
6  @override
7  _test createState() => _test();
8}
9
10class _test extends State<test> {
11
12  Future<String> getApiData() async {
13    // APIを使用してデータを取得している
14  }
15
16  late BehaviorSubject<int> _events;
17
18  @override
19  void initState() {
20    super.initState();
21    _events = BehaviorSubject<int>();
22    _events.add(0);
23  }
24
25  @override
26  void dispose() {
27    _events.close();
28    super.dispose();
29  }
30
31  @override
32  Widget build(BuildContext context) {
33    return Scaffold(
34      appBar: header(),
35      body: FutureBuilder(
36          future: getApiData(), 
37          builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
38
39            if (snapshot.connectionState == ConnectionState.waiting) {
40              return Text("通信中");
41            }
42
43            if (snapshot.hasData) {
44              // 省略
45              TextField(
46                onChanged: (String searchText) {
47                  // ここにログを置いても表示されない
48                  // リストから検索して結果部分だけ更新する
49                },
50
51                // ↓あってもなくても変わりませんでした
52                // controller: TextEditingController(text: widget.searchText),
53              )
54            }
55          }
56        )
57      )
58  }
59}

TextFieldにカーソルが入ったときに表示されるログです。

I/AssistStructure(30223): Flattened final assist data: 456 bytes, containing 1 windows, 3 views
D/InputConnectionAdaptor(30223): The input method toggled cursor monitoring on

追記1
回答をいただきましたので試してみましたがうまく動きませんでした。
コード、ログ等を追加いたしましたので、お気づきの点がございましたら引き続きよろしくお願いいたします。

追記2
以下のように変更することで画面が変わることなく入力ができるようになりました。
ただ、見た目が変わらないだけでTextFieldにカーソルが入るたびにgetApiDataは通っているようなので、最初のみgetApiDataを通るようにしたいです。

Flutter
1class _test extends State<test> {
2  // apiを通ったかどうかのフラグ
3  bool flag = true;
4  Future<String> getApiData() async {
5    // APIを使用してデータを取得している
6  }
7
8// 省略
9
10  @override
11  Widget build(BuildContext context) {
12    return Scaffold(
13      appBar: header(),
14      body: FutureBuilder(
15          future: getApiData(), 
16          builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
17
18            if (flag && snapshot.connectionState == ConnectionState.waiting) {
19              // apiを通ったらフラグを変える
20              flag = false;
21              return Text("通信中");
22            }
23// 省略
24          }
25        )
26      )
27  }
28}

追記3
TextField外をタップした際にキーボードが閉じるように変更したところ、キーボードが閉じるタイミングでまたリロードが入りました。
TextFieldにカードルがあるかどうかではなく、キーボードの動作に関連しているように感じます。
また、追記2で入力がうまくできると記載しましたが、入力中は問題なくソートして表示してくれるのですが、TextField外タップでソートしていた内容が初期化されてしまったので意味はないようです。

回答1件

ベストアンサー

--追記1
textfield FutureBuilderで調べるとキーボードの表示、消去でウィジェットのリロードが行われるという情報がありました。
(FutureBuilderの中にあるということは見落としてました）
こちらに関しては、私の方で再現できる環境は構築できませんでしたので、対処方法を答えることはできません。

もしtextfieldがリビルドされて困るということであれば、FutureBuilderの外にtextfieldを置いて、検索時には入力不可にするなどの対処をした方がいいのではないでしょうか。

--ひとつ前の回答
呼び出し側がどういった実装をしているか不明なので予想ですが、TextEditingControllerの作成位置がcontrollerなんで、TextField再作成時に毎回TextEditingControllerが作成されてしまうのが問題じゃないでしょうか。

手持ちのサンプルプログラムでcontroller: TextEditingController()と記述すると文字列の入力ができなくなりましたのでたぶんそうじゃないかと。

TextEditingControllerオブジェクトは_testのメンバーとして作っておいて、controller:にはその変数を割り当てるのが良いんじゃないでしょうか。

投稿2022/03/07 12:07

編集2022/03/08 03:48