Flutter: Search Delegate black screen - flutter

Question

I created a search option by using search delegate. Everything is fine in search delegate. But when I pressed on search button in keyboard, it's show me a black screen. Why it's react like this ? And how can I solve it ?
here is my homepage.dart code for search icon -
FutureBuilder(
future: fetchBooks(),
builder: (context, snapshot) {
return IconButton(
icon: Icon(
Icons.search,
color: _whiteCream,
),
onPressed: () async {
var booksSearchData = snapshot.data
.where((b) =>
b.category == 1 ||
b.category == 3 ||
b.category == 8 ||
b.category == 9 ||
b.category == 10 ||
b.category == 11 ||
b.category == 12)
.toList();
final Book result = await showSearch(
context: context,
delegate: BooksSearch(booksSearchData));
Scaffold.of(context)
.showSnackBar(SnackBar(content: Text(result.name)));
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => result.category == 1
? BookDescription(storyBooksValue: result)
: PdfScreen(singleBookData: result)),
);
},
);
}),
And here is my search delegate code -
import 'package:flutter/material.dart';
import 'package:boimarket/model/model.dart';
class BooksSearch extends SearchDelegate<Book> {
BooksSearch(this.allBooksData);
final List<Book> allBooksData;
#override
List<Widget> buildActions(BuildContext context) {
return [
SizedBox(
width: 5.0,
),
IconButton(
icon: Icon(Icons.clear),
onPressed: () {
query = '';
},
)
];
}
#override
Widget buildLeading(BuildContext context) {
return IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
close(context, null);
},
);
}
#override
Widget buildResults(BuildContext context) {
return Container(
child: null,
color: Colors.black,
);
}
#override
Widget buildSuggestions(BuildContext context) {
return FutureBuilder(
future: fetchBooks(),
builder: (context, AsyncSnapshot<List<Book>> snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
return Text('Check Your Internet connection');
case ConnectionState.waiting:
return Center(
child: Text('Please Wait'),
);
case ConnectionState.active:
return Text('');
case ConnectionState.done:
if (!snapshot.hasData) {
return Center(
child: Text('No Data'),
);
} else if (snapshot.hasError) {
print(snapshot.error);
return Text('${snapshot.error}');
} else {
print("query $query");
final List<Book> result = allBooksData
.where((a) =>
a.name.toLowerCase().contains(query.toLowerCase()) ||
a.author.toLowerCase().contains(query.toLowerCase()) ||
a.genreClass
.toLowerCase()
.contains(query.toLowerCase()))
.toList();
result.sort((a, b) => a.name.compareTo(b.name));
return ListView(
children: result
.map<ListTile>((a) => ListTile(
leading: FadeInImage.assetNetwork(
fadeOutCurve: Curves.easeInCubic,
placeholder: 'assets/images/bookshelf.jpg',
image: a.imgUrl == null
? 'assets/images/bookshelf.jpg'
: a.imgUrl,
fit: BoxFit.cover,
),
title: Text(
a.name,
overflow: TextOverflow.fade,
),
subtitle: Text(
a.author,
overflow: TextOverflow.visible,
),
trailing: Text(
a.genreClass,
overflow: TextOverflow.clip,
),
onTap: () {
close(context, a);
},
))
.toList());
}
}
});
}
}

Answer 1

It's beacause of this code.
#override
Widget buildResults(BuildContext context) {
return Container(
child: null,
color: Colors.black,
);
}
From the docs
buildResults(BuildContext context) → Widget The results shown after
the user submits a search from the search page.
Reference
To solve this issue make sure you return the results instead of a black Container. You probably want to add a ListView and populate it with data.