Merge pull request #45 from AdelAskri/main

add possibility to have a child on web

Author: CodingWithTashi

example/lib/main.dart

@@ -42,7 +42,21 @@ class _HomePageState extends State<HomePage> {
                 var res = await Navigator.push(
                     context,
                     MaterialPageRoute(
-                      builder: (context) => const SimpleBarcodeScannerPage(),
+                      builder: (context) => const SimpleBarcodeScannerPage(
+                        child: Column(
+                          children: [
+                            SizedBox(
+                              height: 20,
+                            ),
+                            TextField(
+                              decoration: InputDecoration(
+                                labelText: 'Enter Text',
+                                border: OutlineInputBorder(),
+                              ),
+                            ),
+                          ],
+                        ),
+                      ),
                     ));
                 setState(() {
                   if (res is String) {

lib/screens/io_device.dart

@@ -14,16 +14,18 @@ class BarcodeScanner extends StatelessWidget {
   final Function(String) onScanned;
   final String? appBarTitle;
   final bool? centerTitle;
+  final Widget? child;
   const BarcodeScanner({
-    Key? key,
+    super.key,
     required this.lineColor,
     required this.cancelButtonText,
     required this.isShowFlashIcon,
     required this.scanType,
     required this.onScanned,
+    this.child,
     this.appBarTitle,
     this.centerTitle,
-  }) : super(key: key);
+  });
 
   @override
   Widget build(BuildContext context) {

lib/screens/unsupported.dart

@@ -9,16 +9,17 @@ class BarcodeScanner extends StatelessWidget {
   final Function(String) onScanned;
   final String? appBarTitle;
   final bool? centerTitle;
+  final Widget? child;
   const BarcodeScanner(
-      {Key? key,
+      {super.key,
       this.lineColor = "#ff6666",
       this.cancelButtonText = "Cancel",
       this.isShowFlashIcon = false,
       this.scanType = ScanType.barcode,
       required this.onScanned,
       this.appBarTitle,
-      this.centerTitle})
-      : super(key: key);
+      this.child,
+      this.centerTitle});
 
   @override
   Widget build(BuildContext context) {

lib/screens/web.dart

@@ -1,6 +1,6 @@
 // ignore: avoid_web_libraries_in_flutter
 import 'dart:html' as html;
-import 'dart:ui' as ui;
+import 'dart:ui_web' as ui;
 
 import 'package:flutter/material.dart';
 import 'package:simple_barcode_scanner/constant.dart';
@@ -15,17 +15,18 @@ class BarcodeScanner extends StatelessWidget {
   final Function(String) onScanned;
   final String? appBarTitle;
   final bool? centerTitle;
-
+  final Widget? child;
   const BarcodeScanner({
-    Key? key,
+    super.key,
     required this.lineColor,
     required this.cancelButtonText,
     required this.isShowFlashIcon,
     required this.scanType,
     required this.onScanned,
     this.appBarTitle,
     this.centerTitle,
-  }) : super(key: key);
+    this.child,
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -35,6 +36,8 @@ class BarcodeScanner extends StatelessWidget {
     final html.IFrameElement iframe = html.IFrameElement()
       ..src = PackageConstant.barcodeFileWebPath
       ..style.border = 'none'
+      ..style.width = '100%'
+      ..style.height = '100%'
       ..onLoad.listen((event) async {
         /// Barcode listener on success barcode scanned
         html.window.onMessage.listen((event) {
@@ -49,14 +52,26 @@ class BarcodeScanner extends StatelessWidget {
     // ignore: undefined_prefixed_name
     ui.platformViewRegistry
         .registerViewFactory(createdViewId, (int viewId) => iframe);
-
+    final width = MediaQuery.of(context).size.width;
+    final height = width / (16 / 9);
     return Scaffold(
       appBar: AppBar(
         title: Text(appBarTitle ?? kScanPageTitle),
         centerTitle: centerTitle,
       ),
-      body: HtmlElementView(
-        viewType: createdViewId,
+      body: SingleChildScrollView(
+        child: Column(
+          children: [
+            SizedBox(
+              height: height,
+              width: width,
+              child: HtmlElementView(
+                viewType: createdViewId,
+              ),
+            ),
+            if (child != null) child!,
+          ],
+        ),
       ),
     );
   }

lib/screens/window.dart

@@ -18,15 +18,15 @@ class WindowBarcodeScanner extends StatelessWidget {
   final bool? centerTitle;
 
   const WindowBarcodeScanner({
-    Key? key,
+    super.key,
     required this.lineColor,
     required this.cancelButtonText,
     required this.isShowFlashIcon,
     required this.scanType,
     required this.onScanned,
     this.appBarTitle,
     this.centerTitle,
-  }) : super(key: key);
+  });
 
   @override
   Widget build(BuildContext context) {

lib/simple_barcode_scanner.dart

@@ -25,17 +25,39 @@ class SimpleBarcodeScannerPage extends StatelessWidget {
   ///center Title
   final bool? centerTitle;
 
+  /// Specify a child widget to be positioned beneath the scanner.
+  /// This is beneficial when you need to include a customized text field
+  /// for manual entry of barcode/QR code.
+  /// example:
+  ///  ```dart
+  /// child: Column(
+  ///   children: [
+  ///     SizedBox(
+  ///       height: 20,
+  ///     ),
+  ///    TextField(
+  ///       decoration: InputDecoration(
+  ///         labelText: 'Enter Barcode manually',
+  ///         border: OutlineInputBorder(),
+  ///       ),
+  ///     ),
+  ///   ],
+  /// ),
+  /// ```
+  final Widget? child;
+
   /// appBatTitle and centerTitle support in web and window only
   /// Remaining field support in only mobile devices
   const SimpleBarcodeScannerPage({
-    Key? key,
+    super.key,
     this.lineColor = "#ff6666",
     this.cancelButtonText = "Cancel",
     this.isShowFlashIcon = false,
     this.scanType = ScanType.barcode,
     this.appBarTitle,
     this.centerTitle,
-  }) : super(key: key);
+    this.child,
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -46,6 +68,7 @@ class SimpleBarcodeScannerPage extends StatelessWidget {
       scanType: scanType,
       appBarTitle: appBarTitle,
       centerTitle: centerTitle,
+      child: child,
       onScanned: (res) {
         Navigator.pop(context, res);
       },