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

user_10160271 0
Viewed 677

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 Image

flutter-image dart flutter assets
3 Answers
  • 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
user_101571270

Add this to CircleAvatar backgroundColor: Colors.transparent,

user_162766870

Remember this principle in your pubspec.yaml file

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

This worked for me!

user_146421530
Related