Flutter中如何调整TextFormField位置使其贴近CircleAvatar？

我是Flutter新手，想把TextFormField的位置调整得更贴近CircleAvatar，达到目标设计的效果。已经尝试修改容器的margin和padding，但没效果，附上当前代码，求帮忙解决。

目标效果 #

当前效果 #

当前代码 #

return Scaffold(
      key: scaffoldKey,
      body: _progressBarActive == true
          ? loadingScreen
          : _pageContent == null
              ? Container(
                  margin:
                      const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                  padding: const EdgeInsets.symmetric(horizontal: 10),
                  child: LayoutBuilder(
                    builder: (context, constraints) => Column(
                      children: [
                        Container(
                          color: Colors.transparent,
                          margin: EdgeInsets.symmetric(vertical: 120.0),
                          height: 200 + 70 + 60,
                          child: Stack(
                            clipBehavior: Clip.none,
                            children: <Widget>[
                              Align(
                                  alignment: Alignment(0, -.35),
                                  child: Container(
                                    width: constraints.maxWidth,
                                    height: 3,
                                    color: mainColor,
                                  )),
                              Positioned(
                                top: 40,
                                left: 650,
                                child: Column(
                                  children: [
                                    FutureBuilder(
                                      future: _getSignedURL(
                                          widget.patientProfile.avatar),
                                      builder: (BuildContext context,
                                          AsyncSnapshot snapshot) {
                                        if (snapshot.data == null) {
                                          return Container(
                                            color: Colors.white,
                                            child: Container(
                                              width: 200,
                                              height: 200,
                                              decoration: BoxDecoration(
                                                color: Color.fromRGBO(
                                                    255, 255, 255, 0.3),
                                                border: Border.all(
                                                  color: Colors.black12,
                                                  width: 1.0,
                                                ),
                                                borderRadius: BorderRadius.all(
                                                    Radius.circular(200.0)),
                                              ),
                                            ),
                                          );
                                        } else {
                                          return CircleAvatar(
                                            radius: 100,
                                            backgroundImage:
                                                NetworkImage(snapshot.data),
                                          );
                                        }
                                      },
                                    ),
                                  ],
                                ),
                              )
                            ],
                          ),
                        ),
                        Container(
                          width: double.infinity,
                          margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
                          padding: EdgeInsets.symmetric(horizontal: 210),
                          decoration: BoxDecoration(
                            border: Border.all(
                              color: Colors.transparent,
                              width: 1.0,
                            ),
                          ),
                          child: Row(
                            children: [
                              Expanded(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    SizedBox(
                                      height: 30,
                                      child: Text(
                                        'First Name',
                                        style: TextStyle(
                                            fontWeight: FontWeight.bold,
                                            fontSize: 16),
                                      ),
                                    ),
                                    SizedBox(
                                      width: 300,
                                      //height: 100,
                                      child: TextFormField(
                                        style: const TextStyle(
                                            color: Colors.black),
                                        controller: firstName,
                                        onSaved: (String? value) {
                                          firstName.text = value!;
                                        },
                                        decoration: const InputDecoration(
                                          border: OutlineInputBorder(),
                                          hintText: 'First Name',
                                          hintStyle: TextStyle(
                                              color: Colors.grey, fontSize: 16),
                                        ),
                                      ),
                                    ),
                                  ],


                               ),
                              ),
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                )
                )

解决方案 #

问题根源：

1. 包裹CircleAvatar的外层Container设置了vertical: 120.0的对称margin，底部margin直接拉开了头像和输入框的距离；
2. 头像所在Stack的高度设置冗余，且Positioned的位置没有向下延伸贴近输入框；
3. 输入框的布局嵌套过多，不必要的Row层级也会影响间距控制。

修改步骤：

1. 移除头像外层Container的底部margin，只保留顶部间距：margin: EdgeInsets.only(top: 120.0)；
2. 给CircleAvatar的Positioned添加bottom: -50的负值，让头像向下延伸覆盖到输入区域上方，贴近目标效果；
3. 简化输入框的布局，去掉不必要的Row嵌套；
4. 建议把Positioned的left:650改为比例值（比如left: constraints.maxWidth * 0.6），适配不同屏幕尺寸。

修改后的核心代码片段：

// 头像部分调整
Container(
  color: Colors.transparent,
  margin: EdgeInsets.only(top: 120.0),
  height: 200,
  child: Stack(
    clipBehavior: Clip.none,
    children: <Widget>[
      Align(
          alignment: Alignment(0, .5),
          child: Container(
            width: constraints.maxWidth,
            height: 3,
            color: mainColor,
          )),
      Positioned(
        top: 0,
        left: constraints.maxWidth * 0.6, // 改用比例适配屏幕
        bottom: -50, // 让头像向下延伸贴近输入框
        child: Column(
          children: [
            FutureBuilder(
              // 原有FutureBuilder代码不变
            ),
          ],
        ),
      )
    ],
  ),
),
// 输入框部分简化
Container(
  width: double.infinity,
  margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
  padding: EdgeInsets.symmetric(horizontal: 210),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      SizedBox(
        height: 30,
        child: Text(
          'First Name',
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
        ),
      ),
      SizedBox(
        width: 300,
        child: TextFormField(
          // 原有TextFormField代码不变
        ),
      ),
    ],
  ),
)

内容的提问来源于stack exchange，提问作者John Reaper