类型 'FutureBuilder<File>' 不是类型 'ImageProvider<dynamic>' 的子类型 - 图像选择器问题

Question

我需要在容器中添加图像。图像来自图像选择器。我收到错误：

 type 'FutureBuilder<File>' is not a subtype of type 'ImageProvider<dynamic>'

原代码如下：

                                      Container( //<-- HEADER CONTAINER
                                        height: kHeaderHeight,
                                        width: kHeaderWidth,
                                        decoration:
                                        BoxDecoration(
                                          image: DecorationImage(
                                            image:
                                            _imageFileForHeader.path != null?
                                            FutureBuilder(
                                                future: _getLocalFile(_imageFileForHeader.path),
                                                builder: (BuildContext context, AsyncSnapshot<io.File>  snapshot)
                                                {
                                                  return Image.file(snapshot.data);
                                                }
                                            ):
                                                NetworkImage(urlImage + _kHeaderImage),  fit: BoxFit.cover,
                                          ),
                                        ),

在这里我真的需要任何帮助。

如果用户没有 select 图片库中的图片 - 则使用 URL (urlImage) 中的图片。

我认为我正在做一个非常标准的例程，但我不明白为什么它不起作用。

谢谢

-- 我只想补充一点，我也试过了：

return FileImage(snapshot.data)

这也不起作用。

我想我已经用尽了所有可能的排列方式。

顺便说一下，这是 _getLocalFile...

  Future<io.File> _getLocalFile(String filename) async
  {
    io.File f = new io.File(filename);
    return f;
  }

Answer 1

我认为您的 _getLocalFile 函数 returns 数据类型错误。也许如果您尝试以下操作：

Future<File> _getLocalFile() async{
  final ImagePicker _picker = ImagePicker();
  PickedFile pickedFile= await _picker.getImage(source: ImageSource.gallery);
  File file =  File(pickedFile.path);
  return file;
}

此外，我不认为您可以将 FutureBuilder 用于 Containers 图像变量。要在 Container 中显示图像，您可以使用：

File file;

Container(
  decoration: new BoxDecoration(
    image: new DecorationImage(
      fit: BoxFit.cover,
      image: new FileImage(file),
    ),
  ),
),

所以我认为您必须检查文件变量是否为空，如果为空，则可能显示一个按钮。如果用户按下按钮，您可以调用 async _getLocalFile 函数，然后使用 setState 更新以显示图像。

也许您还可以将图像包裹在 FutureBuilder 周围：


    FutureBuilder<File>(
        future: _getLocalFile(),
        builder: (BuildContext context, AsyncSnapshot<File>  snapshot)
        {
          if(!snapshot.hasData){
            return CircularProgressIndicator();
          }else{
            return Container(
              decoration: new BoxDecoration(
                image: new DecorationImage(
                  fit: BoxFit.cover,
                  image: new FileImage(snapshot.data),
                ),
              ),
            );
          }
        }
    );

Answer 2

您不需要 _getLocalFile 中的任何 future，因为里面没有异步操作。你可以这样做

return Container( //<-- HEADER CONTAINER
    height: kHeaderHeight,
    width: kHeaderWidth,
    decoration:
    BoxDecoration(
        image: DecorationImage(
        image: _imageFileForHeader?.path != null
                ? Image.file(File(_imageFileForHeader.path)) 
                : Image.network(urlImage + _kHeaderImage);
        ),
    ),

或者假设 _imageFileForHeader 已经是一个文件，我们可以进一步简化它

return Container( //<-- HEADER CONTAINER
    height: kHeaderHeight,
    width: kHeaderWidth,
    decoration:
    BoxDecoration(
        image: DecorationImage(
        image: _imageFileForHeader != null
                ? Image.file(_imageFileForHeader) 
                : Image.network(urlImage + _kHeaderImage);
        ),
    ),

类型 'FutureBuilder<File>' 不是类型 'ImageProvider<dynamic>' 的子类型 - 图像选择器问题

type 'FutureBuilder<File>' is not a subtype of type 'ImageProvider<dynamic>' - Image Picker problem

future

dart

flutter

imagepicker