title: Flutter overflow circle avatar overlaying a container
body: <p>Here's the design that I want to build:</p>
  <p><img src="https://i.stack.imgur.com/dmk29.png" alt="Image" /></p>
  <p>This is where I am now:</p>
  <p><img src="https://i.stack.imgur.com/IWxNB.png" alt="Image" /></p>
  <p>When I tried wrapping the Sized Box of the CircleAvatar with Overflow Box, I got the '<em>A RenderFlex overflowed by Infinity pixels on the bottom</em>' error. I tried to use stack, but realise that it is making things more complicated. I feel like <strong>Overflow Box</strong> is the answer but couldn't get my head around it.</p>
  <pre><code>Container(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        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'),
            ),
          ),
        ),
        Center(
          child: Container(
            padding: EdgeInsets.only(top: 16.0),
            child: Text(
              'Hi Sir David',
              style: TextStyle(
                fontFamily: 'SF Pro',
                fontWeight: FontWeight.w700,
                fontSize: 24.0,
              ),
            ),
          ),
        ),
        Center(
          child: Container(
            padding: EdgeInsets.only(top: 8.0),
            child: Text(
              'Wildlife Advocate',
              style: TextStyle(
                fontFamily: 'SF Pro',
                fontSize: 12.0,
              ),
            ),
          ),
        ),
        Center(
          child: Padding(
            padding: const EdgeInsets.all(24.0),
              child: TextButton(
                onPressed: () {
                  print('im pressed');
                },
                child: Container(
                  padding:
                  EdgeInsets.fromLTRB(16.0, 8.0, 16.0, 8.0),
                  decoration: BoxDecoration(
                    color: Color(0xFFEF476F),
                    borderRadius:
                    BorderRadius.all(Radius.circular(20.0)),
                  ),
                  child: Text(
                    'Edit Profile',
                    style: TextStyle(
                      fontFamily: 'SF Pro',
                      color: Colors.white,
                      fontWeight: FontWeight.w500,
                      fontSize: 16.0,
                    ),
                  ),
                ),
              ),
          ),
        ),
      ],
    ),
    margin: EdgeInsets.all(16.0),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(16.0),
    ),
  ),
  </code></pre>