首页 > 特效插件 > 滚动轮播 >  Flutter IndicatorViewPager图片轮播插件正文

Flutter IndicatorViewPager图片轮播插件

特效介绍


本插件是Flutter图片轮播插件,就只一个文件indicator_viewpager.dart,是从国外论坛上拷贝过来的,实现了图片的基本轮播功能,实现了小点的大小切换。虽然比不上flutter_swiper等轮播组件强大,但是简单啊。
使用方法
1、将下面的代码放到项目当中的某个文件中,然后import导入:
import 'package:flutter/material.dart';
import 'dart:math';

// An indicator showing the currently selected page of a PageController
class DotsIndicator extends AnimatedWidget {
  DotsIndicator({
    this.controller,
    this.itemCount,
    this.onPageSelected,
    this.color: Colors.white,
  }) : super(listenable: controller);

  // The PageController that this DotsIndicator is representing.
  final PageController controller;

  // The number of items managed by the PageController
  final int itemCount;

  // Called when a dot is tapped
  final ValueChanged<int> onPageSelected;

  // The color of the dots.
  //
  // Defaults to `Colors.white`.
  final Color color;

  // The base size of the dots
  static const double _kDotSize = 5.0;

  // The increase in the size of the selected dot
  static const double _kMaxZoom = 2.0;

  // The distance between the center of each dot
  static const double _kDotSpacing = 15.0;

  Widget _buildDot(int index) {
    double selectedness = Curves.easeOut.transform(
      max(
        0.0,
        1.0 - ((controller.page ?? controller.initialPage) - index).abs(),
      ),
    );
    double zoom = 1.0 + (_kMaxZoom - 1.0) * selectedness;
    return new Container(
      width: _kDotSpacing,
      child: new Center(
        child: new Material(
          color: color,
          type: MaterialType.circle,
          child: new Container(
            width: _kDotSize * zoom,
            height: _kDotSize * zoom,
            child: new InkWell(
              onTap: () => onPageSelected(index),
            ),
          ),
        ),
      ),
    );
  }

  Widget build(BuildContext context) {
    return new Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: new List<Widget>.generate(itemCount, _buildDot),
    );
  }
}

class IndicatorViewPager extends StatefulWidget {

  final List<Widget> _pages;

  IndicatorViewPager(this._pages);

  @override
  State createState() => IndicatorViewPagerState();
}

class IndicatorViewPagerState extends State<IndicatorViewPager> {

  final _controller = new PageController();

  static const _kDuration = const Duration(milliseconds: 300);

  static const _kCurve = Curves.ease;

  final _kArrowColor = Colors.black.withOpacity(0.8);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new IconTheme(
        data: new IconThemeData(color: _kArrowColor),
        child: new Stack(
          children: <Widget>[
            new PageView.builder(
              physics: new AlwaysScrollableScrollPhysics(),
              controller: _controller,
              itemBuilder: (BuildContext context, int index) {
                return widget._pages[index % widget._pages.length];
              },
            ),
            new Positioned(
              bottom: 0.0,
              left: 0.0,
              right: 0.0,
              child: new Container(
                color: Colors.grey[800].withOpacity(0.5),
                padding: const EdgeInsets.all(20.0),
                child: new Center(
                  child: new DotsIndicator(
                    controller: _controller,
                    itemCount: widget._pages.length,
                    onPageSelected: (int page) {
                      _controller.animateToPage(
                        page,
                        duration: _kDuration,
                        curve: _kCurve,
                      );
                    },
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
2、将轮播的内容,放在数组当中,如:
List<Widget> _imagePages;
// 为_imagePages添加轮播内容,这里就以Container里面嵌套图片为例,可以add多个container,这里就放一个
_imagePages.add(
  Container(
    color: Colors.black.withAlpha(900),
    child: ConstrainedBox(
      constraints: BoxConstraints.expand(),
      child: Image.network('http://a.b/1.jpg', fit: BoxFit.cover, height: 300,),
    )
  )
);
3、在需要轮播的位置直接调用下面的代码:
IndicatorViewPager(_imagePages)