Из бесплатных доступных библиотек для работы с qr кодами в Android самой лучшей (на мой личный взгляд) является zxing-android-embedded. Часто, UI который предоставляет эта библиотека не достаточно или нужен какой-то иной. В этой статье пойдет речь о том, как «кастомизировать» UI библиотеки zxing-android-embedded для распознавания QR кодов при использовать её Flutter проекте.

Представленная статья и код вместе с ней, всего лишь минимальный достаточный пример для демонстрации возможностей «кастомизации» zxing-android для работы с ней во flutter. Статья затрагивает только Android реализацию не касаясь IOS.

Мы будем использовать три основных компонента для взаимодействия с этой библиотекой из flutter окружения. Для этого нам потребуется:

• PlatformViewLink

• MethodChannel

• EventChannel

PlatformViewLink:

Даёт возможность «прокинуть» нативный android экран(View) в ваше fluttter приложение. Это удобно в тех случаях когда есть готовое, проверенное решение под нативную платформу, а времени переделывать под flutter не хватает и легче показать android activity напрямую в вашем flutter приложении. По такому принципу работают google maps во flutter приложениях. В нашем случае через PlatformViewLink мы будем показывать нативный экран со стримом фотокамеры.

MethodChannel:

Даёт возможность вызывать нативные методы платформы(android или ios и т.д.) из flutter среды в и получать результат . Надо заметить что все вызовы методов асинхронны. В данном проекте MethodChannel будет использоваться чтобы включать и выключать подсветку фотокамеры.

EventChannel:

Почти то же самое что и MethodChannel, с тем лишь отличием, что мы можем подписаться на поток событий, генерируемых в нативной среде. Самый часты кейс это например «слушать» gps координаты от нативной платформы. В данном примере EventChannel будет использоваться для отправки распознанного QR кода из android окружения в наше flutter приложение. Конечно, для получения результата мы могли бы использовать MethodChannel, например самостоятельно запрашивая данные скажем каждые 10 секунд. Но такой подход выглядит не очень правильным в условиях, когда у нас есть возможность получить результат именно тогда когда он готов.

Создадим пустой flutter проект. В консоли терминала вышей любимой ОС выполним команду:

Откроем main.dart. Добавим в качестве home элемента MaterialApp виджета, QrCodePage - виджет, который обернёт основной экран в Scaffold и добавит AppBar для него:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: QrCodePage(),
    );
  }
}

class QrCodePage extends StatelessWidget {
  QrCodePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("QR code App"),
      ),
      body: PlatformView(),
    );
  }
}

PlatformView - основной StatefulWidge виджет. Он будет обёрткой над PlatformViewLink и будет непосредственно транслировать видео с камеры:

class _PlatformViewState extends State<PlatformView> {
  final MethodChannel platformMethodChannel = MethodChannel('flashlight');
  bool isFlashOn = false;
  bool permissionIsGranted = false;
  String result = '';

  void _handleQRcodeResult() {
    const EventChannel _stream = EventChannel('qrcodeResultStream');
    _stream.receiveBroadcastStream().listen((onData) {
      print('EventChannel onData = $onData');
      result = onData;
      setState(() {});
    });
  }

  Future<void> _onFlash() async {
    try {
      dynamic result = await platformMethodChannel.invokeMethod('onFlash');
      setState(() {
        isFlashOn = true;
      });
    } on PlatformException catch (e) {
      debugPrint('PlatformException ${e.message}');
    }
  }

  Future<void> _offFlash() async {
    try {
      dynamic result = await platformMethodChannel.invokeMethod('offFlash');
      setState(() {
        isFlashOn = false;
      });
    } on PlatformException catch (e) {
      debugPrint('PlatformException ${e.message}');
    }
  }

  @override
  void initState() {
    super.initState();
    _handleQRcodeResult();
    _checkPermissions();
  }

  _requestAppPermissions() {
    showDialog(
        context: context,
        builder: (BuildContext context) => AlertDialog(
              title: const Text('Permission required'),
              content: const Text('Allow camera permissions'),
              actions: <Widget>[
                TextButton(
                  onPressed: () {
                    _checkPermissions();
                    Navigator.pop(context, 'OK');
                  },
                  child: const Text('OK'),
                ),
              ],
            ));
  }

