[Day13] Flutter with GetX qr_flutter & qr_code_scanner

产生QRCode qr_flutter

Page的部分用column分配元件位置
中间的QrImage 外层包了一个GesutreDetector, 接收点击事件
gapless属性则是可以调整QRCode的方格之间有没有一个小的gap细线分割

class QRCodePage extends GetView<QRCodePageController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('QRCodePage')),
        body: SafeArea(
            child: SizedBox.expand(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text('Scan QRCode', style: TextStyle(fontSize: 18)),
              Obx(
                () => GestureDetector(
                  onTap: () => controller.isGapless = !controller.isGapless,
                  child: SizedBox(
                    height: Get.width * 0.8,
                    width: Get.width * 0.8,
                    child: QrImage(
                      data: controller.qrCodeData,
                      version: QrVersions.auto,
                      size: Get.width * 0.7,
                      gapless: controller.isGapless,
                    ),
                  ),
                ),
              ),
              CupertinoButton(
                child: Text("QR code Scan"),
                color: Colors.blue,
                onPressed: () => Get.toNamed(AppRoutes.QRCodeScanPage),
              ),
            ],
          ),
        )));
  }
}

QRCodePageController的部分
qrCodeData带入QRCode被扫到後呈现的内容,
isGapless则是用GetX的Obx() 将Widget作Gap的变换

class QRCodePageController extends GetxController {
  final _qrCodeData = ''.obs;
  set qrCodeData(value) => this._qrCodeData.value = value;
  get qrCodeData => this._qrCodeData.value;

  final _isGapless = false.obs;
  set isGapless(value) => this._isGapless.value = value;
  get isGapless => this._isGapless.value;

  @override
  void onInit() {
    qrCodeData = 'https://ithelp.ithome.com.tw/2021ironman';
    super.onInit();
  }
}

开启相机扫QRCode qr_code_scanner

需先设定
Android的Kotlin&gradle版本
iOS info.plist的权限设定
fjjpATJvCHbyO7ujqIqqMA

在扫描的页面用GetX的Obx判断是否有扫描结果,
有则显示扫描到的资讯buildScanResultView(),
没有则显示相机等待有扫描到结果buildQrView(),

class QRCodeScanPage extends GetView<QRCodeScanPageController> {
  final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Obx(() => controller.scanResult.code == ""
          ? _buildQrView(context)
          : _buildScanResultView(context)),
    );
  }
  //扫描到的结果Widget
  Widget _buildScanResultView(BuildContext context) {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(controller.scanResult.code),
          ),
          CupertinoButton(
            onPressed: () {
              controller.cleanScanResult();
              Get.back();
            },
            child: Text(
              "确认并返回",
              style: TextStyle(fontSize: 18),
            ),
          ),
        ],
      ),
    );
  }
  
  //开启相机扫描中的Widget
  Widget _buildQrView(BuildContext context) {
    var scanArea = Get.width;
    return Stack(
      children: [
        QRView(
          key: qrKey,
          onQRViewCreated: controller.onQRViewCreated,
          overlay: QrScannerOverlayShape(
              borderColor: Colors.red,
              borderRadius: 10,
              borderLength: 30,
              borderWidth: 10,
              cutOutSize: scanArea),
        ),
        Positioned.fill(
          child: Align(
            alignment: Alignment.bottomCenter,
            child: CupertinoButton(
                color: Colors.blue,
                onPressed: () => Get.back(),
                child: Text('返回')),
          ),
        ),
      ],
    );
  }
}