Question 76982 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter how to show placeholder if image in assets not available

I am getting some list of images names only I need to get it from my asset folder. But there are some images which are not available so I need to add some error placeholder If it’s not exists. I tried with Future But When I show it on screen its showing error that Future Widget can’t be added in Widget

   ClipRRect(
    borderRadius: BorderRadius.all(Radius.circular(100)),
    child: Image.asset(
      'assets/images/${image}.png',
      height: 50,
      width: 50,
      fit: BoxFit.fill,
    )),

This is what I get

 Future<Widget> Imagee(image) async {
    try {
      await rootBundle.load(image);
      return ClipRRect(
          borderRadius: BorderRadius.all(Radius.circular(100)),
          child: Image.asset(
            'assets/team/${image}.png',
            height: 60,
            width: 60,
            fit: BoxFit.fill,
          ));
    } catch (_) {
      return SizedBox(); // Return this widget
    }
  }

Its showing that Future can’t be added in Widget

Tags:

2

Answers


  1. 0

    Maybe you can try using a validation:

      await rootBundle.load(image);
  if (image != null) {
      return ClipRRect(
          borderRadius: BorderRadius.all(Radius.circular(100)),
          child: Image.asset(
         'assets/team/${image}.png',
         height: 60,
         width: 60,
         fit: BoxFit.fill,
      ));
  } else {
        //...
  }
    Login or Signup to reply.
  2. 0

    You can use FutureBuilder if you have async call to load the Image.

    Future<Widget> ImageOrNot() async {
    try {
      await rootBundle.load(image);
      return ClipRRect(
          borderRadius: BorderRadius.all(Radius.circular(100)),
          child: Image.asset(
            'assets/team/${image}.png',
            height: 60,
            width: 60,
            fit: BoxFit.fill,
          ));
    } catch (_) {
      return SizedBox(); // Return this widget
    }
  }

    and inside build use FutureBuilder

    class ImageOrBox extends StatelessWidget {
  const ImageOrBox({super.key});

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: imageOrNot(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        return snapshot.data??Text('Error');
      },
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search