Issue in custom flutter search widget's search results selection – flutter web

Issue

I build a simple search widget for flutter web. Everything working fine but after I got the search results, I have to click twice on the result to select a specific search result. Please help me to figure out the problem. I tried for several day but no luck. I’m using flutter 2.5.2 version.

darpad link to run the code

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() {
  runApp(MaterialApp(
    home: SearchView(),
  ));
}

class SearchView extends StatefulWidget {
  @override
  State<SearchView> createState() => _SearchViewState();
}

class _SearchViewState extends State<SearchView> {
  String searchResult = '';
  final textController = TextEditingController();
  final List<String> data = ['Result 1', 'Result 2', 'Result 3', 'Result 4'];

  Future<List<String>> loadData() {
    return Future.delayed(Duration(seconds: 1), () {
      if (this.textController.text.trim().length != 0) {
        return data;
      } else {
        return [];
      }
    });
  }

  @override
  void initState() {
    this.textController.addListener(this._onTextChanged);
    super.initState();
  }

  void _onTextChanged() {
    print('text cahnged');
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Brand'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            TextFormField(
              controller: this.textController,
            ),
            FutureBuilder(
              future: loadData(),
              builder:
                  (BuildContext context, AsyncSnapshot<List<String>> snapshot) {
                if (snapshot.connectionState == ConnectionState.done &&
                    snapshot.hasData) {
                  print("future build");
                  return Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      for (String result in snapshot.data)
                        InkWell(
                          onTap: () {
                            print('Clicked');
                            setState(() {
                              this.textController.clear();
                              this.searchResult = result;
                            });
                          },
                          child: Text(result),
                        ),
                    ],
                  );
                } else {
                  return CircularProgressIndicator();
                }
              },
            ),
            Text('Search result is ${searchResult}'),
          ],
        ),
      ),
    );
  }
}

Please help me to fix this issue. Thank you and have a nice day

Solution

This weird behavior happens because of a flutter issue. Before flutter version 2.5, Text change listeners only listen for text changes. But from version 2.5, listeners also listen for focus change events. Need to use onChanged method in TextFormField until flutter fix the issue.

Answered By – rosh-dev

Answer Checked By – Senaida (FlutterFixes Volunteer)