Flutter PDA scanner (handheld laser scanner)

Question

I'm trying to use flutter_barcode_listener in a Zebra handheld device. When I am trying to scan a barcode it prints an empty string, I tried also RawKeyboardListener but it also returns empty string. the only way that worked for me was by using text field but the keyboard showed up and this will make a problem for my app. I tried also Input_With_Keyboard_Controller package to hide the key but it need to be focused. Is there any way to run flutter_barcode_listener package and fix the empty string issue? Or should I make any configurations in the handheld before using the package?

here is the code where I am using flutter_barcode_listener package:

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_barcode_listener/flutter_barcode_listener.dart';
import 'package:visibility_detector/visibility_detector.dart';

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String? _barcode;
  late bool visible;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        // Add visiblity detector to handle barcode
        // values only when widget is visible
        child: VisibilityDetector(
          onVisibilityChanged: (VisibilityInfo info) {
            visible = info.visibleFraction > 0;
          },
          key: Key('visible-detector-key'),
          child: BarcodeKeyboardListener(
            bufferDuration: Duration(milliseconds: 200),
            onBarcodeScanned: (barcode) {
              if (!visible) return;
              print(barcode);
              setState(() {
                _barcode = barcode;
              });
            },
            useKeyDownEvent: Platform.isWindows,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Text(
                  _barcode == null ? 'SCAN BARCODE' : 'BARCODE: $_barcode',
                  style: Theme.of(context).textTheme.headlineSmall,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

here is the code where I tried to use RawKeyboardListener:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class MyWidget extends StatefulWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  State<MyWidget> createState() => MyWidgetState();
}

class MyWidgetState extends State<MyWidget> {
  final FocusNode _focusNode = FocusNode();

  String _chars = '';

  String? barcode;

  @override
  void dispose() {
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    FocusScope.of(context).requestFocus(_focusNode);
    return Container(
      color: Colors.white,
      alignment: Alignment.center,
      child: RawKeyboardListener(
        focusNode: _focusNode,
        onKey: (RawKeyEvent event) {
          if (event is RawKeyDownEvent) {
            print(_chars);
            print(event.physicalKey);
            if (event.physicalKey == PhysicalKeyboardKey.gameButtonRight1) {
              _chars += event.data.keyLabel;
              print(event.data);
              setState(() {
                barcode = _chars;
                _chars = '';
              });
            } else {
              _chars += event.data.keyLabel;
            }
          }
        },
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Barcode: $barcode',
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

I'm pretty new to flutter but here is some code which is working (same context : using a scan from zebra device) to keep focus (with riverpod and flutter_hooks package). I hope it helps.

The problem i'm not resolving is that you keep having the keyboard showing and I would like the keyboard not show...If someone has an idea :

BarcodeScanner :

class BarcodeScanner extends HookConsumerWidget {
  const BarcodeScanner({
    super.key,
    required this.onBarcodeScanned,
  });

  final ValueChanged<String> onBarcodeScanned;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final visible = useState<bool>(true);

    final controller = useTextEditingController();
    final focusNode = useFocusNode(canRequestFocus: true);

    useEffect(() {
      focusNode.addListener(() => _requestFocus(context, focusNode));
      return () => focusNode.removeListener(() => _requestFocus(context, focusNode));
    }, [focusNode]);

    return VisibilityDetector(
      key: const Key('visible-detector-key'),
      onVisibilityChanged: (info) {
        if (!context.mounted) return;
        visible.value = info.visibleFraction > 0;
      },
      child: BarcodeKeyboardListener(
        bufferDuration: const Duration(milliseconds: 200),
        onBarcodeScanned: (_) {
          if (!visible.value) return;
          onBarcodeScanned(controller.text);
          controller.text = '';
        },
        child: Visibility(
          visible: true,
          maintainState: true,
          maintainSemantics: true,
          maintainSize: true,
          maintainAnimation: true,
          child: TextField(
            autofocus: true,
            controller: controller,
            focusNode: focusNode,
          ),
        ),
      ),
    );
  }

  _requestFocus(BuildContext context, FocusNode focusNode) {
    if (!focusNode.hasFocus) {
      FocusScope.of(context).requestFocus(focusNode);
    }
  }
}

Page showing barcodes :

@override
  Widget build(BuildContext context, WidgetRef ref) {
    return SmaScaffold(
      title: context.i18n.menuPreReceptionDeliver,
      child: SafeArea(
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.only(top: 500),
            child: Column(
              children: <Widget>[
                BarcodeScanner(
                  onBarcodeScanned: (value) async {
                    ref.read(parcelsScanProvider.notifier).fetch(value);
                  },
                ),
                const SizedBox(height: 50),
                Consumer(
                  builder: (context, ref, child) {
                    final codes = ref.watch(parcelsProvider);
                    return BarCodesList(codes: codes);
                  },
                ),
                SizedBox(height: MediaQuery.of(context).viewInsets.bottom),
              ],
            ),
          ),
        ),
      ),
    );