CODEWITHSUNDEEP
flutter
e.T55
e.T55

Reputation: 465

flutter image carousel change border radius

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(),
      ),
    );
  }

}

Upvotes: 2

Views: 8088

Answers (4)

Thilina Pathirage
Thilina Pathirage

Reputation: 46

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,
          ),
        ],

Upvotes: 3

sujith s
sujith s

Reputation: 914

Carousel slider with rounded network image

class _CarouselWithIndicatorState extends State<CarouselWithIndicator> {
 int _current = 0;

 @override
Widget build(BuildContext context) {
 Widget image_carousel = new Container(
    height: 345.0,
    child: CarouselSlider(
      options: CarouselOptions(
        height: 250,
        reverse: false,
        autoPlay: true,
        autoPlayInterval: Duration(seconds: 5),
        autoPlayAnimationDuration: Duration(milliseconds: 800),
        autoPlayCurve: Curves.fastOutSlowIn,
        enlargeCenterPage: false,
        onPageChanged: null,
        scrollDirection: Axis.horizontal,
      ),
      items: [
        'http://pic3.16pic.com/00/55/42/16pic_5542988_b.jpg',
        'http://photo.16pic.com/00/38/88/16pic_3888084_b.jpg',
        'http://pic3.16pic.com/00/55/42/16pic_5542988_b.jpg',
        'http://photo.16pic.com/00/38/88/16pic_3888084_b.jpg'
      ].map((i) {
        return Builder(
          builder: (BuildContext context) {
            return Container(
              child: Container(
                  width: MediaQuery.of(context).size.width,
                  margin: EdgeInsets.symmetric(horizontal: 5.0),
                  decoration: BoxDecoration(
                      color: Colors.amber,
                      boxShadow: [ //background color of box
                        BoxShadow(
                          color: Colors.black12,
                          blurRadius: 8.0, // soften the shadow
                          spreadRadius: 8.0, //extend the shadow
                          offset: Offset(
                            -15.0, // Move to right 10  horizontally
                            -15.0, // Move to bottom 10 Vertically
                          ),
                        )
                      ],
                      borderRadius: BorderRadius.all(Radius.circular(30.0)),
                      image:DecorationImage(
                          image: NetworkImage(i),
                          fit: BoxFit.fill
                      ),
                  ),
                  child: GestureDetector(
                      //child: Image.network(i, fit: BoxFit.fill ),
                      onTap: () {
                        // Navigator.push<Widget>(
                        //   context,
                        //   MaterialPageRoute(
                        //     //builder: (context) => ImageScreen(i),
                        //   ),
                        // );
                      })),
            );
          },
        );
      }).toList(),
    ));

return Column(
    children: <Widget>[
      image_carousel,
    ],
);

} }

Upvotes: 0

HasilT
HasilT

Reputation: 2609

Wrap your Image widget with a ClipRRect widget and give border-radius to ClipRRect

GestureDetector(
        child: ClipRRect(
        borderRadius: BorderRadius.circular(10)
        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'),
                )),
              )

Upvotes: 2

Jasurbek
Jasurbek

Reputation: 2966

Instead of most outer Container wrap everything inside ClipRRect widget

class BuildCarousel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      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(),
      ),
    );
  }
}

ClipRRect is a widget that clips a corner of the Rects as you want

For more info about ClipRRect and other clipping methods visit here

Upvotes: 0

Related Questions