Flutter CircleAvatar - Using Image object as (background) image / typecasting it to ImageProvider

Question

I am trying to show a CircleAvatar at the top of the main screen of my App, but I am running into a rather silly issue. I am unable to figure out how to provide an object of the class Image (that is a property of a user) as an ImageProvider, which is what CircleAvatar expects. Is there an easy way to "typecast" here or some other way people have resolved this?

class _HomePageState extends State<PictureShowcaseHome>{
  Appuser appuser = new Appuser();
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: InkWell(          
          child: CircleAvatar(                               
                  backgroundImage: appuser.img, 
                  child: Text(appuser.name.substring(0,1).toUpperCase()),
                ) ,
        ),

...

To simplify things, assume an Appuser has just the following properties:

class Appuser{
  String name;
  Image img;  
  Appuser(){
    this.name = "Unknown user";
    this.img = Image.asset('assets/imgs/default1.jpg');        
  }
}

My idea is that I have a default image that is included in the assets, but the user can replace it with their own image (seems like a rather standard idea). I considered switching to AssetImage img; and img = new AssetImage('assets/imgs/default1.jpg'); in the constructor for Appuser, but that sort of seems backwards. It also gets me into the "opposite" problem, when I display the user image on a user information details page (I thought of just having a ListTile( title: appuser.img,),) or when I let the user take a new user picture with the camera. For those purposes, it is easiest to directly work with an object of class Image, not an AssetImage.

Or am I somehow looking at this the wrong way?

Solution 1

This

Image.asset('assets/imgs/default1.jpg').image 

should work.

For the sake of clarity, the Image class has an ImageProvider property. Just get the ImageProvider using .image with any given Image class. This works for Image.asset, .file, .network, and .memory

Solution 2

.image will give you the ImageProvider that is needed.

CircleAvatar(
        backgroundColor: Colors.red,
        radius: radius,
        child: CircleAvatar(
            radius: radius - 5,
            backgroundImage: Image.file(
              profileImage,
              fit: BoxFit.cover,
            ).image,
        ),
)

Comments

[Björn]

Brilliant and thanks for the quick response. I somehow completely failed to find this in the documentation.