Flutterflow generate and Display QR Code Image URL / Copy & Paste

qrcodeimageurl.md

generateQRCode custom action

// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/actions/index.dart'; // Imports other custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom action code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'dart:ui' as ui;
import 'dart:convert'; // Import for base64 encoding
import 'dart:async';
import 'package:qr_flutter/qr_flutter.dart';

Future<String> generateQRCode(
  String qrCodeContent,
  Color? qrCodeColor,
  double? qrSize,
) async {
  final recorder = ui.PictureRecorder();
  final canvas = Canvas(recorder,
      Rect.fromPoints(Offset(0, 0), Offset(qrSize ?? 200, qrSize ?? 200)));

  final painter = QrPainter(
    data: qrCodeContent,
    color: qrCodeColor ?? Colors.black,
    emptyColor: Colors.white,
    version: QrVersions.auto,
    eyeStyle: const QrEyeStyle(
      eyeShape: QrEyeShape.square,
      color: Colors.black,
    ),
  );

  painter.paint(canvas, Size(qrSize ?? 200, qrSize ?? 200));

  final picture = recorder.endRecording();
  final img =
      await picture.toImage((qrSize ?? 200).toInt(), (qrSize ?? 200).toInt());
  final pngBytes = await img.toByteData(format: ui.ImageByteFormat.png);

  if (pngBytes != null) {
    final buffer = pngBytes.buffer.asUint8List();
    final base64Data =
        base64Encode(buffer); // This function is from dart:convert
    final dataUrl = 'data:image/png;base64,$base64Data';
    return dataUrl;
  } else {
    throw Exception("Failed to generate QR code");
  }
}

showDataUrl custom widget

// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/custom_code/actions/index.dart'; // Imports custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'dart:convert';

class ShowDataURLImage extends StatefulWidget {
  const ShowDataURLImage({
    Key? key,
    this.width,
    this.height,
    this.dataURL,
    required this.imageHeight,
    required this.imageWidth,
  }) : super(key: key);

  final double? width;
  final double? height;
  final String? dataURL;
  final int imageHeight;
  final int imageWidth;

  @override
  _ShowDataURLImageState createState() => _ShowDataURLImageState();
}

class _ShowDataURLImageState extends State<ShowDataURLImage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: widget.width,
      height: widget.height,
      child: widget.dataURL == null
          ? Container()
          : Image.memory(
              base64Decode(widget.dataURL!.split(',').last),
              width: widget.imageWidth.toDouble(),
              height: widget.imageHeight.toDouble(),
              fit: BoxFit.cover,
            ),
    );
  }
}