gesture_password_widget 1.0.5

Flutter Android iOS web

A gesture-unlocking widget for Flutter that supports for high customization.

GesturePasswordWidget GitHub stars GitHub forks #

English | 简体中文

A gesture-unlocking widget for Flutter that supports a high degree of customization.

Use #

dependencies:
  gesture_password_widget: latest-version
import 'package:gesture_password_widget/gesture_password_widget.dart';

Demo: #

1)A simple and common demo.

Rendering:
image

Code:

GesturePasswordWidget(
      lineColor: const Color(0xff0C6BFE),
      errorLineColor: const Color(0xffFB2E4E),
      singleLineCount: 3,
      identifySize: 80.0,
      minLength: 4,
      errorItem: Image.asset(
        'images/error.png',
        color: const Color(0xffFB2E4E),
      ),
      normalItem: Image.asset('images/normal.png'),
      selectedItem: Image.asset(
        'images/selected.png',
        color: const Color(0xff0C6BFE),
      ),
      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: backgroundColor,
      onComplete: (data) {
        setState(() {
          result = data.join(', ');
        });
      },
    );

2)A complex demo. A line has four dots and supports the effect of the selection by set [hitItem].

Rendering:
image

Code:

GesturePasswordWidget(
      lineColor: Colors.white,
      errorLineColor: Colors.redAccent,
      singleLineCount: 4,
      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),
        ),
      ),
      answer: [0, 1, 2, 3, 6, 10, 14],
      color: backgroundColor,
      onComplete: (data) {
        setState(() {
          result = data.join(', ');
        });
      },
    )

Properties: #

PropertyDescription
sizeThe width and height of GesturePasswordWidget.
identifySizeThe size of the area used to determine whether a point is selected, the larger the value of the more accurate identification.
normalItemNormal display of widget.
selectedItemThe widget to display in the selected case.
errorItemThe widget displayed in the error case will only work if minLength or answer is set.
(1) When minLength is not null, if the number of selected points is less than minLength, display errorItem, for example, minLength = 4 is set, but the result set of selected points is [0,1,3], a total of 3 points are selected, less than 4.
2) When answer is not null, the errorItem is displayed if the result set of the selected point and answer are not equal, e.g., answer = [0,1,2,4,7], but the result set of the selected point is [0,1,2,5,8], which is not equal to answer;
In addition, the display duration of the errorItem is controlled by completeWaitMilliseconds.
hitItemThe widget to be displayed when this point is selected, its display duration is controlled by hitShowMilliseconds, continue to display selectedItem after reaching the display duration.
arrowItemNormal display of the arrow widget.
When following the gesture rotation, the x-axis is 0 degrees positive, so if you use arrows, make sure they are pointing in the x-axis positive direction.
errorArrowItemArrow controls displayed in error conditions, if errorArrowItem is set, then arrowItem must be set, otherwise errorArrowItem will not be displayed.
When following the gesture rotation, the x-axis is 0 degrees positive, so if you use arrows, make sure they are pointing in the x-axis positive direction.
arrowXAlignThe offset of arrowItem and errorArrowItem on the x-axis, with the origin in the center of normalItem.
When -1 < arrowXAlign < 1, arrowItem and errorArrowItem are drawn within the normalItem.
When arrowXAlign > 1 or arrowXAlign < -1, arrowItem and errorArrowItem are drawn outside the normalItem range.
arrowYAlignThe arrowItem and errorArrowItem are offset on the y-axis, with the origin at the center of normalItem.
When -1 < arrowYAlign < 1, arrowItem and errorArrowItem are drawn within the normalItem.
The arrowItem draws outside the normalItem range when arrowYAlign > 1 or arrowYAlign < -1.
singleLineCountThe total number of single lines is equal to singleLineCount * singleLineCount.
colorThe background color of GesturePasswordWidget,which defaults to Theme.of(context).scaffoldBackgroundColor.
onHitPointThe callback function when a point is selected.
onCompleteThe callback function at the end of a gesture slide.
lineColorThe color of line in the normal case.
errorLineColorThe color of line in the error casr, see [errorItem].
answerThe right result,e.g., [0, 1, 2, 4, 7]
looseThe default is true.
Consider this case: the points index=0 and index=6 are selected, and the point index=3 is not selected, but the point index=3 is on the line between index=0 and index=6. If loose=true, the gesture password obtained is [0,3,6] if loose=false, then the obtained gesture password is [0,6].
completeWaitMillisecondsThe last selected point and the drawn line are displayed on the screen for the duration of the time, after which all points are cleared and the initial state is restored, and GesturePasswordWidget no longer accepts any gesture events until the time expires.
hitShowMillisecondsSee hitItem.
minLengthIf this value is set, errorItem and errorLine are displayed if the length is short.
1
likes
110
pub points
17%
popularity

A gesture-unlocking widget for Flutter that supports for high customization.

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

luodijack@gmail.com

License

BSD (LICENSE)

Dependencies

flutter

More

Packages that depend on gesture_password_widget