  _checkPermissions() async {
    var status = await Permission.camera.status;
    if (!status.isGranted) {
      final PermissionStatus permissionStatus = await Permission.camera.request();
      if (!permissionStatus.isGranted) {
        _requestAppPermissions();
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    final String viewType = '<platform-view-type>';
    final Map<String, dynamic> creationParams = <String, dynamic>{};
    return result.isEmpty
        ? Stack(
            alignment: Alignment.center,
            children: [
              PlatformViewLink(
                viewType: viewType,
                surfaceFactory: (BuildContext context, PlatformViewController controller) {
                  return Container(
                    child: AndroidViewSurface(
                      controller: controller as AndroidViewController,
                      gestureRecognizers: const <Factory<OneSequenceGestureRecognizer>>{},
                      hitTestBehavior: PlatformViewHitTestBehavior.opaque,
                    ),
                  );
                },
                onCreatePlatformView: (PlatformViewCreationParams params) {
                  return PlatformViewsService.initSurfaceAndroidView(
                    id: params.id,
                    viewType: viewType,
                    layoutDirection: TextDirection.ltr,
                    creationParams: creationParams,
                    creationParamsCodec: StandardMessageCodec(),
                  )
                    ..addOnPlatformViewCreatedListener(params.onPlatformViewCreated)
                    ..create();
                },
              ),
              Align(
                  alignment: Alignment.topCenter,
                  child: ElevatedButton(
                      onPressed: () {
                        if (!isFlashOn) {
                          _onFlash();
                        } else {
                          _offFlash();
                        }
                      },
                      child: isFlashOn ? Text('off flashlight') : Text('on flashlight'))),
              Align(
                alignment: Alignment.center,
                child: Container(
                  height: 200,
                  width: 200,
                  decoration: BoxDecoration(
                      color: Colors.transparent,
                      border: Border.all(
                        color: Colors.blueAccent,
                        width: 5,
                      )),
                ),
              )
            ],
          )
        : Container(
            child: Center(child: Text('QR code result:\n$result')),
          );
  }
}

Пару комментариев к коду ваше:

• Запрашиваем разрешения на работу с камерой:

  

• В поле класса, создаём platformMethodChannel - через этот экземпляр будем вызывать нативные методы (которые мы создадим чуть позже) в android окружении. Аргумент в конструкторе ‘flashlight’ это своего рода уникальный ID, который должен быть идентичный во flutter и нативной среде:

  

• Метод _handleQRcodeResult() - будет получать результат отсканированного qr кода:

  

• Методы _onFlash() и _offFlash() вызывают соответствующий метод на стороне Android фреймворка.

• В некоторых случаях необходимо передать параметры в нативную среду. Для этого удобно использовать creationParams. Но в нашем примере параметров для передачи у нас не будет:

• В качестве ViewGroup используем Stack для того чтоб расположить дополнительные UI элементы. В моём примере это рамка в центр экрана(Container с прозрачным фоном и BoxDecoration) и ElevatedButton над ней для включения подсветки.

Взглянем на Android реализацию:

В build.gradle модуля app (android/app/build.gradle) подключим библиотеку. В раздел dependencies добавим:

В MainActivity, в методе configureFlutterEngine, EventChannel

class MainActivity : FlutterFragmentActivity(), LifecycleOwner, ResultCallback {
    var myEvents: EventChannel.EventSink? = null

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        EventChannel(flutterEngine.dartExecutor.binaryMessenger, "qrcodeResultStream")
                .setStreamHandler(object : EventChannel.StreamHandler {
                    override fun onListen(arguments: Any?, events: EventChannel.EventSink?) {
                        myEvents = events
                    }

                    override fun onCancel(arguments: Any?) {
                        myEvents = null
                    }
                })

        flutterEngine
                .platformViewsController
                .registry
                .registerViewFactory("<platform-view-type>", NativeViewFactory())
    }

    override fun result(result: String) {
        myEvents?.success(result)
    }

    override fun getMyFlutterEngine(): FlutterEngine? = flutterEngine
}

EventChannel.StreamHandler возвращает нам объект EventChannel.EventSink вызывая на котором .success(result) — мы передаём событие во flutter фреймворк. В нашем случае это будет строка с QR кодом.

В методе выше мы регистрируем фабрику которая может возвращать разные View в зависимости от переданных аргументов, но мы не будем усложнять пример и возвращаем наш единственное NativeView:

Взглянем на интерфейс ResultCallback, который имплементирует MainActivity:

Метод result(result: String) нужен для передачи результата (распознанного qr кода) в MainActivity.

метод getMyFlutterEngine() - вернёт нам FlutterEngine в нашем NativeView.

Основной код будет в NativeView:

class NativeView(context: Context, id: Int, creationParams: Map<String?, Any?>?) : PlatformView {
    private val textView: TextView
    private val CHANNEL = "flashlight"

