How to add flutter image from local folder stored in assets

Question

I have Stored local images in assets/images file added the pubspcs.yml also
assets: - Assets/images/ but i am fetching values from another dummy.dart file like this

return Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(title: Text(categoryTitle)),
        body: ListView.builder(
          itemBuilder: (ctx, index) {
            return MealItem(
              id: displayedMeals[index].id,
              title: displayedMeals[index].title,
              **imageUrl: displayedMeals[index].imageUrl,**
              duration: displayedMeals[index].duration,
              affordability: displayedMeals[index].affordability,
              complexity: displayedMeals[index].complexity,
           // removeItem: _removeMeal,
            );
                /* Text(categoryMeals[index].title) */;
          },
          itemCount: displayedMeals.length,
        )
 );

and I want the image to come with this index file which i am fetching from dummy.dart

 imageUrl:
        'https://www.whiskaffair.com/wp-content/uploads/2018/02/Hyderabadi-Mutton-Biryani-6.jpg',

instead of this i want from the image from assets/images folder

Your question is not clear. Do you want a placeholder for the image which is fetched from a URL? — Sanjay Sharma
– Sanjay Sharma, Commented May 17, 2020 at 10:03
@SanjaySharma I have stored local images in assets/images folder and I am fetching some values with the imageURL from dummy.dart file in the listview..if I give http://...someonlineimage...image is showing...but I want to add image from local folder — Omkar Waghe
– Omkar Waghe, Commented May 17, 2020 at 10:08
class MealItem extends StatelessWidget { final String imageUrl; MealItem({ @required this.imageUrl, }); — Omkar Waghe
– Omkar Waghe, Commented May 17, 2020 at 10:18
Are you serious? This is not the complete code of MealItem :) — Sanjay Sharma
– Sanjay Sharma, Commented May 17, 2020 at 10:21

Sanjay Sharma · Accepted Answer · 2020-05-17 10:29:30Z

1

You can use an asset image as default image.

 child: new Container(
      child: FadeInImage.assetNetwork(
          placeholder: 'place_holder.jpg',
          image:url
      )
  )

Put this in pubspec.yaml

  assets:
  - assets/place_holder.jpg

answered May 17, 2020 at 10:29

Sanjay Sharma

4,0753 gold badges24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Omkar Waghe Over a year ago

Hi sanjay can you give more info if I want to add multiple images from assets/images folder and render it in to assetNetwork... I have more than 100 images

Sanjay Sharma Over a year ago

Add - assets/img/ and put all the images inside img folder

Bogdan Lukin · Accepted Answer · 2020-05-17 10:22:34Z

0

Images are resolved using ImageProvider.

There is a bunch of concrete implementations for different sources of images: FileImage, AssetImage, NetworkImage, MemoryImage, etc. Also there is associated factory constructors on Image class.

Probably you have something similar in MealItem:

Image.network(imageUrl)

You could either use ImageProvider:

Image(image: imageProvider)

Or directly provide Image widget in constructor.

Anyway you should know the source of the image to use appropriate ImageProvider implementation or Image constructor.

answered May 17, 2020 at 10:22

Bogdan Lukin

11 bronze badge

Collectives™ on Stack Overflow

How to add flutter image from local folder stored in assets

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related