Checking if AssetImage asset path exist

Question

How do I load AssetImage or check if it exists? The data is coming from the api, so I cannot list all the file paths as constants.

As an example path maybe be 'assets/images/${card.imageType}.png' where card.inageType is a variable.

...
child: Image(
       height: 60.0,
       image: Utils.getImage('assets/images/card-${card.category}.png'),
       ),
...

For my getImage function, I tried 2 kinds but not working

Method 1: Using File: The existsSync method is always false. Keep in mind the await async cannot work as the Image widget is expecting not a Future

static dynamic getImage(path) {
    File f = File(path);
    return f.existsSync()
        ? FileImage(f)
        : const AssetImage('assets/images/default.png');
  }
}

Method 2: Using try catch: The exceptions is not being caught

  static AssetImage getImage(path) {
    AssetImage image;

    try {
      image = AssetImage(path);
    } catch (e) {
      image = const AssetImage('assets/images/default.png');
    }

    return image;
  }

Zahid Tekbaş · Answer 1 · 2022-02-04T08:08:09.497

0

You can check if a file exists asynchronously with this code:

import 'dart:io';
File("path/to/file").exists()

or checking it synchronously:

import 'dart:io';
File("path/to/file").existsSync()

Update:

isPathExists() function is called from initState.

AssetBundle is used for to obtain asset inside asset folder. You can insert anything to menubanner.png if it exists, the image will be assigned to variable and if it does not, an exception throws.


  late Image image;
  isPathExists() async {
    try {
      var assetbundle = DefaultAssetBundle.of(context);
      ByteData res = await assetbundle.load('assets/images/menubanner.png');
      var list = Uint8List.sublistView(res);
      setState(() {
        image = Image.memory(list);
      });
    } catch (exception) {
      print(exception);
    }
  }

edited Feb 04 '22 at 08:08

answered Feb 03 '22 at 11:37

Zahid Tekbaş

809
2
12
27

Read the question again, "File f = File(path); line, I tried that and it always return false and async doesn't work as the Image doesn't expect Future – Tremmillicious Feb 03 '22 at 21:40
@Tremmillicious sorry for the inconvenience. I updated the answer. Can you check if that works for you? – Zahid Tekbaş Feb 04 '22 at 08:09

score 0 · Answer 2 · answered Feb 03 '22 at 12:20

You can use something like this to check if an asset exists:

// example: 'assets/check_green.png' 
Future<bool> checkIfAssetExists(String fullAssetPath) async {
  final Uint8List encoded = Utf8Codec()
      .encoder
      .convert(Uri(path: Uri.encodeFull(fullAssetPath)).path);
  // returns null if an asset is not found
  final ByteData? asset = await ServicesBinding.instance!.defaultBinaryMessenger
      .send('flutter/assets', encoded.buffer.asByteData());
  return asset != null;
}

You can run this in your initState and then use AssetImage confidently.

As for the exception not being caught, it probably means than an Error was throw which is different from Exceptions

score -1 · Answer 3 · answered Feb 03 '22 at 11:30

You can not use Asset Image for images fetched from Network.

Once you get response from your api. Store the url of the image in a String variable. Usually images from API are stored in a web service.

When you have the url of the image just use NetworkImage widget, example:

SizedBox(
     width: 75,
     height: 75,
     child: userImgUrl.isEmpty
     ? const CircleAvatar(
     child: Text('Avatar'))
     : CircleAvatar(
          radius: 30,
          backgroundImage: NetworkImage(
                             userImgUrl),
                             backgroundColor: Colors.transparent),)

Think userImgUrl is the String that holds the url for the image that can be found on the internet. If image is empty just show a text inside circle avatar. If image is available from API, then show the image inside NetworkImage()

read the question again. The images are in Assets, only the path is assembled from the API — Tremmillicious, Feb 03 '22 at 21:37

Checking if AssetImage asset path exist

3 Answers3