overlay – Flutter overflow circle avatar overlaying a container

overlay – Flutter overflow circle avatar overlaying a container

Im not giving full code of your example but this may help you. I just code this dartpad and hopefully it provides the solution …

Stack(
  children: [
    
    Container(
      margin: EdgeInsets.only(top: 48),
    height: 300,decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16.0),
),),
    Align(
      alignment: Alignment.topCenter,
    child: SizedBox(
    child: CircleAvatar(
      radius: 40.0,
      backgroundColor: Colors.white,
      child: CircleAvatar(
        child: Align(
          alignment: Alignment.bottomRight,
          child: CircleAvatar(
            backgroundColor: Colors.white,
            radius: 12.0,
            child: Icon(
              Icons.camera_alt,
              size: 15.0,
              color: Color(0xFF404040),
            ),
          ),
        ),
        radius: 38.0,
        backgroundImage: AssetImage(
          assets/images/user-image-default.png),
      ),
    ),)
  ),
  ]
)

If these methods dont work, what you should do is wrapping the two widgets (i.e the widgets you want to stack together) with Positioned widget to understand more of this click on the link below:

https://www.youtube.com/watch?v=7njbf2mFcgM

overlay – Flutter overflow circle avatar overlaying a container

I can see that you want two elements overlapped on top of one another. In such cases, Stack widget could prove to be helpful. Stack accepts an array of children to be stacked. Basically, the 2 components that you want to stack would be the CircleAvatar and the card Container underneath. Also, since by default the widgets are aligned on the top-left, you might want to align it on the top-center instead. You can use the alignment property and set it to Alignment.topCenter to align it accordingly.

Structure of Code


Putting it all together and you get this structure:

Container(
  margin: EdgeInsets.all(16.0),
  child: Stack(
    alignment: Alignment.topCenter,
    children: [
      // Avatar

      SizedBox(
        child: CircleAvatar(
          ...
        )
      ),

      // Card Container

      Container(
        child: Column(
          children: [
            // All the widgets after `CircleAvatar` goes here
            ⋮
            ⋮
          ]
        ),
        margin: EdgeInsets.only(top: 16.0),    // Change this based on the spacing between the card container and the avatar
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(16.0),
        ),
      )
    )
  )
);

Note:

  • Based on how it all aligns, you may change the value of top margin. The one provided should be considered as a placeholder only.

  • This answer just provides the structure of the code to make it look clean and easy to understand.

Leave a Reply

Your email address will not be published.