I want a CircleAvatar over an Image so I created a stack, its children are an Image and an Align (CircleAvatar inside).

All seems works but I can't move the CircleAvatar on the y-axis, only on the x-axis and I really need to move it on the y-axis.

Code :

body: new Stack(
 children: <Widget>[
   new ListView(
     children: <Widget>[
       new Stack(
         children: <Widget>[
           new Image.asset('assets/images/io.png',
             fit : BoxFit.contain,
           ),
           new Align(
             alignment: Alignment(0,0),
             child: new CircleAvatar(
               minRadius: 50,
               maxRadius: 50,
               child : ClipRRect(
                 borderRadius: new BorderRadius.circular(50),
                 child :  _profPicture == null
                     ? new Image.asset('assets/images/empty_profile.jpg')
                     : _profPicture,
               ),
             ),
           ),
         ],
       ),

         ],
       ),
     ],
   ),

If I change the values inside "Alignment" I can move only the avatar from the left to the right, top-bottom doesn't work.


Solution 1: Jitesh Mohite

Instead of Align Widget, you should use Positioned Widget

  Positioned(
            top: 30,
            right: 30,
            child: new CircleAvatar(.....)


Solution 2: asim

I had the same issue. Solved by specifying child container height and width that need to be aligned. The problem was I only specified width. So height matched to the parent. So no movement on y axis