How to save a newly generated QR code in Firebase

Issue

I don't understand how to save the generated QR code into Firebase. For now I have only been able to save in the database only the text fields that create the QR code.

I generate the QR code so by default, then when all the fields are inserted it changes. Maybe i should convert it as an image.png but how can i get the image from QrImage.

Center(
        child: QrImage(
          data: qrData+qrData2+qrData3+qrData4,
          version: QrVersions.auto,
          size: 165.0,
          backgroundColor: Colors.white,
          errorStateBuilder: (cxt, err) {
          return Container(
            child: Center(
              child: Text(
                "Something gone wrong ...",
                 textAlign: TextAlign.center,
              ),
            ),
           );
           },
         ),
),

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:garden_service/sidebar/menu.dart';
import 'package:garden_service/tools/costants.dart';
import 'package:qr_flutter/qr_flutter.dart';
import 'dart:ui';
import 'package:rflutter_alert/rflutter_alert.dart';
import 'package:flutter/rendering.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

class GeneraQR extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<GeneraQR> {

  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
  CollectionReference articolo = FirebaseFirestore.instance.collection('Articolo');

  String qrData = "";
  String qrData2 = "";
  String qrData3 = "";
  String qrData4 = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(

       [...AppBar Code ...]

        backgroundColor: grey,

        body: Center(
            child: ListView(
              padding: EdgeInsets.all(15.0),
              children: <Widget>[
              Column(
                children: <Widget>[
                  Center(
                    child: QrImage(
                      data: qrData+qrData2+qrData3+qrData4,
                      version: QrVersions.auto,
                      size: 165.0,
                      backgroundColor: Colors.white,
                      errorStateBuilder: (cxt, err) {
                        return Container(
                          child: Center(
                            child: Text(
                              "Something gone wrong ...",
                              textAlign: TextAlign.center,
                            ),
                          ),
                        );
                      },
                    ),
                  ),
                ]
              ),

                Container(
                  child: Center(
                      child: Container(
                        padding: EdgeInsets.all(10.0),
                        child: Column(
                          children: <Widget>[
                            Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: TextFormField(
                                cursorColor: darkgrey,
                                controller: qrdataFeed,
                                maxLength: 50,
                                decoration: InputDecoration(
                                  labelText: 'Product name',
                                  labelStyle: TextStyle( color: green),
                                  focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: green, width: 1.2)),
                                  enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: darkgrey, width: 0.0)),
                                ),
                              ),
                            ),
                            SizedBox(
                              height: 15.0,
                            ),

                           [... 3x TextFormFiels are similar to above  ]

                            Material(
                              elevation: 5.0,
                              borderRadius: BorderRadius.circular(30.0),
                              child: MaterialButton(
                                onPressed: () async {
                                  if(qrdataFeed.text.isEmpty||qrdataFeed2.text.isEmpty||qrdataFeed3.text.isEmpty||qrdataFeed4.text.isEmpty){
                                    _onAlertButtonPressedError(context);
                                  }else{
                                    _onAlertButtonPressedConfirm(context);
                                    setState(() {
                                      qrData = qrdataFeed.text;
                                      qrData2 = qrdataFeed2.text;
                                      qrData3 = qrdataFeed3.text;
                                      qrData4 = qrdataFeed4.text;
                                    });

                                    await articolo.add({
                                      'nome': qrdataFeed.text,
                                      'descrizione': qrdataFeed2.text,
                                      'pezzi': qrdataFeed3.text,
                                      'prezzo': qrdataFeed4.text,

                                    });
                                  }
                                },
                                minWidth: 150.0,
                                height: 50.0,
                                color: green,
                                shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0),),
                                child: Text(
                                  "Generate QR code", style: TextStyle( fontSize: 16.0,color: Colors.white, fontWeight: FontWeight.bold),
                                ),
                              ),
                            )
                          ],
                        ),
                      ),
                  ),
                ),
              ]
            ),
          ),
        );
  }
  final qrdataFeed = TextEditingController();
  final qrdataFeed2 = TextEditingController();
  final qrdataFeed3 = TextEditingController();
  final qrdataFeed4 = TextEditingController();
}

_onAlertButtonPressedError(context) {
  Alert(
    context: context,
    type: AlertType.error,
    title: "ERROR",
    desc: "All fields are required!",
    buttons: [],
  ).show();
}

_onAlertButtonPressedConfirm(context) {
  Alert(
    context: context,
    type: AlertType.success,
    title: "SUCCESS",
    desc: "QR code created !",
    buttons: [],
  ).show();
}

Solution

Fixed by adding these following code lines.

import 'package:share/share.dart';
import 'dart:ui' as ui;
import 'dart:typed_data';
import 'dart:io';
import 'package:path_provider/path_provider.dart';

Wrapped QRImage inside RepaintBoundary and added key value.

RepaintBoundary(
                key: globalKey,
                child: QrImage(
                  data: qrData+qrData2+qrData3+qrData4,
                  version: QrVersions.auto,
                  size: 165.0,
                  backgroundColor: Colors.white,
                  errorStateBuilder: (cxt, err) {
                    return Container(
                      child: Center(
                        child: Text(
                          "Something gone wrong ...",
                          textAlign: TextAlign.center,
                        ),
                      ),
                    );
                  },
                ),
              ),

Then added the capture function

Future<void> _captureAndSharePng() async {

RenderRepaintBoundary? boundary = globalKey.currentContext!.findRenderObject() as RenderRepaintBoundary?;
ui.Image image = await boundary!.toImage();
ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.png);
Uint8List pngBytes = byteData!.buffer.asUint8List();

final tempDir = await getExternalStorageDirectory();
final file = await new File('${tempDir!.path}/shareqr.png').create();
await file.writeAsBytes(pngBytes);
await Share.shareFiles([file.path]);}

Call _captureAndSharePng() where u desire.

Done !

Answered By - Tμrf