如何在Flutter中实现类似Snapchat Snapcodes的自定义码以唤起个人资料页

核心需求 #

• 生成带应用图标的专属自定义码，仅本应用可识别（非标准QR码）
• 扫描后直接唤起对应用户的个人资料页
• 以用户UID作为核心识别标识

可行实现路径 #

路径一：纯自定义图形编码方案（推荐） #

完全自主设计编码规则，从根源避免其他应用识别

1. 编码逻辑设计

• 将用户UID通过自定义映射规则转为固定尺寸的图形矩阵（比如15×15的黑白/彩色块阵列）
• 矩阵中心预留区域放置应用图标，周围阵列块对应UID的编码信息
• 加入专属校验位（比如固定位置的特定色块组合），只有本应用知晓校验规则，过滤其他工具的误识别

2. 生成端实现（Flutter）

用CustomPainter绘制自定义码，示例代码片段：

import 'dart:convert';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';

// 将UID转为自定义编码矩阵
List<List<int>> encodeUid(String uid) {
  // 自定义映射逻辑：将UID转为二进制矩阵（示例简化版）
  final bytes = utf8.encode(uid);
  final matrix = List.generate(15, (_) => List.filled(15, 0));
  for (int i = 0; i < bytes.length && i < 15*15; i++) {
    matrix[i~/15][i%15] = bytes[i] % 2;
  }
  return matrix;
}

// 自定义Snapcode绘制器
class SnapcodePainter extends CustomPainter {
  final String uid;
  final ui.Image appIcon;

  SnapcodePainter(this.uid, this.appIcon);

  @override
  void paint(Canvas canvas, Size size) {
    final blockSize = size.width / 15;
    final matrix = encodeUid(uid);

    // 绘制中心应用图标
    canvas.drawImageRect(
      appIcon,
      Rect.fromLTWH(0, 0, appIcon.width.toDouble(), appIcon.height.toDouble()),
      Rect.fromCenter(
        center: size.center(Offset.zero),
        width: size.width * 0.3,
        height: size.height * 0.3,
      ),
      Paint(),
    );

    // 绘制周围编码块（跳过中心图标区域）
    for (int i = 0; i < 15; i++) {
      for (int j = 0; j < 15; j++) {
        if ((i >= 5 && i <= 9) && (j >= 5 && j <= 9)) continue;
        if (matrix[i][j] == 1) {
          canvas.drawRect(
            Rect.fromLTWH(j * blockSize, i * blockSize, blockSize, blockSize),
            Paint()..color = Colors.black,
          );
        }
      }
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

3. 扫描解码端实现

• 用camera包获取摄像头画面，逐帧分析：
  1. 识别中心图标位置，定位自定义码的边界
  2. 提取周围色块矩阵，反向映射为UID
  3. 校验专属校验位，通过后跳转至用户资料页
• 可选：用tflite训练轻量图像识别模型，优化复杂场景下的识别准确率

路径二：基于现有二维码包改造（快速实现） #

本质还是QR码，但通过专属校验过滤其他应用

• 用qr_flutter生成包含UID的QR码，叠加应用图标
• 在UID末尾加入本应用专属的秘密后缀（比如-MyApp_Secret_123）
• 扫描时先校验后缀，仅当后缀匹配时才解析UID并跳转

关键注意点 #

• 编码规则要保密：核心映射逻辑和校验位不能泄露，防止其他工具逆向破解
• 适配多场景：生成的码要支持缩放，扫描模块要处理不同距离、角度的图像
• 优先本地处理：编码解码逻辑尽量在本地完成，仅获取用户资料时调用接口

内容的提问来源于stack exchange，提问作者Globe