Flutter使用image_picker报错：File?无法赋值给File参数

问题说明 #

使用image_picker实现点击容器从相册选择图片并展示时，出现错误：The argument type 'File?' can't be assigned to the parameter type 'File'，相关代码如下：

import 'dart:io';

import 'package:flutter/material.dart';
import '../../../constants.dart';
import 'package:get/get.dart';
import 'package:image_picker/image_picker.dart';

class UploadFishingVesselImages extends StatefulWidget {
  const UploadFishingVesselImages({Key? key}) : super(key: key);

  @override
  State<UploadFishingVesselImages> createState() =
      _UploadFishingVesselImagesState();
}

class _UploadFishingVesselImagesState extends State<UploadFishingVesselImages> {
  File? _image;
  final _picker = ImagePicker();

  Future choiceImage() async {
    var pickedImage = await _picker.pickImage(source: ImageSource.gallery);
    if (pickedImage == null) return null;
    setState(() {
      _image = File(pickedImage.path);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: baseColor10,
        elevation: 0,
        leading: IconButton(
          onPressed: () {
            Get.back();
          },
          icon: Icon(Icons.arrow_back),
          color: baseColor50,
        ),
        title: Text(
          '선박판매등록',
          style: TextStyle(
            color: baseColor50,
            fontFamily: 'semi-bold',
            fontSize: titleMedium,
          ),
        ),
      ),
      body: GestureDetector(
        onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
        child: SingleChildScrollView(
          child: SafeArea(
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  TopBar(context),
                  marginHeight32,
                  buildTextColumn(),
                  Row(
                    children: [
                      GestureDetector(
                        onTap: () async {
                          await choiceImage();
                        },
                        child: Expanded(
                          child: Container(
                            height: 90,
                            width: MediaQuery.of(context).size.width * 0.3,
                            decoration: BoxDecoration(
                              color: baseColor20,
                            ),
                          ),
                        ),
                      ),
                      SizedBox(width: 10),
                      Expanded(
                        child: Container(
                          height: 90,
                          width: MediaQuery.of(context).size.width * 0.3,
                          decoration: BoxDecoration(
                            color: baseColor20,
                          ),
                        ),
                      ),
                      SizedBox(width: 10),
                      Expanded(
                        child: Container(
                          height: 90,
                          width: MediaQuery.of(context).size.width * 0.3,
                          decoration: BoxDecoration(
                            color: baseColor20,
                          ),
                        ),
                      ),
                    ],
                  ),
                  // Error occurs. 'The argument type 'File?' can't be assigned
                  // to the parameter type 'File'.
                  Image.file(_image),
                ],
              ),
            ),
          ),
        ),
      ),
      floatingActionButton: Visibility(
        visible: MediaQuery.of(context).viewInsets.bottom == 0,
        child: FloatingActionButton(
          backgroundColor: primaryColor50,
          foregroundColor: baseColor10,
          focusColor: primaryColor50,
          onPressed: () {},
          child: Icon(
            Icons.arrow_forward_ios_rounded,
          ),
        ),
      ),
    );
  }

// 상단 텍스트
  Column buildTextColumn() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '사진 등록',
          style: TextStyle(
            color: baseColor50,
            fontSize: titleMedium,
            fontFamily: 'semi-bold',
          ),
        ),
        marginHeight4,
        Text(
          '판매선박의 사진을 등록해주세요.(최대 20장)'
          '\n다양하고 선명한 사진을 올릴 경우, 판매 확률이 더욱 높아집니다.',
          style: TextStyle(
            fontSize: bodySmall,
          ),
        ),
        marginHeight32,
      ],
    );
  }

// 상단바
  Column TopBar(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            Expanded(
              child: Container(
                height: 3,
                color: baseColor30,
                width: MediaQuery.of(context).size.width * 0.2,
              ),
            ),
            Expanded(
              child: Container(
                height: 3,
                color: baseColor30,
                width: MediaQuery.of(context).size.width * 0.2,
              ),
            ),
            Expanded(
              child: Container(
                height: 3,
                color: baseColor30,
                width: MediaQuery.of(context).size.width * 0.2,
              ),
            ),
            Expanded(
              child: Container(
                height: 3,
                color: primaryColor50,
                width: MediaQuery.of(context).size.width * 0.2,
              ),
            ),
            Expanded(
              child: Container(
                height: 3,
                color: baseColor30,
                width: MediaQuery.of(context).size.width * 0.2,
              ),
            ),
          ],
        ),
        marginHeight4,
        Row(
          children: [
            Expanded(
              child: Container(
                child: Center(
                  child: Text(
                    '선박정보',
                    style: TextStyle(
                      fontFamily: 'medium',
                      fontSize: labelSmall,
                      color: baseColor30,
                    ),
                  ),
                ),
              ),
            ),
            Expanded(
              child: Container(
                child: Center(
                  child: Text(
                    '옵션',
                    style: TextStyle(
                      fontFamily: 'medium',
                      fontSize: labelSmall,
                      color: baseColor30,
                    ),
                  ),
                ),
              ),
            ),
            Expanded(
              child: Container(
                child: Center(
                  child: Text(
                    '설명등록',
                    style: TextStyle(
                      fontFamily: 'medium',
                      fontSize: labelSmall,
                      color: baseColor30,
                    ),
                  ),
                ),
              ),
            ),
            Expanded(
              child: Container(
                child: Center(
                  child: Text(
                    '사진등록',
                    style: TextStyle(
                      fontFamily: 'medium',
                      fontSize: labelSmall,
                      color: primaryColor50,
                    ),
                  ),
                ),
              ),
            ),
            Expanded(
              child: Container(
                child: Center(
                  child: Text(
                    '결제',
                    style: TextStyle(
                      fontFamily: 'medium',
                      fontSize: labelSmall,
                      color: baseColor30,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }
}

错误原因 #

_image被定义为可空类型File?，而Image.file()构造函数要求传入非空的File类型，直接传入可空变量会触发类型不匹配错误。

解决方案 #

方案1：条件判断处理空值（推荐） #

在构建图片组件时，先判断_image是否为空，为空时显示占位组件，非空时再展示图片：

// 替换原代码中的Image.file(_image)
_image != null ? Image.file(_image!) : Container(
  height: 90,
  color: baseColor20,
  child: const Center(child: Text('未选择图片')),
)

方案2：强制解包（谨慎使用） #

如果能确保_image在使用时一定不为空（比如只有用户选择图片后才会渲染该组件），可以用!强制解包：

Image.file(_image!)

注意：若_image为空时使用此写法，会触发空指针异常，仅适合能保证变量非空的场景。

方案3：设置非空默认值 #

如果业务允许，可以给_image初始化一个非空的默认文件（比如本地占位图）：

File _image = File('assets/placeholder.png');

需确保默认文件路径正确且存在，否则会报错，适合有固定占位图的场景。

额外优化：将图片展示到点击的容器内 #

按需求，点击容器选图后应该在该容器内展示图片，可修改第一个容器的代码：

GestureDetector(
  onTap: () async {
    await choiceImage();
  },
  child: Expanded(
    child: Container(
      height: 90,
      width: MediaQuery.of(context).size.width * 0.3,
      decoration: BoxDecoration(
        color: baseColor20,
        // 有图片时显示图片，否则显示背景色
        image: _image != null ? DecorationImage(
          image: FileImage(_image!),
          fit: BoxFit.cover,
        ) : null,
      ),
    ),
  ),
),

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