如何在 flutter 中使用选取的图像作为背景图像？

Question

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

 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' 类型的值。

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

Answer 1

问题在于您正在提供图像小部件，而代码需要能够提供图像的东西。像你用图片的时候，你可以这样实现

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

所以我们不传递小部件，而是传递提供者，在本例中是 MemoryImage

                  blogimage = MemoryImage(fileBytes);

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

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

)

Answer 2

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

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

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

如果不设置为真result.files.first.bytes将为空

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

改用 Uint8List 类型并在 DecorationImage 中使用 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),
          ),
        ),
      ),
    );
  }
}

Answer 3

withData: 如果你想提前将文件载入内存则为true 如果未设置，则始终 return 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),
      ),

如何在 flutter 中使用选取的图像作为背景图像？

how to use a picked image as background image in flutter?

dart

flutter

statefulwidget