Flutter动态字符串生成条形码抛出RangeError索引越界异常

问题原因 #

Flutter 的 Visibility 组件默认会完整构建 child 属性对应的 Widget 节点，哪怕 visible 参数设为 false 也会执行构建逻辑。你的代码中 numer 初始值为空字符串，页面首次加载时就会调用 Barcode.convert2Barcode("")，条形码生成逻辑尝试访问空字符串的第0位字符，就会抛出你遇到的索引越界错误，和后续输入赋值的字符串本身无关。

解决方案 #

方案1：改用条件渲染代替 Visibility 组件 #

仅当 _isVisible 为 true 时才构建条形码组件，避免空值调用：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: _isVisible
        ? Row(
            children: Barcode.convert2Barcode(numer),
          )
        : Column(
            children: [
              TextField(
                // 限制输入为数字，最大长度13，适配EAN13码要求
                keyboardType: TextInputType.number,
                maxLength: 13,
                onSubmitted: (value) {
                  // 提交前先校验输入格式
                  if (value.length == 13 && int.tryParse(value) != null) {
                    numer = value;
                    setState(() {
                      _isVisible = true;
                    });
                  } else {
                    // 可添加提示告知用户输入不符合要求
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(content: Text("请输入13位纯数字号码"))
                    );
                  }
                },
              ),
            ],
          ),
  );
}

方案2：保留 Visibility 组件，关闭状态保持 #

给 Visibility 加 maintainState: false 参数，隐藏时不会构建 child 节点：

Visibility(
  visible: _isVisible,
  maintainState: false, // 新增这行
  child: Row(
    children: Barcode.convert2Barcode(numer),
  ),
  replacement: Column(
    children: [
      TextField(
        onSubmitted: (value) {
          numer = value;
          showWidget();
        },
      ),
    ],
  ),
)

内容的提问来源于stack exchange，提问作者Carall