when user type in the textfield the api call is made and show the suggested response. i called the api in onchange function is it the good approach? because when ever user type or remove it should take response from server if there is any better approach can you suggest?. and other Question is i used the listview.builder to map the data of api resonse with ternary operators i don't think it is a best approach to do this below is my code for showing data it is working perfectly fine but i need better approach.

          child: Container(
            height: MediaQuery.of(context).size.height*0.8,
            width: MediaQuery.of(context).size.width,
            color: Colors.white,
            Consumer<AuthProvider>(builder: (context,i,_){
              return i.Loader?
              const Center(child: CircularProgressIndicator(color: Colors.grey,),):
              searchtxt.text.isNotEmpty && i.data.isEmpty?const Center(child: Text("no data found"),):  Scrollbar(
                    itemCount: i.data.length,
                    scrollDirection: Axis.vertical,
                    itemBuilder: (BuildContext context, int index) {

                      return Column(
                        children: [
                              tileColor: Colors.grey[300],
                              leading: const Icon(Icons.list),
                              subtitle: Text(i.data[index].parent.name),
                              // trailing:  Text(i.data[index].name,
                              //   style: const TextStyle(color: Colors.green, fontSize: 15),
                              // ),
                              title: Text(i.data[index].name)
                          const Divider(height: 1,color: Colors.grey,)