GesturePasswordWidget class

一个支持高度自定义、满足绝大部分日常需求的手势密码绘制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
arrowItem和errorArrowItem在x轴上的偏移，原点在normalItem的中心。 当 -1 < arrowXAlign < 1 时，arrowItem和errorArrowItem在normalItem范围内进行绘制； 当arrowXAlign > 1 或者arrowXAlign < -1时，在normalItem范围外进行绘制；
final
arrowYAlign → double
arrowItem和errorArrowItem在y轴上的偏移，原点在normalItem的中心。 当 -1 < arrowYAlign < 1 时，arrowItem和errorArrowItem在normalItem范围内进行绘制； 当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，只有设置了minLength或answer时才会生效， 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.
no setterinherited
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?
如果设置了此值，则长度不够时显示errorItem和errorLineColor.
final
normalItem → Widget?
正常情况下展示的widget
final
onComplete → OnComplete?
手势滑动结束时的回调函数
final
onHitPoint → OnHitPoint?
当点被选中时的回调函数
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
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 nonexistent 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.
inherited