Flutter의 NFC 통신 사용법

NFC(Near Field Communication)는 근거리 무선 통신 기술로, Flutter 애플리케이션에서 NFC를 사용하면 스마트폰과 NFC 태그 간의 데이터를 주고받을 수 있습니다. 이번 글에서는 Flutter에서 NFC 통신을 구현하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. NFC 패키지 설치

Flutter 애플리케이션에서 NFC 통신을 구현하기 위해 flutter_nfc_kit 패키지를 사용합니다. pubspec.yaml 파일에 다음 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_nfc_kit: ^2.1.0

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

2. Android 설정

Android 프로젝트에서 NFC 권한을 사용하기 위해 android/app/src/main/AndroidManifest.xml 파일을 수정해야 합니다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.your_project_name">

    <application>
        ...
        <activity>
            ...
            <intent-filter>
                <action android:name="android.nfc.action.NDEF_DISCOVERED" />
                <category android:name="android.intent.category.DEFAULT" />
                <data android:mimeType="text/plain" />
            </intent-filter>
            <intent-filter>
                <action android:name="android.nfc.action.TECH_DISCOVERED" />
            </intent-filter>
            <intent-filter>
                <action android:name="android.nfc.action.TAG_DISCOVERED" />
            </intent-filter>
            <meta-data android:name="android.nfc.action.TECH_DISCOVERED"
                android:resource="@xml/nfc_tech_filter" />
        </activity>
    </application>

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

 

res/xml 폴더에 nfc_tech_filter.xml 파일을 생성하고 다음 내용을 추가합니다.

 

<resources xmlns:xliff="urn:oasis:names:tc:xliff:document:1.2">
    <tech-list>
        <tech>android.nfc.tech.NfcA</tech>
        <tech>android.nfc.tech.NfcB</tech>
        <tech>android.nfc.tech.NfcF</tech>
        <tech>android.nfc.tech.NfcV</tech>
        <tech>android.nfc.tech.IsoDep</tech>
        <tech>android.nfc.tech.MifareClassic</tech>
        <tech>android.nfc.tech.MifareUltralight</tech>
        <tech>android.nfc.tech.Ndef</tech>
    </tech-list>
</resources>

 

위 코드는 NFC 태그를 인식하기 위한 설정을 추가합니다.

3. iOS 설정

iOS 프로젝트에서 NFC 권한을 사용하기 위해 ios/Runner/Info.plist 파일을 수정해야 합니다.

<key>NFCReaderUsageDescription</key>
<string>We need your NFC to read NFC tags.</string>

 

위 코드는 NFC 사용 권한을 추가합니다.

 

반응형

 

4. NFC 태그 읽기

이제 Flutter 애플리케이션에서 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: NFCExample(),
    );
  }
}

class NFCExample extends StatefulWidget {
  @override
  _NFCExampleState createState() => _NFCExampleState();
}

class _NFCExampleState extends State<NFCExample> {
  String nfcResult = "Tap NFC Tag to Read Data";

  Future<void> _readNFC() async {
    try {
      var nfcTag = await FlutterNfcKit.poll(timeout: Duration(seconds: 10));
      setState(() {
        nfcResult = "NFC Tag ID: ${nfcTag.id}\nNFC Tag Content: ${nfcTag.ndefMessage}";
      });
    } catch (e) {
      setState(() {
        nfcResult = "Error reading NFC Tag: $e";
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('NFC Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _readNFC,
              child: Text('Read NFC Tag'),
            ),
            SizedBox(height: 20),
            Text(nfcResult),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 NFC 태그를 읽고 결과를 화면에 표시하는 예제입니다. FlutterNfcKit.poll 메서드를 사용하여 NFC 태그를 읽고, 태그의 ID와 내용을 표시합니다.

5. NFC 태그 쓰기

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: NFCExample(),
    );
  }
}

class NFCExample extends StatefulWidget {
  @override
  _NFCExampleState createState() => _NFCExampleState();
}

class _NFCExampleState extends State<NFCExample> {
  String nfcResult = "Tap NFC Tag to Write Data";
  TextEditingController _controller = TextEditingController();

  Future<void> _writeNFC() async {
    try {
      var nfcTag = await FlutterNfcKit.poll(timeout: Duration(seconds: 10));
      await FlutterNfcKit.transceive("NDEF Write ${_controller.text}");
      setState(() {
        nfcResult = "Data written to NFC Tag: ${_controller.text}";
      });
    } catch (e) {
      setState(() {
        nfcResult = "Error writing to NFC Tag: $e";
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('NFC Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              controller: _controller,
              decoration: InputDecoration(labelText: 'Enter data to write'),
            ),
            ElevatedButton(
              onPressed: _writeNFC,
              child: Text('Write to NFC Tag'),
            ),
            SizedBox(height: 20),
            Text(nfcResult),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 NFC 태그에 데이터를 쓰고 결과를 화면에 표시하는 예제입니다. FlutterNfcKit.transceive 메서드를 사용하여 NFC 태그에 데이터를 씁니다.

결론

Flutter 애플리케이션에서 NFC 통신을 구현하면 스마트폰과 NFC 태그 간의 데이터를 주고받을 수 있습니다. flutter_nfc_kit 패키지를 사용하여 NFC 태그를 읽고 쓰는 방법을 통해 NFC 통신 기능을 구현할 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 NFC 통신을 효율적으로 사용해보세요. NFC 통신을 통해 애플리케이션의 기능을 확장하고, 사용자 경험을 향상시킬 수 있습니다.