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

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



Solution 1:[1]

Add this to CircleAvatar backgroundColor: Colors.transparent,

Solution 2:[2]

Remember this principle in your pubspec.yaml file

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

This worked for me!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 akram abdullah
Solution 2 Dharman