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?
Asked
Active
Viewed 787 times
1 Answers
1
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.

Georgina
- 764
- 2
- 13
-
This looks promising! Do you have any sample code of how this would be scanned? Also, with the app I on being stacked over the QR code does it not make the QR code unreadable? – Globe Aug 21 '22 at 21:18
-
@Globe it will not make it unreadable. When you check my GitHub and you still have questions, you can ask me – Georgina Aug 22 '22 at 06:07
-
I created a widget using some of your code... the QR code data cannot be scanned by any online options. I added an image of my widget to the original question. I haven't implemented an in-app scanner yet but I think the issue is the logo stacked on top in the center. Was this not an issue for you? – Globe Aug 31 '22 at 05:01
-
@Globe i was able to scan it. I just used my IPhone Camera and I got : HqtGLN1c32VHhCn2n2To6gC2qbA2. In addition I just used a Samsung S9 and It was able to detect the Qrcode giving the same result as the iphone You need to use a flutter QRCode scanner to scan and then listen to response. For example open a page in the app. – Georgina Aug 31 '22 at 10:36
-
I just tried in the regular iPhone camera and it worked. Thanks! – Globe Aug 31 '22 at 14:02
-
@Globe Please tick my answer – Georgina Aug 31 '22 at 17:29