Flutter: generate qrcode with multiple key-value pair

I am trying to generate qrcode in flutter. I need to add three key-values in the same. So, when i scan it, i can get the relevant information.

This is first time i am working on qrcode scanning thing. So, i don't have idea about it.

Here is the code.

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),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

I need to pass abid:value, txnid:value, uid: value in the qrcode. So, when i scan it i can fetch the value and use it accordingly.

You can copy paste run 2 full code below
You can use JSON
Step 1: Generate QR Image with JSON format
You can see full code of Step 1 to generate QR Image below

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}
  }
  ''';

Step 2: Check QR Image produce correct JSON string

Step 3 : When scan this QR Image, you will get JSON string and you can parse with payloadFromJson, see full code to parse JSON below

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}");

working demo for Step 1

full code of Step 1 to generate QR Image

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

full code to parse 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),
      ),
    );
  }
}

output of parse JSON

I/flutter ( 6945): abid 1
I/flutter ( 6945): uid 2
I/flutter ( 6945): txnid 3