GesturePasswordWidget class Null safety

一个支持高度自定义、满足绝大部分日常需求的手势密码绘制widget

简体中文 English

Demo:

GesturePasswordWidget(
     lineColor: Colors.white,
     errorLineColor: Colors.redAccent,
     singleLineCount: 3,
     identifySize: 80.0,
     minLength: 4,
     hitShowMilliseconds: 40,
     errorItem: Container(
       width: 10.0,
       height: 10.0,
       decoration: BoxDecoration(
         color: Colors.redAccent,
         borderRadius: BorderRadius.circular(50.0),
       ),
     ),
     normalItem: Container(
       width: 10.0,
       height: 10.0,
       decoration: BoxDecoration(
         color: Colors.white,
         borderRadius: BorderRadius.circular(50.0),
       ),
     ),
     selectedItem: Container(
       width: 10.0,
       height: 10.0,
       decoration: BoxDecoration(
         color: Colors.white,
         borderRadius: BorderRadius.circular(50.0),
       ),
     ),
     hitItem: Container(
       width: 15.0,
       height: 15.0,
       decoration: BoxDecoration(
         color: Colors.white,
         borderRadius: BorderRadius.circular(50.0),
       ),
     ),
     arrowItem: Image.asset(
        'images/arrow.png',
        width: 20.0,
        height: 20.0,
        color: const Color(0xff0C6BFE),
        fit: BoxFit.fill,
     ),
     errorArrowItem: Image.asset(
        'images/arrow.png',
        width: 20.0,
        height: 20.0,
        fit: BoxFit.fill,
        color: const Color(0xffFB2E4E),
     ),
     answer: [0, 1, 2, 4, 7],
     color: Color(0xff252534),
     onComplete: (data) {
       setState(() {
         result = data.join(', ');
       });
     },
)
Inheritance
Mixed in types

Constructors

GesturePasswordWidget({double size = 300.0, double identifySize = 50.0, Widget? normalItem, Widget? selectedItem, Widget? errorItem, Widget? hitItem, Widget? arrowItem, Widget? errorArrowItem, double arrowXAlign = 0.6, double arrowYAlign = 0.0, int singleLineCount = 3, Color? color, OnHitPoint? onHitPoint, OnComplete? onComplete, Color lineColor = Colors.green, Color errorLineColor = Colors.redAccent, double lineWidth = 2.0, List<int>? answer, bool loose = true, int completeWaitMilliseconds = 300, int hitShowMilliseconds = 40, int? minLength})

Properties

answer List<int>?
正确的结果,demo: 0, 1, 2, 4, 7
final
arrowItem Widget?
正常情况下显示的箭头控件。 跟随手势旋转时,x轴正方向为0度,所以如果你使用了箭头,确保箭头指向x轴正方向。
final
arrowXAlign double
arrowItemerrorArrowItem在x轴上的偏移,原点在normalItem的中心。 当 -1 < arrowXAlign < 1 时,arrowItemerrorArrowItemnormalItem范围内进行绘制; 当arrowXAlign > 1 或者arrowXAlign < -1时,在normalItem范围外进行绘制;
final
arrowYAlign double
arrowItemerrorArrowItem在y轴上的偏移,原点在normalItem的中心。 当 -1 < arrowYAlign < 1 时,arrowItemerrorArrowItemnormalItem范围内进行绘制; 当arrowYAlign > 1 或者arrowYAlign < -1时,在normalItem范围外进行绘制;
final
color Color?
GesturePasswordWidget的背景色,默认为 Theme.of.scaffoldBackgroundColor
final
completeWaitMilliseconds int
最后选择的所有点及绘制的直线在屏幕上展示的时间,时间结束后,清除所有点,恢复到初始状态, 时间结束之前 GesturePasswordWidget 不再接受任何手势事件。
final
errorArrowItem Widget?
错误情况下显示的箭头控件,如果设置了errorArrowItem,则必须设置arrowItem, 否则errorArrowItem不会展示。 跟随手势旋转时,x轴正方向为0度,所以如果你使用了箭头,确保箭头指向x轴正方向。
final
errorItem Widget?
错误情况下展示的widget,只有设置了minLengthanswer时才会生效, 1)当minLength不为null时,如果选择的点的数量小于minLength,则展示errorItem, 比如设置了 minLength = 4,但是选择的点的结果集为 0,1,3,共选择了3个点,小于4; 2)当answer不为null时,如果选择的点的结果集和answer不相等,则展示errorItem, 比如 answer = 0,1,2,4,7,但是选择的点的结果集为0,1,2,5,8,和answer不相等; 另外,errorItem的展示时长由completeWaitMilliseconds控制。
final
errorLineColor Color
错误场景下线的颜色,见errorItem
final
hashCode int
The hash code for this object.
@nonVirtualread-onlyinherited
hitItem Widget?
当这个点被选中时要展示的widget,其展示时长由hitShowMilliseconds控制,达到展示时长 后继续展示selectedItem
final
hitShowMilliseconds int
hitItem
final
identifySize double
用来判断点是否被选中的区域大小,值越大识别越精准.
final
key Key?
Controls how one widget replaces another widget in the tree.
finalinherited
lineColor Color
线的颜色
final
lineWidth double
线的宽度
final
loose bool
是否采用宽松策略,默认为true。 考虑这种情况:第一个点选中了 index = 0 的点,第二个点选中了 index = 6的点, 此时index = 0,index = 3,index = 6这三个点在一条直线上, 如果loose为true,输出为0,3,6, 如果loose为false,输出为0,6.
final
minLength int?
如果设置了此值,则长度不够时显示errorItemerrorLineColor.
final
normalItem Widget?
正常情况下展示的widget
final
onComplete OnComplete?
手势滑动结束时的回调函数
final
onHitPoint OnHitPoint?
当点被选中时的回调函数
final
runtimeType Type
A representation of the runtime type of the object.
read-onlyinherited
selectedItem Widget?
选中情况下展示的widget
final
singleLineCount int
单行个数,总个数等于 singleLineCount * singleLineCount.
final
size double
GesturePasswordWidget 的 width 和 height.
final

Methods

createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → _GesturePasswordWidgetState
Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
override
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a one-line detailed description of the object.
inherited
toStringShort() String
A brief description of this object, usually just the runtimeType and the hashCode.
inherited

Operators

operator ==(Object other) bool
The equality operator.
@nonVirtualinherited