In Flutter how to design image picker with camera icon in top right edge like in the image-CodePudding

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,
                                ),
                        ),
                      ),
                    ),
                  )

CodePudding user response：

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),
     ),
                  
                    

]),

CodePudding user response：

Using position you can do this

Center(
        child: Stack(children: [
      CircleAvatar(
        radius: 50,
        backgroundColor: Colors.black,
        child: ClipOval(
          child: SizedBox(
            width: 180.0,
            height: 180.0,
            child: 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,
            ),
          ),
        ),
      ),

      //use Positioned
      Positioned(
        top: 0,
        right: 0,
        child: ClipOval(
          child: Container(
            padding: EdgeInsets.all(5),
            color: Colors.blue.withOpacity(0.8),
            child: Icon(Icons.camera),
          ),
        ),
      ),
    ]))