How to Create A Simple Flutter Barcode Plugin from Scratch

I think Flutter is vital for developers. Not only it supports fast building Android and iOS apps from a single codebase, but also it is used for building the upcoming Google Fuchsia apps. Like React Native and Cordova, the Flutter ecosystem consists of amounts of plugins, which empower Flutter apps, especially for platform-specific functionalities. In this article, I will share how to create a simple Flutter barcode plugin with Dynamsoft Barcode Reader SDK from scratch.

Developing Flutter Barcode Plugin Package

Create the plugin package skeleton:

flutter create --org com.dynamsoft --template=plugin barcode_reader

By default, the command above generates Java code for Android and Objective-C code for iOS. You can specify the programming language using -i (iOS) and -a (Android). For example:

flutter create --org com.dynamsoft --template=plugin -i swift -a kotlin barcode_reader

Although Swift and Kotlin are now officially preferred programming languages for iOS and Android, I suggest using Objective-C and Java to avoid building issues.

In addition to the platform-specific code, the project also contains an example. Try the example:

cd barcode_reader/example
flutter run

If you have more than one devices connected to USB port, select a target device:

flutter devices
flutter run -d <Device ID>

Add methods initLicense() and decodeFile() to barcode_reader/lib/barcode_reader.dart:

Future<void> initLicense(String license) async {
await _channel.invokeMethod('initLicense', [license]);
}
Future<String> decodeFile(String filename) async {
return await _channel.invokeMethod('decodeFile', [filename]);
}

Android platform code

Add the dependency in barcode_reader/android/build.gradle:

Add Java code to implement the method call in barcode_reader/android/src/main/java/com/Dynamsoft/barcode_reader/ BarcodeReaderPlugin.java:

iOS platform code

Download Dynamsoft Barcode Reader for iOS.

Extract the SDK package and copy DynamsoftBarcodeReader.framework to barcode_reader/ios folder.

Configure the dependency in barcode_reader.podspec:

s.libraries = 'stdc++' 
s.vendored_frameworks = 'DynamsoftBarcodeReader.framework'

Add Objective-C code to implement the method call in barcode_reader/ios/Classes/ BarcodeReaderPlugin.m:

Barcode Reader App

Create a Flutter project:

flutter create demo

Android

Change the minSdkVersion from 16 (the default SDK version) to 21 in demo/android/app/build.gralde:

defaultConfig {
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
applicationId "com.dynamsoft.demo"
minSdkVersion 21
targetSdkVersion 28
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}

iOS

Add two usage descriptions to demo/ios/Runner/Info.plist:

<key>NSCameraUsageDescription</key>
<string>Can I use the camera please?</string>
<key>NSMicrophoneUsageDescription</key>
<string>Can I use the mic please?</string>

Follow the tutorial — Take a picture using the camera — to create a camera app by modifying demo/lib/main.dart.

Get a free 30-day trial license of Dynamsoft Barcode Reader:

Set the license:

When the temporary image is available after taking the picture, call the decodeFile() function:

await _controller.takePicture(path);
String results = await _barcodeReader.decodeFile(path);

To show result text over the captured image, use Stack layout:

Run the app for iOS:

cd demo/ios
pod install
cd ..
flutter run -d <iOS Device ID>

Run the app for Android:

cd demo
flutter run -d <Android Device ID>

Barcode Reader App

Reference

• https://flutter.dev/docs/development/packages-and-plugins/developing-packages
• https://flutter.dev/docs/cookbook/plugins/picture-using-camera
• https://pub.dev/packages/camera

Source Code

https://github.com/yushulx/flutter-barcode-plugin

Originally published at https://www.codepool.biz on August 13, 2019.