Flutter签名验证插件sign_flutter的使用

Flutter签名验证插件sign_flutter的使用

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用sign_flutter插件。

import 'package:flutter/material.dart';
import 'package:sign_flutter/sign_flutter.dart';

void main() {
  runApp(const MaterialApp(
    home: CollectionChangesSign(count: 4),
  ));
}

///
class CollectionChangesSign extends StatefulWidget {
  ///
  const CollectionChangesSign({Key? key, required this.count})
      : super(key: key);

  final int count;

  @override
  State<CollectionChangesSign> createState() => _CollectionChangesSignState();
}

class _CollectionChangesSignState extends State<CollectionChangesSign> {
  ///
  late final List<Signal<int>> list =
      List.generate(widget.count, (index) => 0).signals;

  late final MultiSignal allNotifier = list.multiSignal;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: allNotifier
            .builder((value) => Text('SUM: $sum', key: const Key('sum_sign'))),
      ),
      body: ListView.separated(
        itemCount: list.length,
        cacheExtent: 2000,
        itemBuilder: (c, i) => Padding(
          padding: const EdgeInsets.symmetric(vertical: 30),
          child: CounterWidgetSign(counter: list[i], index: i),
        ),
        separatorBuilder: (context, index) => const Divider(),
      ),
    );
  }

  ///
  int get sum {
    var i = 0;
    for (var o in list) {
      i += o.value;
    }
    return i;
  }
}

///
class CounterWidgetSign extends StatelessWidget {
  ///
  const CounterWidgetSign(
      {Key? key, required this.counter, required this.index})
      : super(key: key);

  ///
  final Signal<int> counter;

  ///
  final int index;

  @override
  Widget build(BuildContext context) => Row(
        children: [
          Container(
            width: 200,
            alignment: Alignment.center,
            margin: const EdgeInsets.symmetric(horizontal: 0),
            child: Text(
              'Index Of $index',
            ),
          ),
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                GestureDetector(
                    key: Key('increment_sign_$index'),
                    onTap: () {
                      counter.value++;
                    },
                    child: const Text('Counter Increment')),
                counter.builder((value) => Text(
                      'value_sign_${index}_$value',
                      key: Key('value_sign_$index'),
                    )),
                GestureDetector(
                    key: Key('decrement_sign_$index'),
                    onTap: () {
                      counter.value--;
                    },
                    child: const Text('Counter Decrement'))
              ],
            ),
          ),
        ],
      );
}

使用说明

1. 导入包 在你的pubspec.yaml文件中添加sign_flutter依赖：

   dependencies:
     flutter:
       sdk: flutter
     sign_flutter: ^版本号
   

2. 初始化信号 创建一个包含多个信号的列表，并使用signals方法将其转换为信号列表。例如，在上面的代码中，我们创建了一个包含四个信号的列表：

   late final List<Signal<int>> list =
       List.generate(widget.count, (index) => 0).signals;
   

3. 监听信号变化 使用builder方法来监听信号的变化并更新UI。例如，我们在AppBar中使用了allNotifier.builder方法来显示所有信号的总和：

   appBar: AppBar(
     title: allNotifier
         .builder((value) => Text('SUM: $sum', key: const Key('sum_sign'))),
   ),
   

4. 处理用户交互 在每个计数器组件中，我们可以添加按钮来增加或减少信号的值。例如，点击“Counter Increment”按钮会增加信号的值：

   GestureDetector(
       key: Key('increment_sign_$index'),
       onTap: () {
         counter.value++;
       },
       child: const Text('Counter Increment')),