flutter - 为 QR 码扫描器添加一个小窗口，用于扫描商品并添加到购物车按钮，在 Flutter App 的同一屏幕上显示商品详情

Question

因此，我正在开发一个 Flutter 移动应用程序，该应用程序与使用 QR 码的店内购物有关，并且我正在尝试使用 flutter_barcode_scanner 包实现一个用于扫描商店中商品的 QR 码的屏幕。但是，我希望能够在扫描商品后添加“添加到购物车”功能，而不仅仅是显示信息，我还将在其中为 QR 码扫描仪提供一个较小的窗口，而不是占据整个屏幕，这样我就可以查看屏幕底部的项目详细信息。知道如何实现这样的 Flutter 屏幕吗？在此先感谢这是我的二维码扫描仪屏幕代码：

import 'dart:async';

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

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_barcode_scanner/flutter_barcode_scanner.dart';
import 'package:shop_to_go2/widgets/button_widget.dart';

import '../main.dart';

class QRScanPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _QRScanPageState();
}

class _QRScanPageState extends State<QRScanPage> {
  String qrCode = 'Unknown';

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text("Shop To Go"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Scan Result',
                style: TextStyle(
                  fontSize: 16,
                  color: Colors.white54,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(height: 8),
              Text(
                '$qrCode',
                style: TextStyle(
                  fontSize: 28,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
              SizedBox(height: 72),
              ButtonWidget(
                text: 'Start Shopping',
                onClicked: () => scanQRCode(),
              ),
            ],
          ),
        ),
      );

  Future<void> scanQRCode() async {
    try {
      final qrCode = await FlutterBarcodeScanner.scanBarcode(
        '#ff6666',
        'Cancel',
        true,
        ScanMode.QR,
      );

      if (!mounted) return;

      setState(() {
        this.qrCode = qrCode;
      });
    } on PlatformException {
      qrCode = 'Failed to get platform version.';
    }
  }
}

标签： flutterdartshopping-cartshopping