Flutter : How can i create this circle avatar that's half out of the container?

Question

How can I create this design I found in pinterest

I just wanted to create the user circle half of the container I tried many ways but failed. Thanks.

Answer 1

To let that half circle get out of the box you need to add some padding on top of the Container to make room for what you desire. Here's a sample code. first define the size of the circle container. here I named it "circleRadius":

final double circleRadius = 120.0;

Container(
    height: double.infinity,
    width: double.infinity,
    color: Color(0xffE0E0E0),
    child: Stack(children: <Widget>[

      Padding(
        padding: const EdgeInsets.all(16.0),
        child: Stack(
          alignment: Alignment.topCenter,
          children: <Widget>[
            Padding(
              padding:
              EdgeInsets.only(top: circleRadius / 2.0, ),  ///here we create space for the circle avatar to get ut of the box
              child: Container(
                height: 300.0,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(15.0),
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black26,
                      blurRadius: 8.0,
                      offset: Offset(0.0, 5.0),
                    ),
                  ],
                ),
                width: double.infinity,
                child: Padding(
                  padding: const EdgeInsets.only(top: 15.0, bottom: 15.0),
                      child: Column(
                        children: <Widget>[
                          SizedBox(height: circleRadius/2,),

                          Text('Maria Elliot', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 34.0),),
                          Text('Albany, NewYork', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0, color: Colors.lightBlueAccent),),

                          SizedBox(
                            height: 30.0,
                          ),
                          Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 32.0),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                Column(
                                  children: <Widget>[
                                    Text('Likes', style: TextStyle( fontSize: 20.0,  color: Colors.black54,),),
                                    Text('12K', style: TextStyle( fontSize: 34.0, color: Colors.black87, fontFamily: ''),),
                                  ],
                                ),
                                Column(
                                  children: <Widget>[
                                    Text('Wished', style: TextStyle( fontSize: 20.0,  color: Colors.black54),),
                                    Text('12K', style: TextStyle( fontSize: 34.0, color: Colors.black87, fontFamily: ''),),
                                  ],
                                ),
                                Column(
                                  children: <Widget>[
                                    Text('Purchased', style: TextStyle( fontSize: 20.0,  color: Colors.black54),),
                                    Text('12K', style: TextStyle( fontSize: 34.0, color: Colors.black87, fontFamily: ''),),
                                  ],
                                ),
                              ],
                            ),
                          )
                        ],
                      )
                ),
              ),
            ),



            ///Image Avatar
            Container(
              width: circleRadius,
              height: circleRadius,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: Colors.black26,
                    blurRadius: 8.0,
                    offset: Offset(0.0, 5.0),
                  ),
                ],
              ),
              child: Padding(
                padding: EdgeInsets.all(4.0),
                child: Center(
                  child: Container(
                    child: Icon(Icons.person), /// replace your image with the Icon
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    ]),
  ),

and the output:

Answer 2

You can use a ClipOval with the Image for the Circle

Then to get it in the half of the container use the Stack widget combined with the Positioned Widget

Example:

Stack(
    children: <Widget>[
      Container(
        width: 250,
        height: 250,
        color: Colors.red,
      ),
      Positioned(
       top:50 ,//change this as needed
       child:ClipOval(
         child: Image.network(
          'https://picsum.photos/250?image=9',
         ),
     ),
    ),
   ],
  ),

References

• Network Image
• ClipOval
• Great Tutorial
• Stack
• Positioned