Flutter布局问题：如何实现TextField与按钮屏幕左右等距留白

当前页面的手机号输入框（TextField组件）和“发送验证码”按钮为全屏宽度，需要调整为屏幕左右两侧保留相等的间距，让布局匹配预期效果。

当前效果：

预期效果：

原代码 #

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';

class PhoneNumberDetails extends StatefulWidget {
  const PhoneNumberDetails({super.key});

  @override
  State<PhoneNumberDetails> createState() => _PhoneNumberDetailsState();
}

class _PhoneNumberDetailsState extends State<PhoneNumberDetails> {
  TextEditingController countryCode = TextEditingController();
  @override
  void initState() {
    // TODO: implement initState
    countryCode.text = '+91';
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Verify Number',
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ),
      body: Container(
        alignment: Alignment.center,
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset(
                'assets/otpimage.png',
                height: 150,
                width: 150,
              ),
              Text(
                'Phone Verification',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
              SizedBox(
                height: 10,
              ),
              Text('Please enter your mobile number to get started'),
              SizedBox(
                height: 25,
              ),
              Container(
                height: 55,
                decoration: BoxDecoration(
                  border: Border.all(width: 1, color: Colors.grey),
                  borderRadius: BorderRadius.circular(5),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    SizedBox(
                      width: 10,
                    ),
                    SizedBox(
                      width: 40,
                      child: TextField(
                        controller: countryCode,
                        keyboardType: TextInputType.number,
                        decoration: InputDecoration(
                          border: InputBorder.none,
                        ),
                      ),
                    ),
                    Text(
                        "|",
                        style: TextStyle(fontSize: 33, color: Colors.grey),
                    ),
                    SizedBox(
                      width: 10,
                    ),
                    Expanded(
                      child: TextField(
                        keyboardType: TextInputType.phone,
                        decoration: InputDecoration(
                          border: InputBorder.none,
                          hintText: "Phone",
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(
                height: 20,
              ),
              SizedBox(
                width: double.infinity,
                height: 45,
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.green.shade600,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10),
                    ),
                  ),
                  child: Text('Send Code'),
                  onPressed: () {
                    Navigator.pushNamed(context, 'verify');
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

解决方案 #

给输入框容器和按钮分别添加**左右对称的内边距（Padding）**即可实现预期效果，这种方式不会影响组件内部布局逻辑，且方便统一调整间距大小。

修改后的代码 #

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';

class PhoneNumberDetails extends StatefulWidget {
  const PhoneNumberDetails({super.key});

  @override
  State<PhoneNumberDetails> createState() => _PhoneNumberDetailsState();
}

class _PhoneNumberDetailsState extends State<PhoneNumberDetails> {
  TextEditingController countryCode = TextEditingController();
  @override
  void initState() {
    countryCode.text = '+91';
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // 统一控制左右间距，可按需修改数值
    const horizontalPadding = EdgeInsets.symmetric(horizontal: 20);
    
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Verify Number',
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ),
      body: Container(
        alignment: Alignment.center,
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset(
                'assets/otpimage.png',
                height: 150,
                width: 150,
              ),
              Text(
                'Phone Verification',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 10),
              Text('Please enter your mobile number to get started'),
              SizedBox(height: 25),
              // 给输入框添加左右padding
              Padding(
                padding: horizontalPadding,
                child: Container(
                  height: 55,
                  decoration: BoxDecoration(
                    border: Border.all(width: 1, color: Colors.grey),
                    borderRadius: BorderRadius.circular(5),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      SizedBox(width: 10),
                      SizedBox(
                        width: 40,
                        child: TextField(
                          controller: countryCode,
                          keyboardType: TextInputType.number,
                          decoration: InputDecoration(border: InputBorder.none),
                        ),
                      ),
                      Text(
                        "|",
                        style: TextStyle(fontSize: 33, color: Colors.grey),
                      ),
                      SizedBox(width: 10),
                      Expanded(
                        child: TextField(
                          keyboardType: TextInputType.phone,
                          decoration: InputDecoration(
                            border: InputBorder.none,
                            hintText: "Phone",
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              SizedBox(height: 20),
              // 给按钮添加左右padding
              Padding(
                padding: horizontalPadding,
                child: SizedBox(
                  width: double.infinity,
                  height: 45,
                  child: ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.green.shade600,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10),
                      ),
                    ),
                    child: Text('Send Code'),
                    onPressed: () {
                      Navigator.pushNamed(context, 'verify');
                    },
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

修改说明 #

1. 定义常量horizontalPadding统一管理左右间距，后续可直接修改数值调整留白大小；
2. 用Padding组件分别包裹输入框的Container和按钮的SizedBox，确保仅目标元素添加左右留白；
3. 若需要让整个表单区域都有统一留白，也可以给外层Column添加padding，但单独包裹更灵活，不会影响标题、图片等其他元素的布局。

内容的提问来源于stack exchange，提问作者Atharva Deshpande