如何在颤动中使用挑选的图像作为背景图像？答案

【问题标题】：how to use a picked image as background image in flutter?如何在颤动中使用挑选的图像作为背景图像？
【发布时间】：2021-08-20 07:05:07
【问题描述】：

我使用了 file_picker 库，因此用户可以选择他最喜欢的图像，然后将其用作我的应用程序中的背景图像。问题是，我无法正确投射。这是一些代码：

 floatingActionButton: FloatingActionButton(
            onPressed: () async {
              final result = await FilePicker.platform.pickFiles(type: FileType.any, allowMultiple: false);
              if (result != null) {
                var fileBytes = result.files.first.bytes;
                if (fileBytes != null) {
                  blogimage = Image.memory(fileBytes);
                  setState(() {});
                }
              }
            },
            tooltip: 'Select Image',
            child: Icon(Icons.select_all),
          ),

在上面的代码中，我得到了图像。我正在尝试使用blogimage 作为我的背景图片。我已经尝试过使用容器但失败了。这是我使用的代码：

Widget build(BuildContext context) {
    return Container(
        decoration: (blogimage != null)? BoxDecoration(image: DecorationImage(image: blogimage)): null,
        child: Scaffold(
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            title: Text(widget.title),
          ),
.....

得到错误：需要一个“ImageProvider”类型的值，但得到一个“Image”类型的值。

有什么想法吗？感谢阅读。

【问题讨论】：

标签： flutter dart statefulwidget

【解决方案1】：

首先，如果您想从所选图像中获取字节，则缺少一个参数

final result = await FilePicker.platform.pickFiles(type: FileType.any, allowMultiple: false, withData: true);

withData: true 将为您提供所选图像的字节数。

如果您不将其设置为 true，result.files.first.bytes 将为 null。

其次，为什么要将 blogImage 声明为 Image 类型？

改用 Uint8List 类型并在您的装饰图像中使用 MemoryImage(blogImage)

class FilePickerTest extends StatefulWidget {
  @override
  _FilePickerTestState createState() => _FilePickerTestState();
}

class _FilePickerTestState extends State<FilePickerTest> {
  Uint8List? blogImage;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          final result = await FilePicker.platform.pickFiles(type: FileType.any, allowMultiple: false, withData: true);
          if (result != null) {
            blogImage = result.files.first.bytes;
            if (blogImage != null) {
              setState(() {});
            }
          }
        },
        tooltip: 'Select Image',
        child: Icon(Icons.select_all),
      ),
      body: Container(
        decoration: (blogImage != null) ? BoxDecoration(image: DecorationImage(image: MemoryImage(blogImage!))) : null,
        child: Scaffold(
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            title: Text(widget.title),
          ),
        ),
      ),
    );
  }
}

【讨论】：

【解决方案2】：

问题是您提供了一个图像小部件，而代码需要提供图像的东西。就像你使用图像时一样，你可以像这样实现它

Image(
  image:AssetImage("")//This is the image provider
)

因此，我们将传递提供程序，而不是传递小部件，在本例中为 MemoryImage

                  blogimage = MemoryImage(fileBytes);

希望对您有所帮助。另外，在这个图像的装饰中，你可能需要使用属性

Container(
        decoration: (blogimage != null)? BoxDecoration(image: DecorationImage(image: blogimage,fit:BoxFit.cover)): null,
   constraints:BoxConstraints.expand()

)

【讨论】：

【解决方案3】：

withData: 如果你想让文件提前加载到内存中，则为 true 如果未设置，则始终返回 FilePickerResult.files.bytes 空值

FilePickerResult? result = await FilePicker.platform.pickFiles(type: FileType.any, allowMultiple: false,withData: true);
      if (result != null) {
        var fileBytes = result.files.first.bytes;
        if (fileBytes != null) {
          blogimage = fileBytes;
          setState(() {});
        }
      }

使用给定 Uint8list 的 ImageProvider MemoryImage 显示图像

Container(
    decoration: (blogimage != null)? BoxDecoration(image: DecorationImage(image: MemoryImage(blogimage))): null,
    child: Scaffold(
      backgroundColor: Colors.transparent,
      appBar: AppBar(
        title: Text(widget.title),
      ),

【讨论】：