flutter: carousel

foreword

Introduce several good carousel libraries

swipe_deck

It is similar to the carousel, but it is more of a card-style interactive interface design. Its main concept is that users can browse through different cards with left and right swipe gestures, and each card has different information or functions on it.

Swipe decks are often used to showcase images, product information, news articles, social media posts, and more. Users can quickly browse through different cards through swipe gestures, and can select favorite content for further interaction, such as tapping a card to get more details, share content or perform a specific action.

Official address
https://pub-web.flutter-io.cn/packages/swipe_deck

Install

flutter pub add swipe_deck

example

class SwitcherContainerState extends State<SwitcherContainer> {
    
    
  // 图片列表
  List<String> names = ['a1.jpg', 'a2.jpg', 'a3.jpg'];
  @override
  Widget build(BuildContext context) {
    
    
    return Center(
      child: SwipeDeck(
        //  开始位置
        startIndex: 1,
        //  空指示器
        emptyIndicator: const Center(
          child: Text('Nothing Here'),
        ),
        //  卡片排列的角度
        cardSpreadInDegrees: 5,
        onSwipeLeft: () {
    
    
          print("左滑");
        },
        onSwipeRight: () {
    
    
          print("有滑");
        },
        onChange: (index) {
    
    
          print("序号：$index");
        },
        //列表
        widgets: names
            .map((e) => GestureDetector(
                  onTap: () {
    
    
                    print("点击了：$e");
                  },
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: Image.asset(
                      'lib/assets/img/$e',
                      fit: BoxFit.cover,
                    ),
                  ),
                ))
            .toList(),
      ),
    );
  }
}

If you want to turn it into a carousel, you can set a timer to change the current active item, and you can make an indicator and put it on the card.

Card Swiper

Used to create sliding effects with a card-style interface. It uses a left-right swipe-like gesture to allow users to browse through different card content. Card Swiper can be used to create a sliding card effect similar to the Tinder application, or it can be used to display pictures, information, products and other content.

Official address
https://pub-web.flutter-io.cn/packages/card_swiper

Install

flutter pub add card_swiper

Example 1

Center(
      child: Swiper(
        // 列表数
        itemCount: 3,
        itemBuilder: (BuildContext context, int index) {
    
    
          return Image.asset(
            'lib/assets/img/${
      
      names[index]}',
            fit: BoxFit.fill,
          );
        },
        // 页码（指示器）
        pagination: const SwiperPagination(
            //  指示器样式，默认是点，可以选择dots、fraction、rect
            //builder: SwiperPagination.rect,
            //  也可以使用官方提供的类自定义，有FractionPaginationBuilder、RectSwiperPaginationBuilder、DotSwiperPaginationBuilder
            builder: DotSwiperPaginationBuilder(activeColor: Colors.orange)),
        //   初始位置
        index: 0,
        // 是否自动轮播
        autoplay: true,
      ),
    )

Example 2

Center(
      child: Swiper(
        // 列表数
        itemCount: 3,
        itemBuilder: (BuildContext context, int index) {
    
    
          return Image.asset(
            'lib/assets/img/${
      
      names[index]}',
            fit: BoxFit.fill,
          );
        },
        // 页码（指示器）
        pagination: const SwiperPagination(
            //  指示器样式，默认是点，可以选择dots、fraction、rect
            //builder: SwiperPagination.rect,
            //  也可以使用官方提供的类自定义，有FractionPaginationBuilder、RectSwiperPaginationBuilder、DotSwiperPaginationBuilder
            builder: DotSwiperPaginationBuilder(activeColor: Colors.orange)),
        //   初始位置
        index: 0,
        // 是否自动轮播
        autoplay: true,
      //  布局样式
        layout: SwiperLayout.TINDER,
        itemWidth: 240,
        itemHeight: 300,
      ),
    )