初学Flutter：swiper实现

已于 2023-11-07 14:11:50 修改
阅读量1.7k 收藏 4
点赞数 3
分类专栏： flutter 文章标签： flutter
于 2023-11-04 15:11:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hhjian524/article/details/134218456
版权

效果展示：

flutter swiper

1、安装 card_swiper 

2、引入card_swiper

import 'package:card_swiper/card_swiper.dart';

3、使用

这里我主要是对官网例子进行实践，主要是5种常用的swiper

1、普遍的swiper

//custom swiper
class CustomSwiper extends StatefulWidget {
  const CustomSwiper({super.key, required this.banner});
  final List banner;

  @override
  _CustomSwiperState createState() => _CustomSwiperState();
}

class _CustomSwiperState extends State<CustomSwiper> {
  @override
  Widget build(BuildContext context) {
    return Swiper(
      itemBuilder: (BuildContext context, int index) {
        return Image.network(
          widget.banner[index]['banner_url'],
          fit: BoxFit.fill,
        );
      },
      onTap: (index) {
        print(index);
      },
      itemCount: widget.banner.length,
      // autoplay: true,
      pagination: const SwiperPagination(
          builder: DotSwiperPaginationBuilder(
              color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
      control: SwiperControl(),
    );
  }
}

2、layouts swiper

//layouts swiper
class MyLayoutSwiper extends StatefulWidget {
  const MyLayoutSwiper({super.key, required this.banner});
  final List banner;

  @override
  _MyLayoutSwiperState createState() => _MyLayoutSwiperState();
}

class _MyLayoutSwiperState extends State<MyLayoutSwiper> {
  @override
  Widget build(BuildContext context) {
    return Swiper(
      itemBuilder: (BuildContext context, int index) {
        return Image.network(
          widget.banner[index]['banner_url'],
          fit: BoxFit.fill,
        );
      },
      onTap: (index) {
        print(index);
      },
      itemCount: widget.banner.length,
      // autoplay: true,
      pagination: const SwiperPagination(
          builder: DotSwiperPaginationBuilder(
              color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
      viewportFraction: 0.8,
      scale: 0.9,
    );
  }
}

3、STACK Layout swiper

// STACK Layout swiper
class StackLayoutSwiper extends StatefulWidget {
  const StackLayoutSwiper({super.key, required this.banner});
  final List banner;

  @override
  _StackLayoutSwiperState createState() => _StackLayoutSwiperState();
}

class _StackLayoutSwiperState extends State<StackLayoutSwiper> {
  @override
  Widget build(BuildContext context) {
    return Swiper(
      itemBuilder: (BuildContext context, int index) {
        return Image.network(
          widget.banner[index]['banner_url'],
          fit: BoxFit.fill,
        );
      },
      onTap: (index) {
        print(index);
      },
      itemCount: widget.banner.length,
      // autoplay: true,
      pagination: const SwiperPagination(
          builder: DotSwiperPaginationBuilder(
              color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
      viewportFraction: 0.8,
      scale: 0.9,
      itemWidth: 300.0,
      layout: SwiperLayout.STACK,
    );
  }
}

4、TINDER Layout Swiper

// TINDER Layout Swiper
class TinderLayoutSwiper extends StatefulWidget {
  const TinderLayoutSwiper({super.key, required this.banner});
  final List banner;

  @override
  _TinderLayoutSwiperState createState() => _TinderLayoutSwiperState();
}

class _TinderLayoutSwiperState extends State<TinderLayoutSwiper> {
  @override
  Widget build(BuildContext context) {
    return Swiper(
      itemBuilder: (BuildContext context, int index) {
        return Image.network(
          widget.banner[index]['banner_url'],
          fit: BoxFit.fill,
        );
      },
      onTap: (index) {
        print(index);
      },
      itemCount: widget.banner.length,
      // autoplay: true,
      pagination: const SwiperPagination(
          builder: DotSwiperPaginationBuilder(
              color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
      viewportFraction: 0.8,
      scale: 0.9,
      itemWidth: 300.0,
      itemHeight: 400.0,
      layout: SwiperLayout.TINDER,
    );
  }
}

5、CUSTOM LAYOUT Swiper

// TINDER Layout Swiper
class TinderLayoutSwiper extends StatefulWidget {
  const TinderLayoutSwiper({super.key, required this.banner});
  final List banner;

  @override
  _TinderLayoutSwiperState createState() => _TinderLayoutSwiperState();
}

class _TinderLayoutSwiperState extends State<TinderLayoutSwiper> {
  @override
  Widget build(BuildContext context) {
    return Swiper(
      itemBuilder: (BuildContext context, int index) {
        return Image.network(
          widget.banner[index]['banner_url'],
          fit: BoxFit.fill,
        );
      },
      onTap: (index) {
        print(index);
      },
      itemCount: widget.banner.length,
      // autoplay: true,
      pagination: const SwiperPagination(
          builder: DotSwiperPaginationBuilder(
              color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
      viewportFraction: 0.8,
      scale: 0.9,
      itemWidth: 300.0,
      itemHeight: 400.0,
      layout: SwiperLayout.TINDER,
    );
  }
}


// CUSTOM LAYOUT Swiper
class CustomLayoutSwiper extends StatefulWidget {
  const CustomLayoutSwiper({super.key, required this.banner});
  final List banner;

  @override
  _CustomLayoutSwiperState createState()=>_CustomLayoutSwiperState();

}
class _CustomLayoutSwiperState extends State<CustomLayoutSwiper>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Swiper(
      itemBuilder: (BuildContext context, int index) {
        return Image.network(
          widget.banner[index]['banner_url'],
          fit: BoxFit.fill,
        );
      },
      onTap: (index) {
        print(index);
      },
      itemCount: widget.banner.length,
      // autoplay: true,
      pagination: const SwiperPagination(
          builder: DotSwiperPaginationBuilder(
              color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
      viewportFraction: 0.8,
      scale: 0.9,
      itemWidth: 300.0,
      itemHeight: 400.0,
      layout: SwiperLayout.CUSTOM,
       customLayoutOption: CustomLayoutOption(
    startIndex: -1,
    stateCount: 3
  )..addRotate([
    -45.0/180,
    0.0,
    45.0/180
  ])..addTranslate([
    Offset(-370.0, -40.0),
    Offset(0.0, 0.0),
    Offset(370.0, -40.0)
  ]),
    );
  }
  
}

main.dart全部代码

import 'package:flutter/material.dart';
import 'package:card_swiper/card_swiper.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple)),
        home: const Home());
  }
}

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  List banner = [
    {
      "banner_url":
          "https://ts1.cn.mm.bing.net/th/id/R-C.8e091d0e6a2b9bcb27738cd96e22f699?rik=M4LFAVmmb38W6A&riu=http%3a%2f%2fi3.img.969g.com%2fdown%2fimgx2013%2f01%2f21%2f206_170432_901de.jpg&ehk=564uTBfxvugUBybGO2%2bTpMUNgJEa6rUfSrc1sonLso8%3d&risl=&pid=ImgRaw&r=0"
    },
    {
      "banner_url":
          "https://ts1.cn.mm.bing.net/th/id/R-C.abd4829c9387ec1bfd1a276a5c1da122?rik=dl55Voqxy4wINQ&riu=http%3a%2f%2fi1.073img.com%2f140306%2f4343693_144142_1.jpg&ehk=qvhMjT0iGQT5DhH8MTkAzJqUpjHJRScTQTT5hj%2forLM%3d&risl=&pid=ImgRaw&r=0"
    },
    {
      "banner_url":
          "https://ts1.cn.mm.bing.net/th/id/R-C.ddfbf9ed55354323035f947515fe0233?rik=0KFdFk3RHUzBdg&riu=http%3a%2f%2fi1.img.969g.com%2fdown%2fimgx2013%2f01%2f05%2f206_164916_4fab0.jpg&ehk=Vqb%2f5c3%2fW5n39t7bAae6YpUlfG4ibEbf9lpETY5Xz4c%3d&risl=&pid=ImgRaw&r=0"
    }
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('flutter轮播图学习'), centerTitle: true),
        // body: Container(child: Text('pp')),
        body: SingleChildScrollView(
          child: Column(children: [
            const Text('Custom swiper',
                style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold)),
            SizedBox(
                height: 200,
                child: CustomSwiper(
                  banner: banner,
                )),
            const Text('Build in layouts ',
                style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold)),
            SizedBox(
                height: 200,
                child: MyLayoutSwiper(
                  banner: banner,
                )),
            const Text('Build in STACK layouts ',
                style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold)),
            SizedBox(
                height: 200,
                child: StackLayoutSwiper(
                  banner: banner,
                )),
            const Text('Build in  TINDER layouts ',
                style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold)),
            SizedBox(
                height: 200,
                child: TinderLayoutSwiper(
                  banner: banner,
                )),

                const Text('Build in  CUSTOM layouts ',
                style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold)),
            SizedBox(
                height: 200,
                child: CustomLayoutSwiper(
                  banner: banner,
                )),
          ]),
        ));
  }
}

