карусель флаттера изменить радиус границы

Question

Здравствуйте, я пытаюсь создать карусель изображений, используя пакет carousel_slider и прикрепляя детектор жестов к каждому элементу карусели. Я хотел сделать изображение ползунка изогнутым. Я пытался использовать радиус границы, но не работал. Что мне здесь не хватает

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

}

Answer 1

Оберните свой виджет Image виджетом ClipRRect и присвойте border-radius 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'),
                )),
              )

Answer 2

Вместо самого внешнего Container обернуть все внутри ClipRRect виджет

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 - это виджет, который обрезает угол прямоугольников, как вы хотите

Подробнее информацию о ClipRRect и других методах обрезки посетите здесь