Flutter中QrImage无法使用？组件类型匹配错误求助

一、解决"The element type 'QrImage' can't be assigned to the list type 'Widget'"错误 #

• 确认依赖包与导入语句
  确保pubspec.yaml中添加的是qr_flutter包，版本使用最新稳定版：

  dependencies:
    qr_flutter: ^4.1.0
  

  执行flutter pub get后，在页面文件顶部导入正确的包：

  import 'package:qr_flutter/qr_flutter.dart';
  

  若同时导入了多个QR相关包，会引发类名冲突，需移除无关导入。

• 检查代码语法完整性
  确保Column的children列表中，if条件后的QrImage语法正确（如必要的逗号），但当前错误核心为类型不匹配，优先排查包的问题。

二、实现点击按钮显示QR码的需求 #

原代码使用StatelessWidget无法动态切换显示状态，需改为StatefulWidget，通过状态变量控制QR码的显示/隐藏，完整示例代码如下：

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

class QrConfirmationScreen extends StatefulWidget {
  final String qrData;

  const QrConfirmationScreen({required this.qrData, super.key});

  @override
  State<QrConfirmationScreen> createState() => _QrConfirmationScreenState();
}

class _QrConfirmationScreenState extends State<QrConfirmationScreen> {
  bool _showQrCode = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFEA7070),
      appBar: AppBar(
        title: const Text('QR 확인'),
        backgroundColor: const Color(0xFFEA7070),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const Text(
              '생성된 QR 코드',
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _showQrCode = !_showQrCode;
                });
              },
              child: Text(_showQrCode ? '숨기기' : 'QR 코드 보기'),
            ),
            const SizedBox(height: 20),
            if (_showQrCode && widget.qrData.isNotEmpty)
              QrImage(
                data: widget.qrData,
                version: QrVersions.auto,
                size: 200.0,
                backgroundColor: Colors.white,
              ),
          ],
        ),
      ),
    );
  }
}

代码说明 #

• 新增_showQrCode布尔变量，用于控制QR码的显示状态
• 添加ElevatedButton，点击后通过setState切换显示状态
• 给QrImage设置白色背景，在红色页面背景下更易识别

内容的提问来源于stack exchange，提问作者비도덕이도덕