Flutter - Invalid argument(s): No host specified in URI when displaying it in a carousel

Question

How do I convert a XFile to a URI in order to display the image? I am selecting the image via gallery of the device(mobile phone). I do get this error when the carousel moves around

Invalid argument(s): No host specified in URI file:///Instance%20of%20'XFile'

I will comment out where I think I got my error, are there any way on how to convert this and store it in an array just like URL? I can't seem find a solution for this one.

This is the image of the carousel that is displaying on my android emulator: https://prnt.sc/DRI_H-ALYgfJ

This is my code function for displaying the carousel.

displayingFunction()

List<XFile> images = [];

// I have tried this one but this does not work and it produces an error.
// "The getter 'path' isn't defined for the type 'List<XFile>'."
File file = File(images.path);

Widget displayingFunction() {
    final List<Widget> imageSliders = images
        .map((item) => Container(
              child: Container(
                margin: const EdgeInsets.all(5.0),
                child: ClipRRect(
                    borderRadius: const BorderRadius.all(Radius.circular(5.0)),
                    child: Stack(
                      children: <Widget>[
// in this Image.network, how do I convert the item.toString into an image?
// and produces an error
// Invalid argument(s): No host specified in URI file:///Instance%20of%20'XFile'

                        Image.network(item.toString(),
                            fit: BoxFit.cover, width: 1000.0),
                        Positioned(
                          bottom: 0.0,
                          left: 0.0,
                          right: 0.0,
                          child: Container(
                            decoration: const BoxDecoration(
                              gradient: LinearGradient(
                                colors: [
                                  Color.fromARGB(200, 0, 0, 0),
                                  Color.fromARGB(0, 0, 0, 0)
                                ],
                                begin: Alignment.bottomCenter,
                                end: Alignment.topCenter,
                              ),
                            ),
                            padding: const EdgeInsets.symmetric(
                                vertical: 10.0, horizontal: 20.0),
                            child: Text(
                              'No. ${images.indexOf(item)} image',
                              style: const TextStyle(
                                color: Colors.white,
                                fontSize: 20.0,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ),
                      ],
                    )),
              ),
            ))
        .toList();
    if (images.isNotEmpty) {
      return Container(
        child: CarouselSlider(
          options: CarouselOptions(
            autoPlay: true,
            aspectRatio: 2.0,
            enlargeCenterPage: true,
          ),
          items: imageSliders,
        ),
      );
    }  else {
      return Container();
    }
  }

Answer 1

To convert a XFile to a URI in order to display an image, you can use the file:// protocol and pass the file path to the Image.network widget.

Here's a modification to your code:

List<XFile> images = [];

Widget displayingFunction() {
    final List<Widget> imageSliders = images
        .map((item) => Container(
              child: Container(
                margin: const EdgeInsets.all(5.0),
                child: ClipRRect(
                    borderRadius: const BorderRadius.all(Radius.circular(5.0)),
                    child: Stack(
                      children: <Widget>[
                        Image.file(
                          File(item.path),
                          fit: BoxFit.contain,
                          width: 1000.0,
                        ),
                        Positioned(
                          bottom: 0.0,
                          left: 0.0,
                          right: 0.0,
                          child: Container(
                            decoration: const BoxDecoration(
                              gradient: LinearGradient(
                                colors: [
                                  Color.fromARGB(200, 0, 0, 0),
                                  Color.fromARGB(0, 0, 0, 0)
                                ],
                                begin: Alignment.bottomCenter,
                                end: Alignment.topCenter,
                              ),
                            ),
                            padding: const EdgeInsets.symmetric(
                                vertical: 10.0, horizontal: 20.0),
                            child: Text(
                              'No. ${images.indexOf(item)} image',
                              style: const TextStyle(
                                color: Colors.white,
                                fontSize: 20.0,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ),
                      ],
                    )),
              ),
            ))
        .toList();
    if (images.isNotEmpty) {
      return Container(
        child: CarouselSlider(
          options: CarouselOptions(
            autoPlay: true,
            aspectRatio: 2.0,
            enlargeCenterPage: true,
          ),
          items: imageSliders,
        ),
      );
    }  else {
      return Container();
    }
  }

This code will use the file path from each XFile object in the images list and create a file:// URI to display the image using the Image.network widget.

Answer 2

In order to display an XFile type image you have to first convert it into File type like this

File pickedImage = File(pickedImage); //where pickedImage is XFile type

and use Image.File() widget to display pickedImage