This blog will explore the NFC in Flutter. We will perceive how to execute a demo program in your flutter applications. Near-field communication — NFC is something that has eased up our lives in many ways. Let’s get through it in brief.
If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.
Table Of Contents::
What is NFC?
NFC (near-field communication), is a short-range(depending on hardware, usually around 3 cm–5 cm) wireless technology that allows your phone to act as a transit pass or a credit card, speedily transfer data, or instantly connect with Bluetooth devices like headphones or speakers.
NFC is not some entirely new technology. It’s simply an evolved form of RFID (radio frequency identification) technology that has already been used around for decades. If you’ve ever used a key card (punch card) to access an office building or hotel room, you already know how it works.
NFC is based on RFID technology but has a much lower transmission range.
NFC only has a maximum range of a few centimeters, at most. And in so many smartphone-related applications, you’ll find that the software will only initiate communication if there is some physical contact. This is to prevent accidental triggers — especially the point that the technology is used for transferring sensitive/tactful data.
NDEF:-
NDEF is a Dart library for encoding & decoding NDEF records, supporting multiple types including (grouped by Type Name Format):
-> NFC Well Known:
- Text
- Connection handover
- Smart poster
- URI with a well-known prefix
- Digital signature
-> Media (MIME data):
- Easy Bluetooth pairing / Bluetooth low-energy
- other MIME data
-> Absolute URI
Flutter with NFC:-
You will find multiple packages in the pub. dev. The one I chose is called nfc_manager and supports Android and iOS. This package is something that is being used very often whenever we need to work with NFC in a flutter.
The project I will present here is based on the counter-example of Flutter with NFC. The good part is you can easily store your current value on a tag and read a value from it. This storage does not need any device or any power source. The tag acts as an enduring memory layer for the app.
What is an NFC tag?
An NFC tag is a small integrated circuit consisting of a copper coil and a few amounts of storage. We can easily read and write data to it only when some other NFC device is brought near to it because it doesn’t contain a power source. The proximity of the NFC device induces its power in the title and that enables data transmission.
What is an NFC reader?
Any powered device which has its own NFC coil (like a tablet, smartphone, etc) can act as an NFC reader. With the help of its battery, the reader device gets able to generate an electromagnetic field, which powers the tags that are brought near it. Also, a basic example of a reader is a payment terminal, which makes use of NFC to authenticate a credit & debit card.
Platform Setup:-
- Android requires use permission in the app’s main manifest file, as follows:
<uses-permission android:name="android.permission.NFC"/>iOS Setup :
- Add Near Field Communication Tag Reader Session Formats Entitlements to your entitlements.
- Add NFCReaderUsageDescription to your
Info.plist.
<key>NFCReaderUsageDescription</key>- Add com.apple.developer.nfc.reader session.Felica. system codes and com.apple.developer.nfc.reader session.iso7816.select-identifiers to your
Info.plistas needed.
<key>com.apple.developer.nfc.readersession.felica.systemcodes</key>Code Implement:
Let’s get started with the NFC demo project.
Global flag if NFC is available.
bool isNfcAvalible = false;
void main() async {
WidgetsFlutterBinding.ensureInitialized(); // Required for the line below
isNfcAvalible = await NfcManager.instance.isAvailable();
runApp(const MyApp());
}This is how we write NFC tags.
NfcManager.instance.startSession(onDiscovered: (tag) async {
Ndef? ndef = Ndef.from(tag);
NdefMessage message = NdefMessage([
NdefRecord.createExternal('android.com', 'pkg',
Uint8List.fromList('com.example'.codeUnits))
]);
try {
await ndef!.write(message);
NfcManager.instance.stopSession();
print("Counter witten a tag");
// _alert('Counter written to tag');
return;
} catch (e) {
print('error $e');
return;
}
}),And this is how we read from the tag.
var ndefMessage = ndef?.cachedMessage!;And this is how we read from the tag.
if (ndefMessage!.records.isNotEmpty &&
ndefMessage.records.first.typeNameFormat ==
NdefTypeNameFormat.nfcWellknown) {
final wellKnownRecord = ndefMessage.records.first;if (wellKnownRecord.payload.first == 0x02) {
final languageCodeAndContentBytes =
wellKnownRecord.payload.skip(1).toList();
final languageCodeAndContentText =
utf8.decode(languageCodeAndContentBytes);
final payload = languageCodeAndContentText.substring(
2);
final storedCounters = int.tryParse(payload);
if (storedCounters != null) {
print("Success!");
print('Counter restored from tag');
}
}As working with NFC with iOS, we need to stop the session after every tags:-
if (Platform.isIOS) {
NfcManager.instance.stopSession();
}Conclusion:
In this article, we get to learn how to work with NFC in Flutter Application. This article gives a good understanding of how to read and write to a tag so that one can easily make data transfer.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Github Link:
Find the source code of the NFC Application :
GitHub – flutter-devs/my_nfc_demo
A new Flutter project. This project is a starting point for a Flutter application. A few resources to get you started…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
