Flutter NFC通信插件dot_nfc的使用

DOT NFC

Flutter插件，作为Innovatrics DOT Flutter SDK的一部分，提供了用于NFC读取及相关功能的组件，这些组件易于集成到Flutter项目中。

开始使用

  1. 检查需求，获取许可证文件，设置你的项目，查看如何初始化和反初始化DOT SDK并尝试示例。请遵循DOT SDK / 开始使用的主题。
  2. 使用组件。参见下一节。

组件

概述

DOT NFC插件提供UI组件。这些组件以小部件的形式存在，并可以添加到你的小部件树中。

UI组件（小部件）列表
  • NFC旅行证件阅读器：一个用于读取启用了NFC的旅行证件的视觉组件。
    • 更多详情请参见NfcTravelDocumentReaderWidget。
    • 查看NFC读取功能以更深入地了解概念。

示例代码

以下是一个完整的示例demo，展示了如何在Flutter应用中使用dot_nfc插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'NFC Reading Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: NfcTravelDocumentReaderScreen(),
    );
  }
}

class NfcTravelDocumentReaderScreen extends StatefulWidget {
  [@override](/user/override)
  _NfcTravelDocumentReaderScreenState createState() => _NfcTravelDocumentReaderScreenState();
}

class _NfcTravelDocumentReaderScreenState extends State<NfcTravelDocumentReaderScreen> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('NFC Travel Document Reader'),
      ),
      body: Center(
        child: NfcTravelDocumentReaderWidget(
          // 当NFC读取成功时调用
          onReadSuccess: (documentData) {
            print('Document Data: $documentData');
            // 处理读取的数据
          },
          // 当NFC读取失败时调用
          onReadFailure: (errorMessage) {
            print('Error: $errorMessage');
            // 显示错误信息
          },
        ),
        // 添加注释以便理解
        // NfcTravelDocumentReaderWidget 是用于读取NFC旅行证件的小部件
      ),
    );
  }
}

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

1 回复

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


当然，下面是一个关于如何使用Flutter NFC通信插件dot_nfc的示例代码。这个示例将展示如何初始化NFC插件、读取NFC标签的数据以及处理NFC标签的读取事件。

首先，确保在你的pubspec.yaml文件中添加dot_nfc依赖：

dependencies:
  flutter:
    sdk: flutter
  dot_nfc: ^x.y.z  # 请替换为最新版本号

然后，在你的Flutter项目的Dart代码中，你可以按照以下步骤实现NFC通信功能。

1. 导入插件并初始化

在你的主Dart文件（例如main.dart）中，导入dot_nfc插件并初始化它：

import 'package:flutter/material.dart';
import 'package:dot_nfc/dot_nfc.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> with WidgetsBindingObserver {
  late NfcManager nfcManager;
  bool isNfcAvailable = false;
  bool isNfcEnabled = false;
  String? nfcData;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance!.addObserver(this);
    initNfc();
  }

  @override
  void dispose() {
    WidgetsBinding.instance!.removeObserver(this);
    nfcManager.dispose();
    super.dispose();
  }

  Future<void> initNfc() async {
    nfcManager = NfcManager.builder()
      ..onDiscovered(onNfcDiscovered)
      ..onError(onNfcError)
      ..build();

    bool? available = await nfcManager.isAvailable();
    if (available == true) {
      setState(() {
        isNfcAvailable = true;
      });

      bool? enabled = await nfcManager.isEnabled();
      if (enabled == false) {
        await nfcManager.enable();
        enabled = await nfcManager.isEnabled();
      }

      setState(() {
        isNfcEnabled = enabled == true;
      });

      if (isNfcEnabled) {
        nfcManager.startSession();
      }
    }
  }

  void onNfcDiscovered(NfcNdefRecord record) {
    setState(() {
      nfcData = record.payloadAsString;
    });
  }

  void onNfcError(Object error) {
    print("NFC Error: $error");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('NFC Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('NFC Available: $isNfcAvailable'),
            Text('NFC Enabled: $isNfcEnabled'),
            if (nfcData != null)
              Text('NFC Data: $nfcData'),
          ],
        ),
      ),
    );
  }
}

2. 权限处理

确保在AndroidManifest.xml中添加NFC权限和特性声明：

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

3. 处理前台NFC调度（Android特定）

在MainActivity.kt（或MainActivity.java）中，确保你处理了前台NFC调度。对于Kotlin：

package com.example.yourapp

import android.content.Intent
import android.content.IntentFilter
import android.nfc.NfcAdapter
import android.os.Bundle
import androidx.annotation.NonNull
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine

class MainActivity: FlutterActivity() {
    private var nfcAdapter: NfcAdapter? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        nfcAdapter = NfcAdapter.getDefaultAdapter(this)

        if (nfcAdapter == null) {
            finish()
            return
        }

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

        handleIntent(intent)
    }

    override fun onNewIntent(@NonNull 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)
            // 处理NFC标签数据，这里可以调用Dart代码或者进行其他处理
        }
    }

    override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
    }
}

注意：上述Kotlin代码只是一个基本示例，实际项目中可能需要更复杂的处理逻辑，特别是与Dart代码的交互。

4. 运行应用

确保你的设备支持NFC，并且已经启用了NFC功能。运行你的Flutter应用，你应该能够看到NFC的可用性和启用状态，并且在NFC标签靠近设备时，能够读取到标签的数据。

这个示例代码展示了如何初始化NFC插件、处理NFC标签的读取事件，并更新UI以显示读取到的数据。希望这能帮助你开始使用dot_nfc插件进行NFC通信。

回到顶部