Hidden list with searcher - flutter - flutter

Question

The searcher bar is not working, where did i get an error?
I get this error in the terminal when I added expanded:
RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I would like the hints from lost when searching to appear.Is everything logically arranged? I am new in flutter and not everything is clear to me.
Widget _profilePage(BuildContext context) {
(context, state) {
return SafeArea(
child: Align(
alignment: const Alignment(0, -1 / 1.6),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
_buildSearchBar(),
],
),
),
),
);
}
List<String> newAllBreed = List.from(allBreed);
static List<String> allBreed =
["Affenpinscher",
"Afghan Hound",
"Aidi",
"Airedale Terrier",
"Akbash Dog",
"Akita"];
void search(String value) {
setState(() {
newAllBreed = allBreed
.where((string) =>
string.toLowerCase().contains(value.toLowerCase()))
.toList();
});
}
Widget _buildSearchBar() {
return Column(children: [
ConstrainedBox(
constraints: const BoxConstraints.tightFor(width: 350),
child: TextFormField(
controller: controller,
onFieldSubmitted: search,
decoration: InputDecoration(
labelText: 'Search',
hintText: 'Search',
fillColor: Colors.white,
filled: true,
isDense: true,
suffixIcon: GestureDetector(
onTap: () {
controller.clear();
},
child: const Padding(
padding: EdgeInsets.symmetric(
horizontal: 10,
vertical: 10,
),
child: Icon(
Icons.clear,
size: 30,
),
),
),
prefixIcon: GestureDetector(
onTap: () {
search(controller.text);
},
/// widget isntead of normal button
// cancellationWidget: Text("Cancel"),
child: const Padding(
padding: EdgeInsets.symmetric(
horizontal: 10,
vertical: 10,
),
child: Icon(
Icons.search_outlined,
size: 30,
),
),
),
focusedBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(30),
),
borderSide: BorderSide(
width: 2,
color: Colors.teal,
),
),
disabledBorder: InputBorder.none,
border: InputBorder.none,
enabledBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(30),
),
borderSide: BorderSide(
width: 2,
color: Colors.grey,
),
),
errorBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(5),
),
borderSide: BorderSide(
width: 2,
color: Colors.red,
),
),
),
),
),
Expanded(
child: ListView(
padding: EdgeInsets.all(12.0),
children: newAllBreed.map((data) {
return ListTile(
title: Text(data),
onTap: ()=> print(data),);
}).toList(),
),
)
]);
}

Answer 1

Flutter is cool and you don't need to nest the Widgets unnecessarily. Since you are designing a typical search with list you can use Column widget instead of SingleChildScrollView. Simplified approach will be as below.
Column(children: [
TextFormField( .. ), // => Your search text box
Expanded(child: ListView( .. )) // => Search result
])
Full Snippet : For your understanding
Column(children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
controller: controller,
onFieldSubmitted: search,
decoration: InputDecoration(
labelText: 'Search',
hintText: 'Search',
fillColor: Colors.white,
filled: true,
isDense: true,
suffixIcon: GestureDetector(
onTap: () {
controller.clear();
},
child: const Padding(
padding: EdgeInsets.symmetric(
horizontal: 10,
vertical: 10,
),
child: Icon(
Icons.clear,
size: 30,
),
),
),
prefixIcon: GestureDetector(
onTap: () {
search(controller.text);
},
/// widget isntead of normal button
// cancellationWidget: Text("Cancel"),
child: const Padding(
padding: EdgeInsets.symmetric(
horizontal: 10,
vertical: 10,
),
child: Icon(
Icons.search_outlined,
size: 30,
),
),
),
focusedBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(30),
),
borderSide: BorderSide(
width: 2,
color: Colors.teal,
),
),
disabledBorder: InputBorder.none,
border: InputBorder.none,
enabledBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(30),
),
borderSide: BorderSide(
width: 2,
color: Colors.grey,
),
),
errorBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(5),
),
borderSide: BorderSide(
width: 2,
color: Colors.red,
),
),
),
),
),
Expanded(
child: ListView(
padding: EdgeInsets.all(12.0),
semanticChildCount: newAllBreed.length,
children: newAllBreed.map((data) {
return ListTile(
title: Text(data),
onTap: () => print(data),);
}).toList(),
),
)
]);