Hello I am trying to make an image carousel using carousel_slider package and attaching a gesture detector to each carousel item. I wanted to make the slider image curved. I tried to used border radius but not working. What am I missing here
class BuildCarousel extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(borderRadius: BorderRadius.circular(10)),
child: CarouselSlider(
options: CarouselOptions(
height: 200,
initialPage: 2,
enableInfiniteScroll: false,
reverse: false,
autoPlay: true,
autoPlayInterval: Duration(seconds: 3),
autoPlayAnimationDuration: Duration(milliseconds: 800),
enlargeCenterPage: true,
scrollDirection: Axis.horizontal,
),
items: [
'https://charlielawrance.com/wp-content/uploads/2017/10/13-Ad-Examples.jpg',
'https://webcdn-adespressoinc.netdna-ssl.com/wp-content/uploads/2019/09/fb-collection-ads-2019-1024x536.jpg',
].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
decoration:
BoxDecoration(borderRadius: BorderRadius.circular(10)),
padding: EdgeInsets.all(0.0),
height: MediaQuery.of(context).size.height * 0.30,
width: MediaQuery.of(context).size.width,
child: GestureDetector(
child: CachedNetworkImage(
imageUrl: i,
placeholder: (context, url) => CupertinoActivityIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
),
onTap: () => Navigator.push<Widget>(
context,
CupertinoPageRoute(
builder: (context) =>
CollectionToProduct(category: 'watch'),
),
),
),
);
},
);
}).toList(),
),
);
}
}
Wrap the Carousel container with ClipRRect() and add the borderRadius for it.
child: Column(
children: [
SizedBox(
height: MediaQuery.of(context).size.height / 10,
),
ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Container(
height: MediaQuery.of(context).size.height / 5,
width: MediaQuery.of(context).size.width / 1.2,
child: Carousel(
images: [
NetworkImage(
'https://cdn-images-1.medium.com/max/2000/1*GqdzzfB_BHorv7V2NV7Jgg.jpeg'),
NetworkImage(
'https://cdn-images-1.medium.com/max/2000/1*wnIEgP1gNMrK5gZU7QS0-A.jpeg'),
NetworkImage(
'https://cdn-images-1.medium.com/max/2000/1*wnIEgP1gNMrK5gZU7QS0-A.jpeg')
],
showIndicator: false,
borderRadius: false,
moveIndicatorFromBottom: 180.0,
noRadiusForIndicator: true,
overlayShadow: true,
overlayShadowColors: Color(0xff0D6EFD),
overlayShadowSize: 0.7,
radius: Radius.circular(30.0),
),
),
),
SizedBox(
height: MediaQuery.of(context).size.height / 10,
),
],