Flutter中如何将选中的文件名显示在Text组件中

你的代码有两个核心问题导致选中的文件名无法显示：

1. 局部变量遮蔽全局变量
   你在upLoadFile()方法里重新声明了final fileName，这是一个局部变量，和外部的全局String? fileName完全独立，赋值后外部变量根本没变化，Text组件自然拿不到选中的文件名。

2. 未触发Flutter状态更新
   即使修改了全局变量，Flutter也不会自动刷新UI，必须通过setState()通知框架重新构建组件。

修改后的代码如下：

String? fileName;

void upLoadFile() async {
    final results = await FilePicker.platform.pickFiles(
      allowMultiple: false,
      type: FileType.custom,
      allowedExtensions: ['jpg', 'png'],
    );

    if (results == null) return; // 增加非空判断，避免用户取消选择时报错

    final path = results.files.single.path!;
    // 去掉final，直接给全局变量赋值
    fileName = results.files.single.name;

    storage.uploadFile(path, fileName);

    print(fileName);
    // 调用setState触发UI更新
    setState(() {});
  }

// 显示文件名的部分保持不变
fileName == null
              ? const Center(child: Text('No file selected'))
              : Center(child: Text(fileName!)),

// Button部分保持不变
onPressed: () async {
                upLoadFile();
              },

额外说明：

• 新增的if (results == null) return可以避免用户打开文件选择器后取消选择，导致results!触发空指针报错。
• 确保你的代码是在StatefulWidget的State类中，因为setState()是State类的专属方法，如果当前是无状态组件，需要改成有状态组件才能使用该方法。

内容的提问来源于stack exchange，提问作者It'sPhil