特效介绍

本插件是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)
