Blue Circle is displayed in CircleAvatar Asset image instead of real image in flutter

Question

I am trying to display the image in the Card widget in leading CircleAvatar below is my code

child: Card(
          child: ListTile(
            onTap: () {},
            title: Text(locations[index].location.toString()),
            leading: CircleAvatar(
              radius: 18.0,
              backgroundImage:
                  AssetImage('assets/${locations[index].flag}'),)

Instead of the real image, I want to show, Blue color is displayed in the circle as shown in below attachment

are these assets listed in your `pubspec.yaml` file under `assets:`? — Peter Koltai, Aug 11 '21 at 23:05

score 1 · Answer 1 · answered Aug 11 '21 at 23:25

1

Add this to CircleAvatar backgroundColor: Colors.transparent,

answered Aug 11 '21 at 23:25

akram abdullah

166
6

score 1 · Accepted Answer · answered Aug 12 '21 at 00:22

1

First, make you have added image on pubspec.yaml.
while loading data from asset, do restart the app, not hot reload or restart.
if it fails, do flutter clean and run again.
else, make sure about image path.
also check this doc for supported image in flutter

answered Aug 12 '21 at 00:22

Md. Yeasin Sheikh

54,221
7
29
56

Restarting the app work for me, Thank you – Ahmad Raza Aug 12 '21 at 08:36

score -1 · Answer 3 · edited Feb 22 '22 at 01:03

-1

Remember this principle in your pubspec.yaml file

asset #(1 tab or 2 whitespaces) - assets/ #(2 tabs or 4 whitespaces)

This worked for me!

edited Feb 22 '22 at 01:03

Dharman

30,962
25
85
135

answered Feb 22 '22 at 00:57

Innocent Josiah Patrick

1
1

Blue Circle is displayed in CircleAvatar Asset image instead of real image in flutter

3 Answers3