    private val rootView: View
    private var barcodeView: DecoratedBarcodeView? = null
    override fun getView(): View {
        return rootView
    }

    override fun dispose() {}

    init {
        (context as LifecycleOwner).lifecycle.addObserver(object : LifecycleObserver {
            @OnLifecycleEvent(Lifecycle.Event.ON_RESUME)
            fun connectListener() {
                barcodeView?.resume()
            }

            @OnLifecycleEvent(Lifecycle.Event.ON_PAUSE)
            fun disconnectListener() {
                barcodeView?.pause()
            }
        })

        rootView = LayoutInflater.from(context.applicationContext).inflate(R.layout.layout, null)

        barcodeView = rootView.findViewById<DecoratedBarcodeView>(R.id.barcode_scanner)
        val formats: Collection<BarcodeFormat> = Arrays.asList(BarcodeFormat.QR_CODE, BarcodeFormat.CODE_39)
        barcodeView?.barcodeView?.decoderFactory = DefaultDecoderFactory(formats)
        barcodeView?.setStatusText("")
        barcodeView?.viewFinder?.visibility = View.INVISIBLE

        barcodeView?.initializeFromIntent(Intent())
        barcodeView?.decodeContinuous(object : BarcodeCallback {
            override fun possibleResultPoints(resultPoints: MutableList<ResultPoint>?) {
                super.possibleResultPoints(resultPoints)
            }

            override fun barcodeResult(result: BarcodeResult?) {
                (context as ResultCallback).result(result?.result?.text ?: "no result")
                barcodeView?.setStatusText(result?.text)
            }
        })

        barcodeView?.resume()
        textView = TextView(context)
        textView.textSize = 36f
        textView.setBackgroundColor(Color.rgb(255, 255, 255))
        textView.text = "Rendered on a native Android view (id: $id) ${creationParams?.entries}"

        val flutterEngine = (context as ResultCallback).getMyFlutterEngine()
        MethodChannel(flutterEngine?.dartExecutor?.binaryMessenger, CHANNEL)
                .setMethodCallHandler { call, result ->
                    when (call.method) {
                        "onFlash" -> {
                            barcodeView?.setTorchOn()
                            result.success("setTorchOn")
                        }

                        "offFlash" -> {
                            barcodeView?.setTorchOff()
                            result.success("setTorchOff")
                        }
                        else -> {
                            result.notImplemented()
                        }
                    }
                }
    }
}

В init блоке подписываемся на жизненный цикл activiti и в соответствующих методах вызываем resume / pause у barcodeView. Важно: что без реализации этих методов вы вместо видеопотока с камеры будет увидите черный экран:

NativeView наследуется от интерфейса PlatformView это обязывает нас реализовать два метода:

В getView мы должны вернуть View которая является главным экраном. Нужно создать layout.xml с следующего содержания:

Из него с помощью LayoutInflater мы создаём view и возвращаем ссылку на него в методе getView():

Поскольку наш layout содержит DecoratedBarcodeView мы можем найти его(получить ссылку на него) с помощью findViewById и настроить как на нужно:

Тут мы устанавливаем поддерживаемый формат qr кодов, дефолтную строку результата «сеттим» как пустую, убираем стандартную рамку в центре экрана. Отдельно стоит остановиться на этом куске кода:

Когда библиотека распознаёт qr код, результат этого она передаёт в callback - barcodeResult(result: BarcodeResult?). В нем имея ссылку на MainActivity через общий контекст, вызываем метод result нашего ResultCallback и через него передаём строку с результатом. И уже в самом MainActivity используя EventChannel передаём дальше — во Flutter окружение.

Код выше является обработчиком событий отправляемых из flutter среды. У MethodChannel принимает MethodCallHandler используя который мы узнаём какой метод сейчас вызывается и реагируем на него. В данном коде мы включаем или выключаем подсветку камеры.

Короткое видео с примером этого приложения:

Исходный код приложения

zxing-android-embedded