flutterflutter-qrcode

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


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: Widget that cannot be scanned


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.