Flutter图案点阵生成插件pattern_dots的使用

pattern_dots 是一个使用 Flutter 实现的图案锁界面插件。本示例将展示如何在 Flutter 应用程序中使用该插件。

使用

要使用 pattern_dots 插件，首先需要将其添加到 pubspec.yaml 文件中：

dependencies:
  pattern_dots: ^版本号

然后运行 flutter pub get 来安装依赖。

接下来，让我们看看如何在应用程序中使用它。以下是一个完整的示例代码，展示了如何创建一个简单的图案锁界面。

示例代码

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:pattern_dots/pattern_dots.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // 定义密码模式
  final passPattern = [0, 1, 2, 3, 4];
  List<int> patterns = [];
  PatternState state = PatternState.active;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: PatternStyle(
          data: PatternStyleData(
            tapRange: 24,
            linePaint: (state) => Paint()
              ..strokeWidth = 2
              ..color = switch (state) {
                PatternState.normal => Colors.grey,
                PatternState.active => Colors.blue,
                PatternState.success => Colors.green,
                PatternState.error => Colors.red,
              }
              ..style = PaintingStyle.stroke,
            dotBuilder: (state) {
              final color = switch (state) {
                PatternState.normal => Colors.grey,
                PatternState.active => Colors.blue,
                PatternState.success => Colors.green,
                PatternState.error => Colors.red,
              };
              return Container(
                width: 12,
                height: 12,
                decoration: ShapeDecoration(
                  shape: const CircleBorder(),
                  color: color,
                ),
              );
            },
            dotPainter: (state, canvas, center) {},
          ),
          child: PatternView(
            matrixX: 4,
            matrixY: 6,
            state: state,
            value: patterns,
            onStart: () {
              state = PatternState.active;
              patterns = [];
              setState(() {});
            },
            onUpdate: (value) {
              patterns = value;
              setState(() {});
            },
            onEnd: (value) {
              patterns = value;
              if (listEquals(passPattern, patterns)) {
                state = PatternState.success;
              } else {
                state = PatternState.error;
              }
              setState(() {});
            },
          ),
        ),
      ),
    );
  }
}

代码解释

• 导入必要的库：

  import 'package:flutter/foundation.dart';
  import 'package:flutter/material.dart';
  import 'package:pattern_dots/pattern_dots.dart';
  

• 定义主应用类 MyApp：

  class MyApp extends StatelessWidget {
    const MyApp({super.key});
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
          useMaterial3: true,
        ),
        home: const HomePage(),
      );
    }
  }
  

• 定义主页状态类 HomePage 和 _HomePageState：

  class HomePage extends StatefulWidget {
    const HomePage({super.key});
  
    @override
    State<HomePage> createState() => _HomePageState();
  }
  
  class _HomePageState extends State<HomePage> {
    final passPattern = [0, 1, 2, 3, 4];
    List<int> patterns = [];
    PatternState state = PatternState.active;
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(),
        body: Center(
          child: PatternStyle(
            data: PatternStyleData(
              tapRange: 24,
              linePaint: (state) => Paint()
                ..strokeWidth = 2
                ..color = switch (state) {
                  PatternState.normal => Colors.grey,
                  PatternState.active => Colors.blue,
                  PatternState.success => Colors.green,
                  PatternState.error => Colors.red,
                }
                ..style = PaintingStyle.stroke,
              dotBuilder: (state) {
                final color = switch (state) {
                  PatternState.normal => Colors.grey,
                  PatternState.active => Colors.blue,
                  PatternState.success => Colors.green,
                  PatternState.error => Colors.red,
                };
                return Container(
                  width: 12,
                  height: 12,
                  decoration: ShapeDecoration(
                    shape: const CircleBorder(),
                    color: color,
                  ),
                );
              },
              dotPainter: (state, canvas, center) {},
            ),
            child: PatternView(
              matrixX: 4,
              matrixY: 6,
              state: state,
              value: patterns,
              onStart: () {
                state = PatternState.active;
                patterns = [];
                setState(() {});
              },
              onUpdate: (value) {
                patterns = value;
                setState(() {});
              },
              onEnd: (value) {
                patterns = value;
                if (listEquals(passPattern, patterns)) {
                  state = PatternState.success;
                } else {
                  state = PatternState.error;
                }
                setState(() {});
              },
            ),
          ),
        ),
      );
    }
  }