Class 'String' has no instance method 'map' - flutter

Question

I am using the flutter carousel code and trying to add images from firebase.
This is my code:
class FullscreenSliderDemo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF030164),
body: StreamBuilder(
stream: FirebaseFirestore.instance.collection('quotes').snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) return Text('Loading data... Please Wait');
final double height = MediaQuery.of(context).size.height;
return Container(
height: 100.0,
padding: const EdgeInsets.all(4.0),
child: new ListView(
scrollDirection: Axis.horizontal,
children: snapshot.data.documents
.map<Widget>((DocumentSnapshot document) {
return CarouselSlider(
options: CarouselOptions(
height: height,
viewportFraction: 1.0,
enlargeCenterPage: false,
),
items: (document.data()['img']).map(
(item) => Container(
child: Center(
child: Image.network(
item,
fit: BoxFit.cover,
height: height,
)),
),
).toList());
}).toList(),));
},
),
);
}
}
I am getting the error Class 'String' has no instance method 'map'. and I'm not sure how to resolve this. If anyone could help, I would appreciate it!

Answer 1

I think you're looking for something like this:
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF030164),
body: StreamBuilder(
stream: FirebaseFirestore.instance.collection('quotes').snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) return Text('Loading data... Please Wait');
final double height = MediaQuery.of(context).size.height;
return CarouselSlider(
options: CarouselOptions(
height: height,
viewportFraction: 1.0,
enlargeCenterPage: false,
),
items: snapshot.data.documents
.map<Widget>((document) {
return Container(
child: Center(
child: Image.network(
document.data()['img'],
fit: BoxFit.cover,
height: height,
)
),
),
).toList()
)
)
},
),
);
}
With this you have only one CarouselSlider for all documents/images, instead of a separate one for each document.