flutterflutter-layoutflutter-container

How to set Container Background image as Image.file() form XFile source in flutter


I am using this function to get images from the gallery

_getFromGallery() async {
    XFile? pickedFileGal = await ImagePicker().pickImage(
      source: ImageSource.gallery,
      maxWidth: 1800,
      maxHeight: 1800,
    );
    if (pickedFileGal != null) {
      XFile imageFileGal = XFile(pickedFileGal.path);
      setState(() {
        _imageFile = imageFileGal;
      });
    }
  }
late XFile _imageFile;

I need to set the image to the container background, the container has a child column. So I need to set it in BoxDecoration, but I have the image in XFile the container BoxDecoration image does not take Image.file(). So how can I achieve that? Please guide me

Container(
                      decoration: BoxDecoration(
                        image: Image.file(_imageFile), //Error 
                      ),
                      padding: const EdgeInsets.only(top: 20),
                      color: Colors.white,
                      margin: const EdgeInsets.only(
                        bottom: 15,
                      ),
                      child: Column(
                        children: []))

Solution

  • First the image here needs to be a DecorationImage which then takes ImageProvider<Object>.

    Knowing this , the correct way to use this is as follows

     Container(decoration: BoxDecoration(
                  image: DecorationImage(image: Image.file('file').image)
                ),),
    

    Xfile to file

    Xfile pickedFile;
       Image.file(File(pickedFile.path))