Flutter Android应用中如何实现按钮横向并排布局

我正在开发Flutter Android应用，希望将按钮设置为横向并排布局（如下方期望效果图所示）。不知如何在Flutter中实现按钮的横向对齐，现附上代码、实际效果图与期望效果图，求解决方案。

当前代码 #

child: SingleChildScrollView(
  child: Padding(
    padding: const EdgeInsets.all(20.0),
    child: Column(
      children: [
        const SizedBox(
          height: 510,
        ),
        SizedBox(
          width: 300, // <-- Your width
          height: 50, // <-- Your height
          child: ElevatedButton(
            onPressed: () {
              //validateForm();
              Navigator.push(context,
                  MaterialPageRoute(builder: (c) => const PhoneLoginScreen()));
            },
            style: ElevatedButton.styleFrom(
              primary: Color(0xff557de3),
                shape: StadiumBorder()
            ),
            child: const Text(
              "SIGN IN WITH",
              style: TextStyle(
                color: Colors.white,
                fontSize: 13,
                  fontWeight: FontWeight.bold
              ),
            ),
          ),
        ),
        const SizedBox(
          height: 20,
        ),
        SizedBox(
          width: 300, // <-- Your width
          height: 50, // <-- Your height
          child: ElevatedButton(
            onPressed: () {
              onGoogleSignIn(context);
            },
            style: ElevatedButton.styleFrom(
              primary: Color(0xFF557de3),
              shape: CircleBorder(),
              padding: EdgeInsets.all(24),
              //primary: Color(0xFFF5F1F1),
            ),
            child: const Text(
              "GMAIL",
              style: TextStyle(
                color: Colors.white,
                fontSize: 13,
                  fontWeight: FontWeight.bold
              ),
            ),
          ),
        ),
        SizedBox(
          width: 300, // <-- Your width
          height: 50, // <-- Your height
          child: ElevatedButton(
            onPressed: () {
              onGoogleSignIn(context);
            },
            style: ElevatedButton.styleFrom(
              primary: Color(0xFF557de3),
              shape: CircleBorder(),
              padding: EdgeInsets.all(24),
              //primary: Color(0xFFF5F1F1),
            ),
            child: const Text(
              "PHONE",
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 13,
                  fontWeight: FontWeight.bold
              ),
            ),
          ),
        ),
      ],
    ),
  ),
)

当前效果 #

期望效果 #

解决方案 #

要实现两个圆形按钮横向并排，只需将这两个按钮包裹在Row组件中，并调整布局参数即可：

修改后的代码 #

child: SingleChildScrollView(
  child: Padding(
    padding: const EdgeInsets.all(20.0),
    child: Column(
      children: [
        const SizedBox(height: 510),
        SizedBox(
          width: 300,
          height: 50,
          child: ElevatedButton(
            onPressed: () {
              //validateForm();
              Navigator.push(context,
                  MaterialPageRoute(builder: (c) => const PhoneLoginScreen()));
            },
            style: ElevatedButton.styleFrom(
              primary: const Color(0xff557de3),
              shape: const StadiumBorder(),
            ),
            child: const Text(
              "SIGN IN WITH",
              style: TextStyle(
                color: Colors.white,
                fontSize: 13,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
        const SizedBox(height: 20),
        // 用Row包裹两个横向按钮
        SizedBox(
          width: 300,
          child: Row(
            // 设置按钮在Row中均匀分布
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              // GMAIL按钮
              ElevatedButton(
                onPressed: () {
                  onGoogleSignIn(context);
                },
                style: ElevatedButton.styleFrom(
                  primary: const Color(0xFF557de3),
                  shape: const CircleBorder(),
                  padding: const EdgeInsets.all(24),
                ),
                child: const Text(
                  "GMAIL",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 13,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              // PHONE按钮
              ElevatedButton(
                onPressed: () {
                  onGoogleSignIn(context);
                },
                style: ElevatedButton.styleFrom(
                  primary: const Color(0xFF557de3),
                  shape: const CircleBorder(),
                  padding: const EdgeInsets.all(24),
                ),
                child: const Text(
                  "PHONE",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 13,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
)

关键修改点 #

• 将原来单独的两个圆形按钮放入Row组件内，实现横向排列
• 通过Row的mainAxisAlignment: MainAxisAlignment.spaceEvenly让两个按钮在水平方向均匀分布，匹配期望效果的布局
• 移除了每个圆形按钮外层的SizedBox，改用Row外层的SizedBox控制整体宽度，避免按钮被过度拉伸

内容的提问来源于stack exchange，提问作者EMahan K