//custom swiper
class CustomSwiper extends StatefulWidget {
  const CustomSwiper({super.key, required this.banner});
  final List banner;

  @override
  _CustomSwiperState createState() => _CustomSwiperState();
}

class _CustomSwiperState extends State<CustomSwiper> {
  @override
  Widget build(BuildContext context) {
    return Swiper(
      itemBuilder: (BuildContext context, int index) {
        return Image.network(
          widget.banner[index]['banner_url'],
          fit: BoxFit.fill,
        );
      },
      onTap: (index) {
        print(index);
      },
      itemCount: widget.banner.length,
      // autoplay: true,
      pagination: const SwiperPagination(
          builder: DotSwiperPaginationBuilder(
              color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
      control: SwiperControl(),
    );
  }
}

//layouts swiper
class MyLayoutSwiper extends StatefulWidget {
  const MyLayoutSwiper({super.key, required this.banner});
  final List banner;

  @override
  _MyLayoutSwiperState createState() => _MyLayoutSwiperState();
}

class _MyLayoutSwiperState extends State<MyLayoutSwiper> {
  @override
  Widget build(BuildContext context) {
    return Swiper(
      itemBuilder: (BuildContext context, int index) {
        return Image.network(
          widget.banner[index]['banner_url'],
          fit: BoxFit.fill,
        );
      },
      onTap: (index) {
        print(index);
      },
      itemCount: widget.banner.length,
      // autoplay: true,
      pagination: const SwiperPagination(
          builder: DotSwiperPaginationBuilder(
              color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
      viewportFraction: 0.8,
      scale: 0.9,
    );
  }
}

// STACK Layout swiper
class StackLayoutSwiper extends StatefulWidget {
  const StackLayoutSwiper({super.key, required this.banner});
  final List banner;

  @override
  _StackLayoutSwiperState createState() => _StackLayoutSwiperState();
}

class _StackLayoutSwiperState extends State<StackLayoutSwiper> {
  @override
  Widget build(BuildContext context) {
    return Swiper(
      itemBuilder: (BuildContext context, int index) {
        return Image.network(
          widget.banner[index]['banner_url'],
          fit: BoxFit.fill,
        );
      },
      onTap: (index) {
        print(index);
      },
      itemCount: widget.banner.length,
      // autoplay: true,
      pagination: const SwiperPagination(
          builder: DotSwiperPaginationBuilder(
              color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
      viewportFraction: 0.8,
      scale: 0.9,
      itemWidth: 300.0,
      layout: SwiperLayout.STACK,
    );
  }
}

// TINDER Layout Swiper
class TinderLayoutSwiper extends StatefulWidget {
  const TinderLayoutSwiper({super.key, required this.banner});
  final List banner;

  @override
  _TinderLayoutSwiperState createState() => _TinderLayoutSwiperState();
}

class _TinderLayoutSwiperState extends State<TinderLayoutSwiper> {
  @override
  Widget build(BuildContext context) {
    return Swiper(
      itemBuilder: (BuildContext context, int index) {
        return Image.network(
          widget.banner[index]['banner_url'],
          fit: BoxFit.fill,
        );
      },
      onTap: (index) {
        print(index);
      },
      itemCount: widget.banner.length,
      // autoplay: true,
      pagination: const SwiperPagination(
          builder: DotSwiperPaginationBuilder(
              color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
      viewportFraction: 0.8,
      scale: 0.9,
      itemWidth: 300.0,
      itemHeight: 400.0,
      layout: SwiperLayout.TINDER,
    );
  }
}


// CUSTOM LAYOUT Swiper
class CustomLayoutSwiper extends StatefulWidget {
  const CustomLayoutSwiper({super.key, required this.banner});
  final List banner;

  @override
  _CustomLayoutSwiperState createState()=>_CustomLayoutSwiperState();

}
class _CustomLayoutSwiperState extends State<CustomLayoutSwiper>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Swiper(
      itemBuilder: (BuildContext context, int index) {
        return Image.network(
          widget.banner[index]['banner_url'],
          fit: BoxFit.fill,
        );
      },
      onTap: (index) {
        print(index);
      },
      itemCount: widget.banner.length,
      // autoplay: true,
      pagination: const SwiperPagination(
          builder: DotSwiperPaginationBuilder(
              color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
      viewportFraction: 0.8,
      scale: 0.9,
      itemWidth: 300.0,
      itemHeight: 400.0,
      layout: SwiperLayout.CUSTOM,
       customLayoutOption: CustomLayoutOption(
    startIndex: -1,
    stateCount: 3
  )..addRotate([
    -45.0/180,
    0.0,
    45.0/180
  ])..addTranslate([
    Offset(-370.0, -40.0),
    Offset(0.0, 0.0),
    Offset(370.0, -40.0)
  ]),
    );
  }
  
}

UzumakiHan
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
【Flutter】Flutter 如何使用 flutter_swiper
Code Metaverse
06-16 2854
在 Flutter 中，我们可以使用 `flutter_swiper` 这个库来创建轮播图。
探索Flutter的无限可能：flutter_swiper开源项目推荐
最新发布
gitblog_00419的博客
08-15 274
探索Flutter的无限可能：flutter_swiper开源项目推荐 flutter_swiper项目地址:https://gitcode.com/gh_mirrors/flu/flutter_swiper 项目介绍 在移动应用开发的世界中，轮播图（Swiper）是提升用户体验不可或缺的组件之一。今天，我们要向大家推荐的是一款名为flutter_swiper的开源项目，它被誉为Flutter平...
Flutter 组件之 Swiper（轮播图）
一只程序菜鸡的博客
01-21 4268
flutter实现轮播图效果 1.在项目目录下的pubspec.yaml添加flutter_swiper依赖，然后点击Pub get flutter_swiper: ^1.1.4 2.使用如下： import 'package:flutter/material.dart'; import 'package:flutter_swiper/flutter_swiper.dart'; class SwiperDefaultPage extends StatefulWidget { @override
探索创新的Flutter卡片滑动库：Flutter_card_swiper
gitblog_00033的博客
06-26 568
探索创新的Flutter卡片滑动库：Flutter_card_swiper flutter_card_swiperA Tinder-like card swiper package. It allows you to swipe left, right, up and down and define your own business logic for each direction.项目地址:...
【Flutter】Banner 轮播组件 ( flutter_swiper 插件 Swiper 组件 ).zip
04-01
【Flutter】Banner 轮播组件 ( flutter_swiper 插件 | Swiper 组件 ) https://hanshuliang.blog.csdn.net/article/details/115383018 博客源码快照
flutter 轮播组件 Swiper
热门推荐
卓原的进化之旅
09-19 5万+
flutter_swiper flutter最强大的siwiper, 多种布局方式，无限轮播，Android和IOS双端适配. 先放上github上的几张图看一下效果。 ✨✨ 新功能 更多 截图 图就先放到这里，我们看一下用法。 安装 增加 flutter_swiper: ^1.0.6 //请在pub上查看最新版本 到项目根目录下的 pubspec.yaml ,并且根目录...
Flutter_19_swiper
m0_49349981的博客
08-22 127
Flutter 中最好的轮播组件，适配android和IOS https://pub.dev/packages/flutter_swiper 使用步骤 在pubsepc.yaml 中添加flutter_sweiper依赖 安装依赖(pub get | flutter packages get | VS Code 中保存配置,自动下载) 引入 import ‘package:flutter_swiper/flutter_swiper.dart’; 使用 import 'package:flut.
Flutter 篇 轮播图 flutter_swiper
独树一枝
11-17 2797
添加依赖 flutter_swiper: ^1.1.6 #轮播插件 最新版本看：https://pub.dev/packages/flutter_swiper#-readme-tab- Pub get 之后，引用 import 'package:flutter_swiper/flutter_swiper.dart'; 效果图 import 'package:flutter/material.dart'; import 'package:flutter_swiper/fl..
Flutter笔记（12）flutter中swiper实现轮播图
2301_76278775的博客
03-31 444
,),///实现android中ViewPager轮播的效果),//是否自动播放onTap: (index) => print(‘您点击了第$index’),),其中Swiper的属性下面主要是介绍Swiper的属性（）：Swiper({///@required this.itemCount, // 个数。
Flutter Swiper （轮播）
isusjjyy的专栏
10-30 486
引入flutter_swiper插件 pubspec.yaml文件中引入： dependencies: flutter_swiper: ^1.1.6 作用及使用 多种轮播方式组件 参考网址：flutter_swiper中文文档 官方库地址：flutter_swiper官方库 import 'package:flutter/material.dart'; import...
flutter_swiper
04-06
flutter_swiper 自定义
Android代码-Flutter实现的swipe card效果。
08-06
Tinder cards Hi! After showcasing Focus for Reddit, the app I am working on, people asked me how did I do the tinder like cards swipe (posts media are shown as a stack of 3 swipable cards) and if I could make tutorial or open-source it: And I did it! Here it is. I've created a Tinder like user interface (not working, that's not the point). I've found 2 ways of doing this (there may be way more ways) Using Draggable Using GestureDetector and Alignment (what I use for my app) P.S: Use the appB
Flutter-Swipe-:类似于Tinder的界面，用于选择“旅行目的地”
05-27
在Flutter中刷卡 该项目实现了扑打中的Tinder之类的刷卡功能。 我用这个漂亮的Ui显示了不同的Hill Station细节。 我们可以在点击卡的任何位置获取详细信息，这将使我们进入下一页。 我们已经使用Stack小部件将卡片一张一张地排列。 并且，我们使用Draggable属性来刷卡。 如果您喜欢我的作品，请给个星星。 谢谢 ！！ 入门 如果这是您的第一个Flutter项目，那么有一些资源可以帮助您入门： 要获得Flutter入门方面的帮助，请查看我们的，其中提供了教程，示例，有关移动开发的指南以及完整的API参考。
bmi-calculator-flutter：完全实现
03-02
本教程的目的是研究如何自定义Flutter Widget，以实现我们自己漂亮的用户界面设计。 如果您有一位设计师，无论他们的设计有多么非常规，我们都可以使用Flutter进行创建。 您将创造什么 我们将根据的精美设计制作一个...
Flutter轮播图:Swiper与PageView，及PageView的应用
weixin_46136019的博客
03-28 2151
flutter_swiper_null_safety 和 flutter_swiper 用法完全一样。如果你使用的是 Flutter2.2.0 以及 Flutter2.2.0 之后的版本请使用。最常用也是比较好用的自然是Swiper组件，它是第三方的一个组件，需要自行引入才能使用。如果您使用的是 Flutter2.2.0 之前的版本请使用。想要了解更多，可以直接看。这个样式通常用于引导页。
Flutter中使用flutter_swiper实现轮播图
越陌度阡
01-03 9250
1. 安装插件 配置flutter_swiper。 dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter date_format: ^1.0.6 flutter_cupertino_date_picker: ^1.0.26+2 # 配置轮播图插件 flutter_swiper: ^1.1.6 在pubspec.yaml中配置保存后，在VS Code环境中会自动下载依赖
Flutter APP开发 学习记录: flutter_swiper轮播图
weixin_41125029的博客
02-16 881
说点儿闲话 大部分app都有轮播图，一般是展示一些新闻公告通知等图片，在flutter最强大的siwiper, 多种布局方式，无限轮播，Android和IOS双端适配，github：flutter_swiper 使用： 加载图片 一般是从本地代码中或者使用网络图片，那么，首先将资源添加到项目的 pubspec.yaml 文件中(更多细节请参阅Assets and images)： flu...
Flutter 轮播图flutter_swiper的使用
WangQingLei0307的博客
06-18 4092
在开发应用过程中，轮播图的使用是必不可少的，其实有很多大神已经帮我们写好了，我们没有必要自己再去开发。 而开发过程中我最常使用的就是flutter_swiper这个插件
flutter3 swiper
10-19
Flutter Swiper是一个Flutter插件，用于创建漂亮的轮播图。Flutter Swiper提供了多种布局和无限循环的功能，可以轻松地创建各种类型的轮播图。Flutter Swiper有多个版本可供选择，包括flutter_swiper、flutter_swiper_null_safety和flutter_swiper_view等。其中，flutter_swiper_null_safety是适配Flutter 2.0的版本，而flutter_swiper_view是由Flutter Swiper的作者维护的一个分支，提供了更多的布局选项和功能。如果你需要在Flutter应用程序中添加轮播图，Flutter Swiper是一个不错的选择。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值