【Flutter】三十九、Flutter常用組件——輪播組件flutter_swiper

一、安裝flutter_swiper

flutter_swiper: ^1.1.6
flutter pub get

二、使用

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

class SwiperRoute extends StatefulWidget{
  @override
  _SwiperRouteState createState() {
    // TODO: implement createState
    return _SwiperRouteState();
  }
}

class _SwiperRouteState extends State<SwiperRoute>{
  List<ImageProvider> list = [
    AssetImage('assets/images/lake.jpg'),
    AssetImage('assets/images/img1.jpg'),
    AssetImage('assets/images/img2.jpg')
  ];
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('SwiperDemo'),
      ),
      body: Container(
        width: double.infinity,
        height: 250,
        child: Swiper(
          autoplay: true,
          itemBuilder: (BuildContext context,int index){
            return Stack(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                      boxShadow: [
                        BoxShadow(offset: Offset(1, 1), color: Colors.black12, spreadRadius: 3.0, blurRadius: 7.0),
                        BoxShadow(offset: Offset(-1, -1), color: Colors.black12, spreadRadius: 3.0, blurRadius: 7.0),
                        BoxShadow(offset: Offset(-1, 1), color: Colors.black12, spreadRadius: 3.0, blurRadius: 7.0),
                        BoxShadow(offset: Offset(1, -1), color: Colors.black12, spreadRadius: 3.0, blurRadius: 7.0),
                      ],
                      borderRadius: BorderRadius.circular(15.0),
                      image: DecorationImage(image: list[index],fit: BoxFit.cover)
                  ),
                ),
                Align(
                  alignment: Alignment.center,
                  child: Text('$index', style: TextStyle(color: Colors.white, fontSize: 95.0)),
                )
              ],
            );
          },
          itemCount: 3,
          fade: 0.0,
          scale: 0.0,
          curve: Curves.easeInOut,
          duration: 600,
          autoplayDelay: 5000,
          pagination: SwiperPagination(
            margin: EdgeInsets.symmetric(horizontal: 20, vertical: 30)
          ),
        ),
      )
    );
  }
}

效果:

三、Swiper屬性說明

Swiper({
    this.itemBuilder,
    this.indicatorLayout: PageIndicatorLayout.NONE,

    this.transformer,
    @required this.itemCount, // 輪播數量
    this.autoplay: false, // 自動播放
    this.layout: SwiperLayout.DEFAULT,
    this.autoplayDelay: kDefaultAutoplayDelayMs, // 自動播放延遲時長，單位ms
    this.autoplayDisableOnInteraction: true, // 交互時是否禁用自動播放
    this.duration: kDefaultAutoplayTransactionDuration, // 動畫時間，單位ms
    this.onIndexChanged, // 下標改變的回調
    this.index, // 初始下標
    this.onTap, // 點擊輪播的回調
    this.control, // 左右切換指示器
    this.loop: true, // 無縫輪播模式開關
    this.curve: Curves.ease, // 動畫曲線
    this.scrollDirection: Axis.horizontal, // 滾動方向
    this.pagination, // 分頁指示器
    this.plugins,
    this.physics,
    Key key,
    this.controller,
    this.customLayoutOption,

    this.containerHeight,
    this.containerWidth,
    this.viewportFraction: 1.0, // 輪播區大小
    this.itemHeight,
    this.itemWidth,
    this.outer: false, // 分頁指示器是否放在輪播區域外
    this.scale, // 縮放
    this.fade, 
  })