Question

使用flutter插件image_picker 0.4.4我将使用以下内容从相机或图库中显示图像

  Widget _previewImageBkg() {
    return FutureBuilder<File>(
        future: _imageFileBkg,
        builder: (BuildContext context, AsyncSnapshot<File> snapshot) {
          if (snapshot.connectionState == ConnectionState.done && snapshot.data != null) {
            print('_previewImage.........check callback for this image. .>>>>>');
            final File file = snapshot.data;

            myBgURL = uploadFile('user@image.com_B.jpg', file);

            return Image.file(snapshot.data);

          } else if (snapshot.error != null) {
            return const Text(
              'Error picking image.',
              textAlign: TextAlign.center,
            );
          } else {
            return const Text(
              'You have not yet picked an image.',
              textAlign: TextAlign.center,
            );
          }
        }
        )

如果放入容器

，图像确实显示正常

return Scaffold(
      appBar: AppBar(
        title: Text('Set Profile Images'),
      ),
      body:  Center(
        child: new Container(
            width: screen.width,
            height: 250.0,
            child: _previewImageBkg()),
      ),

但是我想在BoxDecoration中显示它（图片：...）

child: new Container(
          width: screenSize.width,
          height: 275.0,
          decoration: new BoxDecoration(
            image: new DecorationImage(
              image: (_previewImageBkg()== null ? new ExactAssetImage('images/nav_header_bg.png') : _previewImageBkg()),
              fit: BoxFit.cover,
            ),
          ),
        ),

/flutter (29415): type 'FutureBuilder<File>' is not a subtype of type 'ImageProvider<dynamic>'

如何将此文件投射到图像？获得-fit的更大目标：BoxFit.cover - BoxDecoration的属性。

Answer 1

像这样使用FileImage来构建装饰的容器 - 关联的Future必须返回一个文件：

@override
Widget build(BuildContext context) {
  return new FutureBuilder<File>(
    future: _imageFileBkg,
    builder: (context, snapshot) {
      if (!snapshot.hasData) return Container(); // or some other placeholder
      return new Container(
        width: screenSize.width,
        height: 275.0,
        decoration: new BoxDecoration(
            image: new DecorationImage(
          image: new FileImage(snapshot.data),
          fit: BoxFit.cover,
        )),
      );
    },
  );
}

如何将FutureBuilder <file>转换为BoxDecoraiton Image

1 个答案: