I had written a tutorial of ReactNative QR code for introducing how you create your QR code app using ReactNative. Unfortunately, this ReactNative QR code we introduced had not been maintained anymore, and if you need to update feature, you need do it by yourself.
You might have heard about Flutter which is an alternative as you are considering mobile cross-platform frameworks. Flutter is invented by Google and using Dart as developing language. It also has a good well-integrated dev tools, Android Studio.
If you love to embrace new development languages or try new technologies, you must be taking a look of it. There are plenty of applications using Flutter such as Google Ads, Alibaba and etc. I would say “that Flutter is amazing for developing products and have a good UX and look and feel”.
Flutter app is used Dart language, which Dart is a script language that is running on Dart VM. Flutter app’s performance is closing to developed by native Java, Kotin for Android and Objective-C, Swift for iOS. However, the benefit is that we can write code once for multiple platforms.
Prerequisite
You must have installed Flutter and how to install in different platform, we can see official reference.
You might take considerations of what IDE for developing Flutter application such as Intellij IDEA, Android Studio and Visual Studio Code as well. I wouldn’t judge any pros. and cons. among them. Here I just want to use familiar IDE Android Studio I have used and following introductions will base on this IDE to develop.
Here we go. Please make sure you have installed Android Studio and install Flutter plugin as well.
Configuration Phase
There are few steps you can follow to create your first Flutter QR code application.
Step 1. Create Flutter project as well as setting up an appropriate app and project name.
Step 2. Install dependency qr_code_scanner in pubspec.yaml. The example of dependency is as follow.
dependencies:
flutter:
sdk: flutter
qr_code_scanner: ^0.0.13Step 3. After that, please run Flutter Pub Get in the tools as follows.
Step 4: Insert the following sample code.
class QRViewExample extends StatefulWidget {
const QRViewExample({
Key key,
}) : super(key: key);
@override
State<StatefulWidget> createState() => _QRViewExampleState();
}
class _QRViewExampleState extends State<QRViewExample> {
var qrText = '';
var flashState = flashOn;
var cameraState = frontCamera;
QRViewController controller;
final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
Expanded(
flex: 4,
child: QRView(
key: qrKey,
onQRViewCreated: _onQRViewCreated,
overlay: QrScannerOverlayShape(
borderColor: Colors.red,
borderRadius: 10,
borderLength: 30,
borderWidth: 10,
cutOutSize: 300,
),
),
),
Expanded(
flex: 1,
child: FittedBox(
fit: BoxFit.contain,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text('This is the result of scan: $qrText'),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.all(8),
child: RaisedButton(
onPressed: () {
if (controller != null) {
controller.toggleFlash();
if (_isFlashOn(flashState)) {
setState(() {
flashState = flashOff;
});
} else {
setState(() {
flashState = flashOn;
});
}
}
},
child:
Text(flashState, style: TextStyle(fontSize: 20)),
),
),
Container(
margin: EdgeInsets.all(8),
child: RaisedButton(
onPressed: () {
if (controller != null) {
controller.flipCamera();
if (_isBackCamera(cameraState)) {
setState(() {
cameraState = frontCamera;
});
} else {
setState(() {
cameraState = backCamera;
});
}
}
},
child:
Text(cameraState, style: TextStyle(fontSize: 20)),
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.all(8),
child: RaisedButton(
onPressed: () {
controller?.pauseCamera();
},
child: Text('pause', style: TextStyle(fontSize: 20)),
),
),
Container(
margin: EdgeInsets.all(8),
child: RaisedButton(
onPressed: () {
controller?.resumeCamera();
},
child: Text('resume', style: TextStyle(fontSize: 20)),
),
)
],
),
],
),
),
)
],
),
);
}
bool _isFlashOn(String current) {
return flashOn == current;
}
bool _isBackCamera(String current) {
return backCamera == current;
}
void _onQRViewCreated(QRViewController controller) {
this.controller = controller;
controller.scannedDataStream.listen((scanData) {
setState(() {
qrText = scanData;
});
});
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
}Lastly, we will launch the app in either iOS or Android device/simulator. By using command “flutter run” in command shell and if there is multiple device attached, it will prompt options for what you want to install.
We suggest that installation to real devices since it might not be able to access camera in the simulator.
Congratulations! You finished the Flutter QR code with this tutorial and the following is example when you run app successfully.
Summary
Flutter app is an alternative mobile cross platform development when you think of mobile development. It’s not only for beginner but also for experienced engineera as you was suffering from iOS and Android platform compatibility and consistent behaviors. Anyway, if you haven’t try this, Flutter is a good choose to get started.