Flutter NFC通信插件flutter_nfc_kit的使用

发布于 1周前 作者 wuwangju 来自 Flutter

Flutter NFC Kit 使用指南

Flutter NFC Kit 是一个用于在Flutter应用程序中实现NFC(近距离无线通信)功能的插件。它支持Android、iOS和浏览器(通过WebUSB)。以下是关于如何使用这个插件的详细介绍。

功能特性

  • 支持读取ISO 14443 Type A & Type B、ISO 18092、ISO 15963等标准的标签或卡片的元数据和NDEF记录。
  • 支持MIFARE Classic/Ultralight(仅限Android)和ISO 15693(仅限iOS)的块/页/扇区级别数据读写。
  • 支持与符合ISO 7816智能卡标准或其他设备支持技术的标签或卡片进行原始命令传输。
  • 使用ndef包进行NDEF记录编码和解码。

注意事项

由于API限制,并非所有操作都在所有平台上得到支持。对于特定标准的操作,欢迎提交PR来增加支持。

设置

Android

AndroidManifest.xml文件中添加android.permission.NFC权限。

<uses-permission android:name="android.permission.NFC" />

iOS

  1. Info.plist中添加NFCReaderUsageDescription键,用于描述应用为何需要访问NFC。
  2. 根据需求添加com.apple.developer.nfc.readersession.felica.systemcodescom.apple.developer.nfc.readersession.iso7816.select-identifiers
  3. 打开Runner.xcworkspace,在项目设置中的Signing & Capabilities选项卡下添加Near Field Communication Tag Reading能力。

Web

Web端实际上并不直接支持NFC,而是通过WebUSB协议与双接口(NFC/USB)设备通信。

示例代码

下面是一个简单的例子,展示了如何使用flutter_nfc_kit插件来读取和写入NFC标签:

import 'package:flutter/material.dart';
import 'package:flutter_nfc_kit/flutter_nfc_kit.dart';
import 'package:ndef/ndef.dart' as ndef;

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _message = "Press the button to start";

  void _startNFCTagPolling() async {
    var availability = await FlutterNfcKit.nfcAvailability;
    if (availability != NFCAvailability.available) {
      setState(() {
        _message = "NFC is not available.";
      });
      return;
    }

    try {
      // 开始轮询NFC标签
      var tag = await FlutterNfcKit.poll(
        timeout: Duration(seconds: 10),
        iosMultipleTagMessage: "Multiple tags found!",
        iosAlertMessage: "Scan your tag",
      );

      setState(() {
        _message = jsonEncode(tag);
      });

      if (tag.ndefAvailable) {
        // 读取NDEF记录
        for (var record in await FlutterNfcKit.readNDEFRecords(cached: false)) {
          print(record.toString());
        }

        // 写入NDEF记录
        if (tag.ndefWritable) {
          await FlutterNfcKit.writeNDEFRecords([
            new ndef.UriRecord.fromUriString("https://github.com/nfcim/flutter_nfc_kit")
          ]);
        }
      }

      // 完成并显示消息
      await FlutterNfcKit.finish(iosAlertMessage: "Success");
    } catch (e) {
      await FlutterNfcKit.finish(iosErrorMessage: e.toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter NFC Kit Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(_message),
              ElevatedButton(
                onPressed: _startNFCTagPolling,
                child: Text('Start NFC Tag Polling'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这段代码创建了一个简单的Flutter应用程序,允许用户点击按钮开始轮询附近的NFC标签,并根据标签的内容执行相应的读取或写入操作。如果成功完成,则会弹出成功的提示信息;如果有错误发生,则会显示错误信息。


更多关于Flutter NFC通信插件flutter_nfc_kit的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter NFC通信插件flutter_nfc_kit的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何使用 flutter_nfc_kit 插件来进行 NFC 通信的示例代码。这个示例将展示如何读取 NFC 标签的数据,并显示在 Flutter 应用的界面上。

首先,确保你已经将 flutter_nfc_kit 添加到你的 Flutter 项目的 pubspec.yaml 文件中:

dependencies:
  flutter:
    sdk: flutter
  flutter_nfc_kit: ^x.y.z  # 请使用最新版本号

然后,运行 flutter pub get 来获取依赖。

接下来,配置 Android 和 iOS 的权限和设置:

Android 配置

android/app/src/main/AndroidManifest.xml 中添加 NFC 权限:

<uses-permission android:name="android.permission.NFC" />
<uses-feature android:name="android.hardware.nfc" android:required="true" />

android/app/src/main/kotlin/.../MainActivity.ktMainActivity.java 中,确保 NFC 适配器已启用:

// MainActivity.kt
import android.content.Intent
import android.content.IntentFilter
import android.nfc.NfcAdapter
import androidx.annotation.NonNull
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine

class MainActivity: FlutterActivity() {
    private lateinit var nfcAdapter: NfcAdapter

    override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        nfcAdapter = NfcAdapter.getDefaultAdapter(this)
        if (nfcAdapter == null) {
            // NFC is not available on this device
            return
        }

        if (!nfcAdapter.isEnabled) {
            val intent = Intent(NfcAdapter.ACTION_ENABLE)
            startActivityForResult(intent, 0)
        }
    }

    override fun onNewIntent(intent: Intent) {
        super.onNewIntent(intent)
        setIntent(intent)
        handleIntent(intent)
    }

    private fun handleIntent(intent: Intent) {
        val action = intent.action
        if (NfcAdapter.ACTION_TAG_DISCOVERED == action) {
            val tag = intent.getParcelableExtra(NfcAdapter.EXTRA_TAG)
            // 你可以在这里将 tag 数据传递给 Flutter
        }
    }
}

iOS 配置

Info.plist 中添加 NFC 权限描述:

<key>NSNFCReaderUsageDescription</key>
<string>This app needs access to NFC tags to read their data.</string>

Flutter 代码

接下来,在你的 Flutter 应用中,使用 flutter_nfc_kit 来读取 NFC 标签。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: NfcScreen(),
    );
  }
}

class NfcScreen extends StatefulWidget {
  @override
  _NfcScreenState createState() => _NfcScreenState();
}

class _NfcScreenState extends State<NfcScreen> {
  String nfcData = "";

  @override
  void initState() {
    super.initState();
    NfcKit.startNfc().then((_) {
      NfcKit.addNdefListener((NdefMessage message) {
        setState(() {
          nfcData = message.text; // 假设 NFC 标签包含文本
        });
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('NFC Reader'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('NFC Data:'),
            Text(nfcData, style: TextStyle(fontSize: 24)),
          ],
        ),
      ),
    );
  }
}

这个示例代码展示了如何使用 flutter_nfc_kit 插件来读取 NFC 标签的数据,并将其显示在 Flutter 应用的界面上。请注意,实际开发中你可能需要处理更多的错误和异常情况,并根据 NFC 标签的实际内容来解析数据。

回到顶部