How to create custom QR Codes to launch profile screen in Flutter

Issue

I want to have a feature in my Flutter App like Snapcodes on Snapchat. Basically custom “QR” Codes (they aren’t scannable to anything besides Snapchat so not really QR codes) with the app icon in them that launch a users profile when scanned in the app. I can make a simple version of this with plain QR codes using a pub package and Firebase Deeplinking but that isn’t what I want. What I think needs to be done is to create my own “qr” code generator that makes code holding a uid and then a way to decode them when scanned but I have no idea how to do that. Any ideas or pub packages that can do this?

Added for comment:

Solution

So I was looking through my old project and I got this ( The Idea of the source code below is that your taking a screenshot programmatically):

import 'dart:ui' as ui; //

final _renderObjectKey = new GlobalKey();
int randomDigit;
Timer _timer;
String userID;

void startTimer() { 
//Generate random numbers attached to userID to make qrcode change periodically: improve on this!!!
    var range = new Random();
    _timer = new Timer.periodic(Duration(seconds: 10), (timer) {
      setState(() {
        randomDigit = range.nextInt(800) + 100;
      });
    });
  }

  @override
  void initState() {
   super.initState();
    userID = auth.currentUser.uid; //if you are using firebaseauth
    startTimer();
  }

@override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }


......
// The widget below is placed inside the body of scaffold
RepaintBoundary(
key: _renderObjectKey,
child:Stack(
alignment: Alignment.center,
children:[
BarcodeWidget(
color: Color(0xFFF9F9F9),
barcode: Barcode.qrCode(
errorCorrectLevel:BarcodeQRCorrectionLevel.high,),
data: '$userID$randomDigit', // this could be uuid
width: height * 0.32, // you can adjust to your liking
height: height * 0.32, 
     ) // BarcodeWidget,
Container( height: 50,width: 50,child:AssetImage('assets/icon.png') // you can do whatever here
  ])//Stack
)//Repaint boundary

This is where the sauce is:

For android:

 void _takePhoto(String _dataString) async {
    int randomDigit;
    var range = new Random();
    randomDigit = range.nextInt(1000000) + 1;
    RenderRepaintBoundary boundary =
        _renderObjectKey.currentContext.findRenderObject();
    ui.Image image = await boundary.toImage(pixelRatio: 3.0);
    ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
    var pngBytes = byteData.buffer.asUint8List();
    final tempDir = await getTemporaryDirectory();
    final file =
        await new File('${tempDir.path}/image$randomDigit.png').create();
    await file.writeAsBytes(pngBytes).then((value) {
      GallerySaver.saveImage(value.path, albumName: 'Android Photo album')
          .then((bool success) {});
    });
  }

For Ios:

Future<Uint8List> _getWidgetImage(String _dataString) async {
    try {
      RenderRepaintBoundary boundary =
          _renderObjectKey.currentContext.findRenderObject();
      ui.Image image = await boundary.toImage(pixelRatio: 3.0);
      ByteData byteData =
          await image.toByteData(format: ui.ImageByteFormat.png);
      var pngBytes = byteData.buffer.asUint8List();
      final tempDir = await getTemporaryDirectory();
      final file = await new File('${tempDir.path}/image.png').create();
      await file.writeAsBytes(pngBytes);

      await Share.file(_dataString, '$_dataString.png', pngBytes, 'image/png');
      var bs64 = base64Encode(pngBytes);
      debugPrint(bs64.length.toString());
      return pngBytes;
    } catch (exception) {
      print(exception);
    }
  }

Calling the functions:

_takePhoto('$userID$randomDigit');//Android in a textbutton your choice
_getWidgetImage('$userID$randomDigit');//IOS in a textbtuton

keep in mind that I have not been tracking the flutter dependencies I used in this project but I will include them from my pubspec.yaml file:

  qr_flutter: ^3.2.0
  qrcode: ^1.0.4
  barcode: ^1.17.1
  share: ^0.6.5+4
  gallery_saver: ^2.0.1
  path_provider: ^1.6.24
  path: ^1.7.0
  esys_flutter_share: ^1.0.2

Note: Copy and paste will not work. This will need adjustments.

Answered By – Georgina

Answer Checked By – Mildred Charles (FlutterFixes Admin)