skip to Main Content

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();
    }
  }

2

Answers


  1. 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

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search