Flutter dart get continuous data from on changed function using future provider - flutter

Question

I want to add search functionality from Api. It is a backend search, so I get data continuous when clicked on on-changed function. I use future provider to get data. Please tell how can I achieve that.
Here Is my design what I want to do. Ui Image Demo
Also Here Is my code demo
`
class SearchPage extends StatelessWidget {
const SearchPage({super.key});
#override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider(create: (context) => SearchProvider()),
],
child: Consumer<SearchProvider>(
builder: (context, value, child) => Scaffold(
appBar: BuildSearchAppBar(),
body: Body()
),
),
);
}
}
class BuildSearchAppBar extends StatelessWidget with PreferredSizeWidget {
BuildSearchAppBar({super.key});
#override
Size get preferredSize => const Size.fromHeight(kToolbarHeight);
#override
Widget build(BuildContext context) {
SearchProvider provider = Provider.of<SearchProvider>(context);
return AppBar(
title: TextField(
controller: provider.textEditingController,
decoration: InputDecoration(
alignLabelWithHint: true,
floatingLabelBehavior: FloatingLabelBehavior.never,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(6.r),
),
constraints: BoxConstraints.tight(Size(1.sw, 40.h)),
labelText: "Search",
prefixIcon: Icon(
Icons.search,
size: 20.r,
),
labelStyle: TextStyle(fontSize: 15.sp, fontStyle: FontStyle.italic),
),
onChanged: (value) {
provider.showProductSuggetion();
},
),
actions: [
IconButton(
onPressed: () {
provider.textEditingController.clear();
},
icon: const Icon(Icons.clear),
),
],
);
}
}
class SearchProvider with ChangeNotifier {
bool isClicked = false;
final TextEditingController textEditingController = TextEditingController();
void showProductSuggetion() {
isClicked = true;
FutureProvider(
create: (_) => searchSuggestionService(textEditingController.text),
initialData: SearchSuggetionModel());
notifyListeners();
}
Future<SearchSuggetionModel> searchSuggestionService(String keyword) async {
Map<String, Map<String, Object>> singleProductVariable = {
"productPrams": {"search": keyword, "visibility": true, "approved": true}
};
QueryResult queryResult = await qlclient.query(
QueryOptions(
document: gql(QueryDocument.searchSuggestion),
variables: singleProductVariable),
);
var data = queryResult.data as Map<String, dynamic>;
print(data);
var body = SearchSuggetionModel.fromJson(data);
notifyListeners();
return body;
}
}
I want to implement backend search with continues data fetching using provider.