Near Field Communication (NFC) es una tecnología inalámbrica de corto alcance que permite que los dispositivos compartan datos cuando están cerca. La encuentras en pagos contactless, tarjetas de visita inteligentes y otras herramientas diarias que facilitan la vida. Para los desarrolladores móviles, añadir funcionalidades de lector y escritor NFC a las apps abre muchas posibilidades.
Flutter, el kit de herramientas UI de Google, te permite construir apps para móvil, web y escritorio desde un solo código base. Hace que crear apps cross-platform sea más eficiente. En este tutorial app NFC Flutter, te mostraremos cómo construir una app NFC en Flutter que puede leer y escribir en tags NFC usando el paquete NFC Manager.
Configuración del proyecto para tu proyecto Flutter NFC
Antes de sumergirnos en el código del tutorial app NFC Flutter, vamos a configurar nuestro proyecto y prepararlo.
Prerrequisitos para implementar NFC en Flutter
Asegúrate de tener lo siguiente instalado y listo para seguir este tutorial app NFC Flutter:
- Flutter SDK: Instala el Flutter SDK siguiendo la documentación oficial.
- Comprensión básica de Dart y Flutter: Necesitas conocer los fundamentos del lenguaje Dart y el framework Flutter.
- Un dispositivo físico que soporte NFC: No puedes probar apps Flutter NFC reader writer en simuladores o emuladores. Necesitas un dispositivo Android o iOS que soporte NFC.
Con este setup, ya estamos listos para comenzar con el tutorial app NFC Flutter.
Crear un nuevo proyecto Flutter
Para empezar, crea un nuevo proyecto Flutter ejecutando el siguiente comando en tu terminal:
flutter create nfc_demo
Esto creará un nuevo directorio llamado nfc_demo con la estructura básica del proyecto Flutter. Abre este proyecto en tu IDE favorito, como Visual Studio Code o Android Studio.
Añadir dependencias
En nuestro tutorial app NFC Flutter, necesitamos añadir el paquete nfc_manager a nuestro proyecto. Abre el archivo pubspec.yaml y añade las siguientes líneas bajo dependencies:
dependencies:
flutter:
sdk: flutter
# Los siguientes añaden el font Cupertino Icons a tu aplicación.
# Úsalos con la clase CupertinoIcons para iconos estilo iOS.
cupertino_icons: ^1.0.8
nfc_manager: ^4.0.2
nfc_manager_ndef: ^1.0.1
Después de añadir la dependencia, ejecuta el siguiente comando en tu terminal para instalarla:
flutter pub get
El paquete nfc_manager Flutter es la dependencia core que proporciona las APIs necesarias para interactuar con el hardware NFC del dispositivo para leer y escribir tags NFC.
Implementando características NFC
Con el proyecto configurado, ahora podemos empezar a implementar NFC en Flutter siguiendo este tutorial app NFC Flutter.
Verificar disponibilidad NFC
Antes de intentar cualquier operación NFC, es crucial verificar si el hardware del dispositivo realmente soporta NFC. Esto previene errores y te permite proporcionar una mejor experiencia de usuario, por ejemplo, deshabilitando elementos UI relacionados con NFC.
import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:nfc_manager/ndef_record.dart';
import 'package:nfc_manager/nfc_manager.dart';
import 'package:nfc_manager_ndef/nfc_manager_ndef.dart';
// Un boolean para verificar si NFC está disponible en el dispositivo.
bool isNfcAvailable = false;
Future<void> _checkNfcAvailability() async {
setState(() async {
isNfcAvailable = await NfcManager.instance.isAvailable();
});
}
Explicación del código:
NfcManager.instance.isAvailable(): Este método asíncrono devuelve un Future<bool> que se resuelve a true si el dispositivo tiene hardware NFC y está habilitado, y false en caso contrario.
Leer tags NFC
Para empezar a leer un tag NFC, necesitas iniciar una sesión y escuchar el descubrimiento de tags. Este es el primer paso para construir una app Flutter NFC reader, parte fundamental de nuestro tutorial app NFC Flutter.
void startRead(BuildContext context) async {
if (_isScanning) return;
setState(() {
_isScanning = true;
_status = 'Mantén un tag cerca del dispositivo...';
});
try {
await NfcManager.instance.startSession(
pollingOptions: {NfcPollingOption.iso14443},
onDiscovered: (NfcTag tag) async {
try {
final result = await _readTagData(tag);
// Extraer registro de texto NDEF (RTD-Text) si está presente
final ndefText = extractNdefText(result);
setState(() {
_status = (ndefText != null && ndefText.isNotEmpty)
? 'Tag leído exitosamente! Texto: $ndefText'
: 'Tag leído exitosamente! No se encontró texto NDEF válido.';
});
} catch (e) {
setState(() {
_status = 'Error durante la lectura: $e';
});
} finally {
await NfcManager.instance.stopSession();
setState(() => _isScanning = false);
}
},
);
} catch (e) {
setState(() {
_status = 'Error al iniciar sesión NFC: $e';
_isScanning = false;
});
}
}
Explicación del código:
- NfcManager.instance.startSession(…): Esta función inicia una sesión NFC reader/writer Flutter.
- onDiscovered: (NfcTag tag) async { … }: Este callback se ejecuta cuando se descubre un tag NFC. El objeto NfcTag contiene los datos.
- Ndef.from(tag): Obtenemos los datos específicos NDEF (NFC Data Exchange Format) del tag.
- NfcManager.instance.stopSession(): Es importante parar la sesión después de procesar el tag para liberar recursos del sistema.
Escribir en tags NFC
Escribir datos en tags NFC en Flutter también es directo en nuestro tutorial app NFC Flutter.
Future<void> _startNFCWrite() async {
final text = _writeTextController.text.trim();
if (text.isEmpty) {
setState(() {
_status = 'Por favor, introduce texto para escribir en la tarjeta NFC';
});
return;
}
try {
setState(() {
_isScanning = true;
_status = _isIOS
? 'Mantén una tarjeta NFC escribible cerca de la parte superior de tu iPhone...'
: 'Mantén una tarjeta NFC escribible cerca de la parte trasera de tu dispositivo...';
});
await NfcManager.instance.startSession(
pollingOptions: {NfcPollingOption.iso14443},
onDiscovered: (NfcTag tag) async {
try {
final ndef = Ndef.from(tag);
if (ndef == null) {
throw Exception('Este tag no soporta NDEF');
}
if (!ndef.isWritable) {
throw Exception('Este tag no es escribible');
}
// Construir un registro de texto NDEF (tipo 'T') usando NFC Forum Text RTD
final languageCode = 'es';
final langBytes = utf8.encode(languageCode);
final textBytes = utf8.encode(text);
final statusByte = langBytes.length & 0x3F; // bit7=0 (UTF-8), 6 bits bajos = longitud idioma
final payload = Uint8List.fromList([
statusByte,
...langBytes,
...textBytes,
]);
final textRecord = NdefRecord(
typeNameFormat: TypeNameFormat.wellKnown,
type: Uint8List.fromList('T'.codeUnits),
identifier: Uint8List(0),
payload: payload,
);
final message = NdefMessage(records: [textRecord]);
await ndef.write(message: message);
setState(() {
_status = 'Datos escritos exitosamente en la tarjeta NFC!';
});
} catch (e) {
setState(() {
_status = 'Error escribiendo en la tarjeta: $e';
});
} finally {
await NfcManager.instance.stopSession();
setState(() => _isScanning = false);
}
},
);
} catch (e) {
setState(() {
_isScanning = false;
_status = 'Error iniciando escritura NFC: $e';
});
}
}
Desglose del código:
- NfcManager.instance.startSession(…): Esta función inicia una sesión de escritura NFC en Flutter.
- onDiscovered: (NfcTag tag) async { … }: Se activa cuando se detecta un tag y está listo para operaciones de escritura.
- Ndef.from(tag): Recupera la interfaz NDEF para el tag detectado.
- ndef.isWritable: Asegura que el tag soporte escritura antes de proceder.
- NdefMessage(…) + NdefRecord(…): Construimos un registro de texto NFC Forum (tipo ‘T’) con un byte de estado apropiado, código de idioma y payload de texto UTF-8.
- ndef.write(message: message): Escribe el mensaje NDEF al tag.
Manejar permisos
Para iOS, necesitas añadir la capacidad «Near Field Communication Tag Reading» en Xcode. También necesitas añadir la siguiente clave a tu archivo Info.plist (fundamental en este tutorial app NFC Flutter):
<key>NFCReaderUsageDescription</key>
<string>NFC se usa para leer tags.</string>
Para Android, añade el siguiente permiso a tu archivo AndroidManifest.xml:
<uses-permission android:name="android.permission.NFC" />
Diseño de interfaz de usuario (UI)
Una interfaz de usuario Flutter NFC reader writer simple e intuitiva mejora la experiencia en nuestro tutorial app NFC Flutter.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Lector/Escritor NFC')),
body: Center(
child: isNfcAvailable
? Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Estado: $_status'),
const SizedBox(height: 16),
ElevatedButton(
onPressed: _isScanning ? null : () => startRead(context),
child: const Text('Leer Tag NFC'),
),
const SizedBox(height: 24),
TextField(
controller: _writeTextController,
decoration: const InputDecoration(
labelText: 'Texto para escribir',
border: OutlineInputBorder(),
),
),
const SizedBox(height: 12),
ElevatedButton(
onPressed: _isScanning ? null : _startNFCWrite,
child: const Text('Escribir en Tag NFC'),
),
],
),
)
: const Text('NFC no disponible en este dispositivo'),
),
);
}
Explicación del código:
- _checkNfcAvailability(): Verifica si el dispositivo soporta NFC y actualiza la UI.
- ElevatedButton (Leer): Inicia una sesión de lectura NFC y escucha el descubrimiento de tags.
- TextField + ElevatedButton (Escribir): Acepta entrada del usuario y la escribe como un registro de texto NDEF a un tag escribible.
- Botones deshabilitados mientras escanea: Previene múltiples sesiones y mejora la experiencia del usuario.
Probando la aplicación
Como parte final de nuestro tutorial app NFC Flutter:
- Conecta tu dispositivo habilitado para NFC a tu ordenador.
- Ejecuta la app usando
flutter run. - La UI te dirá si NFC está disponible. Si lo está, toca el botón «Leer Tag NFC» y acerca un tag NFC a la antena NFC de tu dispositivo (generalmente en la parte trasera).
- Para escribir, introduce texto, toca el botón «Escribir en Tag NFC» y acerca un tag NFC escribible al dispositivo.
Características avanzadas y casos de uso
Este tutorial app NFC Flutter cubre los fundamentos, pero existen muchas posibilidades avanzadas:
Tipos de registros NDEF múltiples
Puedes manejar diferentes tipos de registros NDEF como URLs, datos binarios, o registros personalizados.
Integración con bases de datos
Combina las lecturas NFC con almacenamiento local usando SQLite o con APIs remotas.
Autenticación y seguridad
Implementa verificación de autenticidad de tags para aplicaciones críticas de seguridad.
Apps empresariales
Las funcionalidades NFC son ideales para control de inventario, gestión de activos y sistemas de punto de venta.
Conclusión
El paquete nfc_manager Flutter facilita añadir funcionalidad sólida de lector y escritor NFC a tus apps Flutter. En este tutorial app NFC Flutter, hemos establecido el flujo completo: verificar disponibilidad NFC, leer tags NFC, escribir registros NDEF y manejar errores potenciales.
Hay características más avanzadas para explorar, como manejar diferentes tipos de registros NDEF, implementar autenticación de tags y crear interfaces de usuario más sofisticadas que quedan fuera de esta primera versión del tutorial app NFC Flutter.
Por qué elegir Juice Studio para desarrollo Flutter
En Juice Studio, dominamos las tecnologías más avanzadas incluyendo desarrollo Flutter con funcionalidades NFC. Nuestro estudio puede ayudarte a implementar soluciones NFC robustas y escalables que van más allá de este tutorial app NFC Flutter.
Desde apps empresariales con autenticación NFC hasta sistemas de pagos contactless, aportamos la experiencia técnica y visión estratégica necesaria para crear aplicaciones Flutter que realmente marquen la diferencia en el mercado.
Ya sea que necesites funcionalidades NFC básicas o implementaciones complejas con integración a sistemas empresariales, en Juice Studio transformamos ideas innovadoras en aplicaciones móviles exitosas que aprovechan al máximo las capacidades NFC de los dispositivos modernos como has podido ver en este tutorial app NFC Flutter.
