Flutter二维码生成插件rounded_qr_nullsafety的使用

rounded_qr_nullsafety是一个易于使用的 Flutter 包,用于创建具有圆角的二维码,并且可以在中心添加图像。它是 rounded_qr 的 null 安全版本,底层依赖于活跃维护的 qr 包。

使用方法

以下是一些常见的用法示例:

默认样式

默认情况下,二维码模块会带有半径为 4.0 的圆角。

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

void main() => runApp(const MyApp());

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: RoundedQR(
            data: 'https://github.com/mdshadatrahman',
          ),
        ),
      ),
    );
  }
}

去除圆角(方形)

可以通过将 moduleRadiusbackgroundRadius 设置为 0.0 来移除圆角。

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

void main() => runApp(const MyApp());

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: RoundedQR(
            data: 'https://github.com/mdshadatrahman',
            moduleRadius: 0.0,
            backgroundRadius: 0.0,
          ),
        ),
      ),
    );
  }
}

添加中心图像

可以通过传递 NetworkImageAssetImageimage 参数来在二维码中心添加图像。

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

void main() => runApp(const MyApp());

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: RoundedQR(
            data: 'https://github.com/mdshadatrahman',
            image: const NetworkImage('https://avatars.githubusercontent.com/u/43848931?v=4'),
          ),
        ),
      ),
    );
  }
}

自定义颜色

可以分别通过设置 moduleColorbackgroundColor 参数来自定义模块颜色和背景颜色。

注意:模块颜色需要比背景颜色更深,以便大多数二维码扫描器能够正常工作。

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

void main() => runApp(const MyApp());

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: RoundedQR(
            data: 'https://github.com/mdshadatrahman',
            moduleColor: Colors.blue,
            backgroundColor: Colors.grey,
          ),
        ),
      ),
    );
  }
}

更改二维码版本

可以通过设置 typeNumber 参数来更改二维码版本(1 到 40),以允许更多的存储空间。

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

void main() => runApp(const MyApp());

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: RoundedQR(
            data: 'https://github.com/mdshadatrahman',
            typeNumber: 17,
          ),
        ),
      ),
    );
  }
}

更改错误纠正级别

可以通过设置 errorCorrectLevel 参数来更改错误纠正级别,以允许恢复更多数据字节。

  • Level L (低) - 可恢复 7% 的数据字节。
  • Level M (中) - 可恢复 15% 的数据字节。
  • Level Q (四分之一) - 可恢复 25% 的数据字节。
  • Level H (高) - 可恢复 30% 的数据字节。
import 'package:flutter/material.dart';
import 'package:rounded_qr_nullsafety/rounded_qr_nullsafety.dart';
import 'package:qr/qr.dart'; // 我们将从 `qr` 包中导入 `QrErrorCorrectLevel`

void main() => runApp(const MyApp());

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: RoundedQR(
            data: 'https://github.com/mdshadatrahman',
            errorCorrectLevel: QrErrorCorrectLevel.H,
          ),
        ),
      ),
    );
  }
}

更多关于Flutter二维码生成插件rounded_qr_nullsafety的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter二维码生成插件rounded_qr_nullsafety的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


rounded_qr_nullsafety 是一个用于在 Flutter 应用中生成带有圆角的二维码的插件。它基于 qr 包,并提供了更多的自定义选项,如圆角、颜色、背景等。

安装

首先,你需要在 pubspec.yaml 文件中添加 rounded_qr_nullsafety 依赖:

dependencies:
  flutter:
    sdk: flutter
  rounded_qr_nullsafety: ^1.0.0

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

基本用法

以下是一个简单的示例,展示如何使用 rounded_qr_nullsafety 生成一个带有圆角的二维码:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Rounded QR Code Example'),
        ),
        body: Center(
          child: RoundedQr(
            data: 'https://flutter.dev',
            size: 200.0,
            borderRadius: 20.0,
            foregroundColor: Colors.blue,
            backgroundColor: Colors.white,
          ),
        ),
      ),
    );
  }
}

参数说明

  • data: 要编码为二维码的字符串数据。
  • size: 二维码的大小(宽度和高度)。
  • borderRadius: 二维码的圆角半径。
  • foregroundColor: 二维码的前景颜色(通常是二维码的颜色)。
  • backgroundColor: 二维码的背景颜色。

自定义二维码

你可以通过调整参数来自定义二维码的外观。例如,你可以改变二维码的颜色、背景颜色、圆角半径等。

RoundedQr(
  data: 'https://flutter.dev',
  size: 200.0,
  borderRadius: 30.0,
  foregroundColor: Colors.green,
  backgroundColor: Colors.black,
)

处理错误

如果二维码数据无效或无法生成二维码,RoundedQr 会显示一个默认的错误图标。你可以通过 errorWidget 参数来自定义错误时的显示内容。

RoundedQr(
  data: 'https://flutter.dev',
  size: 200.0,
  borderRadius: 20.0,
  foregroundColor: Colors.blue,
  backgroundColor: Colors.white,
  errorWidget: Icon(Icons.error, color: Colors.red, size: 50.0),
)
回到顶部