How to show search results below my search bar? - flutter

Question

I already have an app which has a search bar and can search and find the search results in the background. However, I don't know how to display it right below my search bar, or anywhere in the HomeScreen.
Please help me connect the two parts.
The current HomePage looks something like this,
import 'package:flutter/material.dart';
import 'dart:developer' as devtools show log;
...
class HomePage extends StatefulWidget {
const HomePage({super.key});
#override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
// Initial marker location
LatLng markerPoint = LatLng(12.9716, 77.5946);
final LocationService _locationService = getIt<LocationService>();
...
LatLng get currentMarkerPoint => markerPoint;
#override
Widget build(BuildContext context) {
return Stack(
children: [
FlutterMap(
...
SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// Here I have the card which contains the search bar
// I want the search results to be displayed right below this.
Card(
child: TextField(
decoration: const InputDecoration(
prefixIcon: Icon(Icons.location_on_outlined),
hintText: "Search for a location",
contentPadding: EdgeInsets.all(16.0),
),
onChanged: (text) async {
if (text.isEmpty || text.length < 3) {
return;
}
LatLng pos = await _locationService.currentLocation;
var locations = await _locationSearch
.searchNearCurrentPosition(text, pos);
},
),
),
],
),
),
),
],
);
}
}
I have managed to work around with some backend and managed to store my search results inside of a widget in a class named HomePageSearchListView which is defined as below
import 'package:flutter/material.dart';
import 'package:geoalarm/services/location_search/location_entities.dart';
import 'dart:developer' as devtools show log;
typedef LocationCallback = void Function(LocationEntity location);
class HomePageNotesListView extends StatelessWidget {
final List<LocationEntity> locations;
final LocationCallback onTap;
const HomePageNotesListView({
Key? key,
required this.locations,
required this.onTap,
}) : super(key: key);
#override
Widget build(BuildContext context) {
devtools.log(locations.length.toString());
return ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: locations.length,
itemBuilder: (context, index) {
final location = locations.elementAt(index);
devtools.log(location.country);
return ListTile(
title: Text(location.name),
subtitle:
Text("${location.state}, ${location.country}, ${location.point}"),
onTap: () => onTap(location),
);
},
);
}
}
The problem is that I do not know how to use this class that I made appear below the search bar in my homepage.
Help would be appreciated.

Answer 1

after a bit of research and help from another answer to this same question. (Which is now deleted) I have found solution to this problem.
You could just use the Search Delegate class which is an already pre implemented search UI for flutter except that you'd have to implement the results that you want to show and the suggestions you have to show.
A whole lot of customisation is not available but this should work for most apps which are struggling to implement a search screen.