Search code examples
androidflutterflutter-layout

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


enter image description here

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