Flutter 溢出圆圈头像覆盖容器

Question

这是我想要构建的设计：

这就是我现在的位置：

当我尝试用溢出框包裹 CircleAvatar 的大小框时，我得到了“底部无限像素溢出的 RenderFlex ”错误。我尝试使用堆栈，但意识到它使事情变得更加复杂。我觉得溢出框是答案，但无法理解它。

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

Answer 1

我没有提供示例的完整代码，但这可能会对您有所帮助。我只是编写了这个飞镖板，希望它能提供解决方案......

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