Flutter: genera qrcode con varios pares clave-valor
Estoy tratando de generar qrcode en flutter. Necesito agregar tres pares clave-valor en el mismo. Entonces, cuando lo escaneo, puedo obtener la información relevante.
Esta es la primera vez que trabajo en el escaneo de códigos QR. Entonces, no tengo idea al respecto.
Aquí está el código.
import 'package:DTG/utils/d_app_drwaer.dart';
import 'package:DTG/utils/d_appbar.dart';
import 'package:auto_route/auto_route.dart';
import 'package:device_info/device_info.dart';
import 'package:flutter/material.dart';
import 'package:qr_flutter/qr_flutter.dart';
import 'package:flutter/services.dart';
import 'dart:async';
import 'dart:typed_data';
import 'dart:ui';
import 'dart:io';
import 'package:flutter/rendering.dart';
import 'package:path_provider/path_provider.dart';
class BookingQRGenerate extends StatefulWidget {
final int abid;
final int uid;
final int txnid;
const BookingQRGenerate({
@required this.abid,
@required this.uid,
@required this.txnid,
});
@override
State<StatefulWidget> createState() => BookingQRGenerateState();
}
class BookingQRGenerateState extends State<BookingQRGenerate> {
static const double _topSectionTopPadding = 20.0;
static const double _topSectionBottomPadding = 20.0;
static const double _topSectionHeight = 20.0;
GlobalKey globalKey = new GlobalKey();
String _dataString = "Hello from this QR";
bool physicaldevice;
var deviceid;
int dtguid;
int abid;
int txnid;
int uid;
@override
void initState() {
super.initState();
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
deviceInfo();
}
Future<void> deviceInfo() async {
abid = widget.abid;
txnid = widget.txnid;
uid = widget.uid;
DeviceInfoPlugin deviceInfo = DeviceInfoPlugin();
AndroidDeviceInfo androidInfo = await deviceInfo.androidInfo;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: myAppBar(),
endDrawer: myDrawer(),
body: _contentWidget(),
);
}
_contentWidget() {
final bodyHeight = MediaQuery.of(context).size.height -
MediaQuery.of(context).viewInsets.bottom;
return Container(
color: const Color(0xFFFFFFFF),
child: Column(
children: <Widget>[
Card(
elevation: 8.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(13.0)),
color: Colors.blueGrey[300],
child: ListTile(
title: Text(
'QRCode',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500,
),
),
),
),
Padding(
padding: const EdgeInsets.only(
top: _topSectionTopPadding,
left: 20.0,
right: 10.0,
bottom: _topSectionBottomPadding,
),
child: Container(
height: _topSectionHeight,
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[],
),
),
),
Expanded(
child: Container(
color: Colors.black26,
child: Center(
child: RepaintBoundary(
key: globalKey,
child: QrImage(
data: _dataString,
// data:abid, uid, txnid,
version: QrVersions.auto,
size: 320,
gapless: false,
embeddedImage: AssetImage('assets/img/logo.png'),
embeddedImageStyle: QrEmbeddedImageStyle(
size: Size(80, 80),
),
),
),
),
),
),
],
),
);
}
}
Necesito pasar abid:value, txnid:value, uid: value
el qrcode. Entonces, cuando lo escaneo, puedo obtener el valor y usarlo en consecuencia.
Respuestas
Puede copiar y pegar ejecutar 2 el código completo a continuación
. Puede usar el JSON
Paso 1: Generar una imagen QR con JSON
formato
. Puede ver el código completo del Paso 1 para generar una imagen QR a continuación.
home: BookingQRGenerate(
abid: 1,
uid: 2,
txnid: 3,
),
...
Future<void> deviceInfo() async {
abid = widget.abid;
txnid = widget.txnid;
uid = widget.uid;
_dataString = '''
{
"abid": ${widget.abid}, "uid":${widget.uid},
"txnid":${widget.txnid}
}
''';
Paso 2: Verifique que la imagen QR produzca una cadena JSON correcta

Paso 3: cuando escanee esta imagen QR, obtendrá una JSON
cadena y podrá analizarla payloadFromJson
, vea el código completo para analizar a JSON
continuación
Payload payloadFromJson(String str) => Payload.fromJson(json.decode(str));
...
Payload payload = payloadFromJson(jsonString);
print("abid ${payload.abid}");
print("uid ${payload.uid}"); print("txnid ${payload.txnid}");
demostración funcional para el Paso 1

código completo del paso 1 para generar una imagen QR
import 'package:flutter/material.dart';
import 'package:device_info/device_info.dart';
import 'package:qr_flutter/qr_flutter.dart';
import 'package:flutter/services.dart';
import 'dart:async';
import 'dart:typed_data';
import 'dart:ui';
import 'dart:io';
import 'package:flutter/rendering.dart';
//import 'package:path_provider/path_provider.dart';
class BookingQRGenerate extends StatefulWidget {
final int abid;
final int uid;
final int txnid;
const BookingQRGenerate({
@required this.abid,
@required this.uid,
@required this.txnid,
});
@override
State<StatefulWidget> createState() => BookingQRGenerateState();
}
class BookingQRGenerateState extends State<BookingQRGenerate> {
static const double _topSectionTopPadding = 20.0;
static const double _topSectionBottomPadding = 20.0;
static const double _topSectionHeight = 20.0;
GlobalKey globalKey = new GlobalKey();
String _dataString = "Hello from this QR";
bool physicaldevice;
var deviceid;
int dtguid;
int abid;
int txnid;
int uid;
@override
void initState() {
super.initState();
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
deviceInfo();
}
Future<void> deviceInfo() async {
abid = widget.abid;
txnid = widget.txnid;
uid = widget.uid;
_dataString = '''
{
"abid": ${widget.abid}, "uid":${widget.uid},
"txnid":${widget.txnid} } '''; print("_dataString $_dataString");
DeviceInfoPlugin deviceInfo = DeviceInfoPlugin();
AndroidDeviceInfo androidInfo = await deviceInfo.androidInfo;
}
@override
Widget build(BuildContext context) {
return Scaffold(
//appBar: myAppBar(),
//endDrawer: myDrawer(),
body: _contentWidget(),
);
}
_contentWidget() {
final bodyHeight = MediaQuery.of(context).size.height -
MediaQuery.of(context).viewInsets.bottom;
return Container(
color: const Color(0xFFFFFFFF),
child: Column(
children: <Widget>[
Card(
elevation: 8.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(13.0)),
color: Colors.blueGrey[300],
child: ListTile(
title: Text(
'QRCode',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500,
),
),
),
),
Padding(
padding: const EdgeInsets.only(
top: _topSectionTopPadding,
left: 20.0,
right: 10.0,
bottom: _topSectionBottomPadding,
),
child: Container(
height: _topSectionHeight,
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[],
),
),
),
Expanded(
child: Container(
color: Colors.black26,
child: Center(
child: RepaintBoundary(
key: globalKey,
child: QrImage(
data: _dataString,
// data:abid, uid, txnid,
version: QrVersions.auto,
size: 320,
gapless: false,
embeddedImage: AssetImage('assets/img/logo.png'),
embeddedImageStyle: QrEmbeddedImageStyle(
size: Size(80, 80),
),
),
),
),
),
),
],
),
);
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: BookingQRGenerate(
abid: 1,
uid: 2,
txnid: 3,
),
);
}
}
código completo para analizar JSON
import 'package:flutter/material.dart';
import 'dart:convert';
Payload payloadFromJson(String str) => Payload.fromJson(json.decode(str));
String payloadToJson(Payload data) => json.encode(data.toJson());
class Payload {
Payload({
this.abid,
this.txnid,
this.uid,
});
int abid;
int txnid;
int uid;
factory Payload.fromJson(Map<String, dynamic> json) => Payload(
abid: json["abid"],
txnid: json["txnid"],
uid: json["uid"],
);
Map<String, dynamic> toJson() => {
"abid": abid,
"txnid": txnid,
"uid": uid,
};
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
String jsonString = '''
{
"abid": 1,
"uid":2,
"txnid":3
}
''';
Payload payload = payloadFromJson(jsonString);
print("abid ${payload.abid}"); print("uid ${payload.uid}");
print("txnid ${payload.txnid}"); setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Text( '$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
salida de parse JSON
I/flutter ( 6945): abid 1
I/flutter ( 6945): uid 2
I/flutter ( 6945): txnid 3