Flutter 实现的简单滑块认证

源码如下

import 'package:flutter/material.dart';

class SliderBlockVerify extends StatefulWidget {
/// 滑块右边颜色
final Color positiveColor;
/// 滑块左边颜色
final Color negativeColor;
/// 显示内容
final String text;
/// 控件总体宽度
final double width;
/// 控件总体高度
final double height;
/// 滑块显示的图片
final ImageProvider image;
/// 滑块的宽度
final double imageWidth;
/// 完成的回调
final GestureTapCallback finishCallBack;

SliderBlockVerify({
@required this.image,
@required this.finishCallBack,
this.positiveColor = Colors.green,
this.negativeColor = Colors.grey,
this.text = "滑到右边以确认",
this.width = 250,
this.height = 44,
this.imageWidth = 60,
}) : assert(image != null),
assert(finishCallBack != null);

@override
_SliderBlockVerifyState createState() => _SliderBlockVerifyState();
}

class _SliderBlockVerifyState extends State<SliderBlockVerify> {
// double percentage = 0;
double initial = 0.0;
double distance = 0.0;

@override
void initState() {
super.initState();
}

@override
Widget build(BuildContext context) {
return Container(
width: widget.width,
height: widget.height,
child: GestureDetector(
onPanStart: _onPanStart,
onPanUpdate: _onPanUpdate,
onPanEnd: _onPanEnd,
child: Stack(
children: [
Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
_positive,
_negative,
],
),
_text,
_icon,
],
),
),
);
}

Widget get _positive {
return Offstage(
offstage: distance==0?true:false,
child: Container(
height: widget.height,
width: distance,
color: widget.positiveColor,
),
);
}

Widget get _negative {
return Offstage(
offstage: distance==(widget.width - widget.imageWidth)?true:false,
child:Container(
height: widget.height,
width: widget.width - distance,
color: widget.negativeColor
),
);
}

Widget get _text{
return Positioned(
child: Container(
alignment: Alignment.center,
width: widget.width,
height:widget.height,
child: Text(
widget.text
),
),
);
}

Widget get _icon{
return Positioned(
child: Container(
margin: _iconEdgeInsets,
width: widget.imageWidth,
child: Image(
image: widget.image,
width: widget.imageWidth,
height: widget.height,
fit: BoxFit.fitWidth,
alignment: Alignment.center,
),
),
);
}

EdgeInsets get _iconEdgeInsets {
double left = 0;
if(distance > widget.width - widget.imageWidth) {
left = widget.width - widget.imageWidth;
} else {
left = distance;
}
return EdgeInsets.only(left: left);
}

_onPanStart(DragStartDetails details){
initial = details.globalPosition.dx;
}

_onPanUpdate(DragUpdateDetails details) {
distance = details.globalPosition.dx - initial;
distance = distance.clamp(0.0, widget.width - widget.imageWidth);
setState(() {

});
}

_onPanEnd(DragEndDetails details) {
initial = 0.0;
if(distance >= widget.width - widget.imageWidth -30){
distance = widget.width - widget.imageWidth;
if(widget.finishCallBack != null){
widget.finishCallBack();
}
} else {
distance = 0.0;
}
setState(() {

});
}
}

示意图

SliderBlockVertify.gif