Flutter中选择图片时如何校验图片大小？

针对需求：选中图片后，若图片大小小于5MB则返回其KB值；若大于5MB，则通过SnackBar显示错误提示信息，以下是修正后的完整实现：

原代码存在的问题 #

• 调用getImageSize()时未传递选中的图片文件参数
• 未处理用户取消图片选择的边界情况
• 未实现超出大小限制时的SnackBar提示逻辑
• 状态更新的时机不合理

修正后的完整代码 #

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

// 以下代码需在State类内部实现
File? selectedImage;

Future getImage() async {
  final ImagePicker picker = ImagePicker();
  // 处理用户取消选择图片的情况
  final XFile? image = await picker.pickImage(source: ImageSource.gallery);
  if (image == null) return;

  final File imageFile = File(image.path);
  final double imageKbSize = getImageSize(imageFile);

  setState(() {
    selectedImage = imageFile;
  });
}

double getImageSize(File selectedImage) {
  final int bytes = selectedImage.readAsBytesSync().lengthInBytes;
  final double kb = bytes / 1024;

  if (kb < 5000.0) {
    print("图片大小小于5MB，大小为${kb.toStringAsFixed(2)}KB");
    return kb;
  } else {
    // 显示超出大小限制的SnackBar提示
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        content: Text("图片大小超过5MB，请选择更小的图片"),
        backgroundColor: Colors.red,
      ),
    );
    return kb;
  }
}

关键说明 #

• 增加用户取消选择的判断，避免空指针异常
• 调整逻辑顺序：先完成图片大小校验，再更新页面状态
• 通过ScaffoldMessenger实现SnackBar提示，确保在有效UI上下文内执行
• 使用toStringAsFixed(2)格式化KB值，提升显示可读性

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