StreamBuilder(
stream: data.snapshots(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
const Center(child: CircularProgressIndicator(color: Colors.blue));
}
if (snapshot.hasData) {
return ListView.builder(
physics: const BouncingScrollPhysics(parent: BouncingScrollPhysics()),
padding: EdgeInsets.zero,
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: snapshot.data?.docs.length,
itemBuilder: (context, index) {
final DocumentSnapshot records = snapshot.data!.docs[index];
return Padding(
padding: const EdgeInsets.only(top: 10.0, right: 10, left: 10),
child: SizedBox(
width: 188,
child: Stack(
children: [
// IMAGE 2D
Container(
height: 135,
width: 135,
decoration: const BoxDecoration(
color: Colors.transparent,
shape: BoxShape.circle,
),
child: DropShadowImage(
image: Image.network(
records["image2D"],
fit: BoxFit.fitHeight,
),
offset: Offset(10, 10),
scale: 1,
blurRadius: 12,
borderRadius: 20,
),
),
],
)),
);
},
);
}
return Container();
}),
I have a list of pictures of planets. And what I need to do is set shadows for these images. I used DropShadowImage
to do this. However I have a problem, that the first element of this list seems to be under a shadow layer, the rest of the list elements are working fine.
How can I fix this.
Thanks a lot.