Getting error while searching documents from cloud firestore - flutter

Question

I have stored all articles in cloud firestore and now im searching a article from cloud firestore.
Search is working fine but when i tap on a article to go on detail screen to read more. i m getting this error : type '_InternalLinkedHashMap<String, dynamic>' is not a subtype of type 'DocumentSnapshot'
this is my search screen :
class SearchService {
searchByName(String searchField) {
return FirebaseFirestore.instance
.collection('articles')
.where('searchKey',
isEqualTo: searchField.substring(0, 1).toUpperCase())
.get();
}
}
class SearchScreen extends StatefulWidget {
#override
_SearchScreenState createState() => new _SearchScreenState();
}
class _SearchScreenState extends State<SearchScreen> {
var queryResultSet = [];
var tempSearchStore = [];
initiateSearch(value) {
if (value.length == 0) {
setState(() {
queryResultSet = [];
tempSearchStore = [];
});
}
if (queryResultSet.length == 0 && value.length == 1) {
SearchService().searchByName(value).then((QuerySnapshot docs) {
for (int i = 0; i < docs.docs.length; ++i) {
queryResultSet.add(docs.docs[i].data());
setState(() {
tempSearchStore.add(queryResultSet[i]);
});
}
});
} else {
queryResultSet.forEach((element) {
if (element['title'].toLowerCase().contains(value.toLowerCase()) ==
true) {
if (element['title'].toLowerCase().atIndex(value.toLowerCase()) ==
0) {
setState(() {
tempSearchStore.add(element);
});
}
}
});
}
if (tempSearchStore.length == 0 && value.length > 1) {
setState(() {});
}
}
#override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.white,
appBar: new AppBar(
iconTheme: IconThemeData(color: CustomColors.blackColor),
title: TextField(
onChanged: (val) {
initiateSearch(val);
},
decoration: InputDecoration(
hintText: 'Search here',
hintStyle: TextStyle(
color: CustomColors.greyColor,
fontWeight: FontWeight.bold,
),
border: InputBorder.none,
),
),
),
body: ListView(
padding: EdgeInsets.only(left: 10.0, right: 10.0),
shrinkWrap: true,
children: tempSearchStore.map((element) {
return SearchResults(
data: element,
);
}).toList(),
),
);
}
}
this my search item:
class SearchResults extends StatelessWidget {
final data;
const SearchResults({this.data});
#override
Widget build(BuildContext context) {
var readTime = readingTime(data['desc']);
return InkWell(
onTap: () {
Get.to(
DetailScreen(
articles: data,
),
);
},
child: Container(
height: Get.mediaQuery.size.height * 0.24,
width: Get.mediaQuery.size.width * 0.8,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.1),
borderRadius: BorderRadius.circular(20),
),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
constraints: BoxConstraints(
maxWidth: Get.mediaQuery.size.width * 0.65,
),
child: Text(
data['title'],
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 22,
color: CustomColors.blackColor,
fontWeight: FontWeight.w600,
),
),
),
Image.network(
data['imageUrl'],
height: 100,
width: 100,
fit: BoxFit.cover,
),
],
),
],
),
),
);
}
}
this is my detail screen to view full article:
class DetailScreen extends StatelessWidget {
final DocumentSnapshot articles;
final ArticlesController articlesController = Get.find<ArticlesController>();
DetailScreen({#required this.articles});
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0,
iconTheme: IconThemeData(color: CustomColors.blackColor),
),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.only(top: 40),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
toBeginningOfSentenceCase(
articles.data()['title'],
),
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: CustomColors.blackColor,
),
),
SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(
top: 15, right: 30, left: 30, bottom: 15),
child: SelectableText(
articles.data()['desc'],
toolbarOptions: ToolbarOptions(copy: true, selectAll: true),
style: TextStyle(
fontSize: 20,
letterSpacing: 1,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
),
],
),
),
),
);
}
}

Answer 1

docs.docs[i] is a DocumentSnapshot
But docs.docs[i].data() is a Map<String, dynamic>
You have add lists (queryResultList and other) as Map but detailscreen field is DocumentSnapshot.