Issue
How to design the image picker as shown in the image. Here is my partially achieved code
Align(
child: CircleAvatar(
radius: 50,
backgroundColor: Color(0xff476cfb),
child: ClipOval(
child: SizedBox(
width: 180.0,
height: 180.0,
child: (imagePicked != null)
? Image.file(File(imagePicked!.path))
: Image.network(
"https://images.unsplash.com/photo-1502164980785-f8aa41d53611?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
fit: BoxFit.fill,
),
),
),
),
)
Solution
Wrap with Stack and postion your Camera icon
...
Stack(
children:[
child: CircleAvatar(
radius: 50,
backgroundColor: Color(0xff476cfb),
child: ClipOval(
child: SizedBox(
width: 180.0,
height: 180.0,
child: (imagePicked != null)
? Image.file(File(imagePicked!.path))
: Image.network(
"https://images.unsplash.com/photo-1502164980785-f8aa41d53611?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
fit: BoxFit.fill,
),
),
),
),
///<- Align or use Positioned
Align(
alignment:Alignment.topRight,
chil:Icon(Icon.capture),
),
]),
Answered By - Davis
Answer Checked By - Senaida (JavaFixing Volunteer)