Implementing NFC in Flutter: A Complete Guide

Introduction

Near Field Communication (NFC) is a short-range wireless technology that enables seamless data exchange between devices in close proximity. It is widely adopted for various applications such as mobile payments, access control, data transfer, and authentication. With the increasing integration of NFC in smartphones and other smart devices, its usage continues to grow rapidly.

In this article, we will explore NFC technology, its different use cases, and how to integrate NFC functionality into a Flutter application. You will learn how to read and write NFC tags, handle NFC sessions, and implement security features to enhance data safety.

Understanding NFC

NFC operates based on electromagnetic induction and functions within a range of a few centimeters. It enables secure and convenient data transfer between two NFC-enabled devices or between a device and an NFC tag. NFC has three primary operating modes:

1. Reader/Writer Mode — This mode allows a device to read data from or write data to an NFC tag.
2. Card Emulation Mode — This enables a device to act as an NFC card, commonly used for mobile payments or secure access.
3. Peer-to-Peer Mode — This mode allows two NFC-enabled devices to exchange data, making it useful for file sharing and authentication.

Key Applications of NFC

NFC is widely used across different industries due to its versatility and security features:

• Mobile Payments: NFC facilitates contactless payments through services like Google Pay, Apple Pay, and Samsung Pay.
• Access Control & Security: Offices, hotels, and residential buildings utilize NFC-based smart locks and ID verification.
• Public Transport: Many metro systems and bus networks use NFC-enabled travel cards for seamless ticketing.
• Healthcare: NFC tags store patient information, enabling quick and easy access in hospitals and clinics.
• Marketing & Advertising: Businesses use NFC in interactive advertisements, posters, and product authentication.
• Smart Home & IoT: NFC tags can be used to control smart devices, such as adjusting thermostat settings or unlocking doors.

Implementing NFC in Flutter

Flutter provides multiple packages for NFC integration, with flutter_nfc_kit and nfc_manager being the most commonly used ones. In this guide, we will use nfc_manager to demonstrate how to read and write NFC tags.

Step 1: Add Dependencies

To begin, add the required dependency to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  nfc_manager: ^3.2.0

Then, fetch the dependencies by running:

flutter pub get

Step 2: Configure Permissions

For NFC functionality to work on mobile devices, necessary permissions must be added.

Android Permissions

Modify your AndroidManifest.xml file to include:

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

iOS Permissions

For iOS devices, update Info.plist:

<key>NFCReaderUsageDescription</key>
<string>We use NFC to read and write tags</string>

Step 3: Implement NFC Reading

Now, let’s create a basic Flutter UI to scan NFC tags and display their content.

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

void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: NFCReaderScreen(),
    );
  }
}
class NFCReaderScreen extends StatefulWidget {
  @override
  _NFCReaderScreenState createState() => _NFCReaderScreenState();
}
class _NFCReaderScreenState extends State<NFCReaderScreen> {
  String nfcData = "Tap an NFC tag";
  Future<void> startNFC() async {
    bool isAvailable = await NfcManager.instance.isAvailable();
    if (!isAvailable) {
      setState(() {
        nfcData = "NFC is not available on this device";
      });
      return;
    }
    NfcManager.instance.startSession(onDiscovered: (NfcTag tag) async {
      setState(() {
        nfcData = tag.data.toString();
      });
      NfcManager.instance.stopSession();
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("NFC Reader")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(nfcData, style: TextStyle(fontSize: 18)),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: startNFC,
              child: Text("Scan NFC Tag"),
            ),
          ],
        ),
      ),
    );
  }
}

Step 4: Implement NFC Writing

Apart from reading, you can also write data to an NFC tag. Below is an example:

Future<void> writeNFC(String message) async {
  bool isAvailable = await NfcManager.instance.isAvailable();
  if (!isAvailable) {
    return;
  }

NfcManager.instance.startSession(onDiscovered: (NfcTag tag) async {
    Ndef ndef = Ndef.from(tag);
    if (ndef != null && ndef.isWritable) {
      NdefMessage ndefMessage = NdefMessage([NdefRecord.createText(message)]);
      await ndef.write(ndefMessage);
    }
    NfcManager.instance.stopSession();
  });
}

Step 5: Enhancing the Application

To improve the functionality and usability of your NFC app, consider implementing the following features:

• Error Handling & User Feedback: Display alerts or toasts for different NFC states (e.g., unsupported device, read/write failures).
• Secure NFC Communication: Encrypt data before writing it to an NFC tag and implement authentication mechanisms.
• Background NFC Processing: Allow NFC tag reading even when the app is in the background.
• Multi-Tag Support: Enable scanning multiple tags in a single session for bulk operations.
• Custom Data Structures: Store structured data such as JSON in NFC tags instead of plain text.

Step 6: Testing the NFC Functionality

To test your Flutter NFC application:

• Deploy it to a physical device with NFC support.
• Try scanning different NFC tags and observe the results.
• Test writing functionality by encoding text into NFC tags and reading them back.

Conclusion

NFC technology offers a convenient and secure way to transfer data and enable contactless interactions. By leveraging Flutter and the nfc_manager package, you can easily integrate NFC functionality into your mobile applications. Whether for payments, authentication, or IoT interactions, NFC enhances the user experience.

By following the steps in this guide, you can successfully implement NFC reading and writing in your Flutter app. Now, try adding advanced features like encrypted storage, background scanning, or multi-tag support to make your app even more powerful!

Thank you for being a part of the community

Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Newsletter | Podcast | Differ
• Check out CoFeed, the smart way to stay up-to-date with the latest in tech 🧪
• Start your own free AI-powered blog on Differ 🚀
• Join our content creators community on Discord 🧑🏻‍💻
• For more content, visit plainenglish.io + stackademic.com