pattern_lock

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A customizable Flutter widget that implements a pattern lock interface, allowing users to draw patterns on a grid to unlock or authenticate. Designed for simplicity and ease of integration, it supports multiple platforms including Android, iOS, Web, macOS, Windows, and Linux. The widget is ideal for apps requiring secure local authentication with a familiar gesture-based input method. It offers flexibility in styling and behavior customization while maintaining a smooth user experience.

Use cases

User authentication in mobile apps
Secure access to sensitive features
Gesture-based login for privacy-focused applications
Integration into onboarding flows
Customizable unlock interfaces
Multi-platform app security

Key features

Gesture-based pattern input
Highly customizable appearance
Cross-platform compatibility
Simple API for integration
Supports animation and feedback
Configurable grid size and colors

Suitable for

Developers building secure local authentication
Apps needing intuitive unlock mechanisms
Projects targeting multiple platforms
UI designers seeking interactive widgets
Prototyping biometric-like interfaces

Considerations

May not be suitable for high-security environments
Pattern strength depends on user choice
Limited accessibility compared to PIN or biometrics
Requires careful UX design to avoid user frustration
Not recommended for critical security use cases without additional safeguards

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Pattern Lock

Pattern Lock as Flutter widget.

Demo web-site.

Demo

Usage

PatternLock(
  // color of selected points.
  selectedColor: Colors.red,
  // radius of points.
  pointRadius: 8,
  // whether show user's input and highlight selected points.
  showInput: true,
  // count of points horizontally and vertically.
  dimension: 3,
  // padding of points area relative to distance between points.
  relativePadding: 0.7,
  // needed distance from input to point to select point.
  selectThreshold: 25,
  // whether fill points.
  fillPoints: true,
  // callback that called when user's input complete. Called if user selected one or more points.
  onInputComplete: (List<int> input) {
    print("pattern is $input");
  },
);

Example

Example app with pattern setting and checking can be found here.

Search packages, repositories and app categories

Install package