特效介绍
本插件是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)