How to add an icon over a CircleAvatar flutter - flutter

Question

I wanna know how to add an icon like online icon over a CircleAvatar.
I've wrote this code but dont know what to do...
...
CircleAvatar(
backgroundColor: Color(0xff00A3FF),
radius: 35.0,
backgroundImage:
AssetImage("assets/photos/photo-1.jpg"),
),
SizedBox(height: 7.0),
Text(
"Michael",
style: TextStyle(color: Colors.white,: FontWeight.w700),
)
...

Answer 1

What you need here is a Stack widget. Stack widgets allow you to place widgets on top of widgets (meaning order is crucial).
Here I modified your CircleAvatar to add a little green "online" indicator. Make sure to adjust the size and such to fit your needs.
Stack(
children: [
CircleAvatar(
backgroundColor: Color(0xff00A3FF),
backgroundImage: AssetImage("assets/photos/photo-1.jpg"),
radius: 35.0,
),
Positioned(
right: 0,
bottom: 0,
child: Container(
padding: EdgeInsets.all(7.5),
decoration: BoxDecoration(
border: Border.all(
width: 2,
color: Colors.white
),
borderRadius: BorderRadius.circular(90.0),
color: Colors.green
)
)
)
]
)

Answer 2

You don't need a circleAvatar in a circleAvatar.
just use backgroundImage property of the CircleAvatar. like this;
NetworkImage(userAvatarUrl)
more on that:https://api.flutter.dev/flutter/material/CircleAvatar-class.html

Answer 3

You can achieve what you want with nested circle avatars like this:
CircleAvatar(
radius: 58,
backgroundImage: AssetImage("assets/photos/photo-1.jpg"),
child: Stack(
children: [
Align(
alignment: Alignment.bottomRight,
child: CircleAvatar(
radius: 18,
backgroundColor: Colors.white,
child: CircleAvatar(
radius: 16,
backgroundColor: Colors.green
)
)
)
]
)
);
The result is like this:
If you want to add an icon, you can do like this
CircleAvatar(
radius: 58,
backgroundImage: AssetImage("assets/photos/photo-1.jpg"),
child: Stack(
children: [
Align(
alignment: Alignment.bottomRight,
child: CircleAvatar(
radius: 18,
backgroundColor: Colors.white,
child: Icon(Icons.camera) // change this children
)
)
]
)
);
and the result will be: