效果展示：

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> {@overrideWidget 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> {@overrideWidget 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> {@overrideWidget 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> {@overrideWidget 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> {@overrideWidget 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>{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn 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});@overrideWidget 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"}];@overrideWidget 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> {@overrideWidget 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> {@overrideWidget 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> {@overrideWidget 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> {@overrideWidget 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>{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn 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)]),);}}