Realize carousel map in flutter

flutter_swiper The most powerful swiper, multiple layouts, infinite carousel, Android and IOS dual-end adaptation.

1. Introduce flutter_swiper in pubspec.yaml

flutter_swiper: ^1.1.6

remember to execute

flutter pub get

2. Quote

import 'package:flutter_swiper/flutter_swiper.dart';

3. Use

    Swiper(
      itemBuilder: (BuildContext context,int index){
    
    
        // 配置图片地址
        return new Image.network(productModel.headImages[index],fit: BoxFit.fill,);
      },
      // 配置图片数量
      itemCount: productModel.headImages.length ,
      // 底部分页器
      pagination: new SwiperPagination(),
      // 左右箭头
      control: new SwiperControl(),
      // 无限循环
      loop: true,
      // 自动轮播
      autoplay: true,
    )

4. Effect picture
insert image description here
5. Basic parameters of Swiper

parameter	Defaults	describe
scrollDirection	Axis.horizontal	Scroll direction, set to Axis.vertical if vertical scrolling is required
loop	true	Infinite carousel mode switch
index	0	The initial subscript position
autoplay	false	autoplay switch
autoplayDely	3000	Autoplay delay in milliseconds
autoplayDiableOnInteraction	true	Whether to stop autoplay when the user drags
onIndexChanged	void onIndexChanged(int index)	Called when the user manually drags or auto-plays to cause the subscript to change
onTap	void onTap(int index)	Called when the user clicks on a carousel
duration	300.0	Animation time, in milliseconds
pagination	null	Set new SwiperPagination() to display the default pagination indicator
control	null	Set new SwiperControl() to display default paging buttons

6. SwiperPagination parameter of the paging indicator

parameter	Defaults	describe
alignment	Alignment.bottomCenter	If you want to place the pagination indicator in another position, you can modify this parameter
margin	EdgeInsets.all(10.0)	The distance between the pagination indicator and the border of the container
builder	SwiperPagination.dots	Two default pagination indicator styles: SwiperPagination.dots , SwiperPagination.fraction (customizable)

7. Control button SwiperControl parameters

parameter	Defaults	describe
iconPrevious	Icons.arrow_back_ios	IconData of the previous page
iconNext	Icons.arrow_forward_ios	IconData for the next page
color	Theme.of(context).primaryColor	control button color
size	30.0	control button size
padding	const EdgeInsets.all(5.0)	The distance between the control button and the container

Controller (SwiperController) available methods

method	describe
void move(int index, {bool animation: true})	Move to the specified subscript, set whether to play animation
void next({bool animation: true})	next page
void previous({bool animation: true})	previous page
void startAutoplay()	start autoplay
void stopAutoplay()	stop autoplay

Realize carousel map in flutter

Guess you like