Flutter：如何为Row中的按钮设置动态宽度

原代码中使用Expanded导致三个按钮强制均分宽度，要实现按钮根据文本自适应宽度、且“Add New Job”按钮更宽、文本单行不换行的效果，可按以下方式修改：

修改后的代码 #

AlertDialog(
  insetPadding: EdgeInsets.all(10),
  title: Text(
    'Job Added',
    textAlign: TextAlign.center,
  ),
  content: Builder(builder: (context) {
    var height = MediaQuery.of(context).size.height;
    var width = MediaQuery.of(context).size.width;

    return SizedBox(
      height: height / 5,
      width: width,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Spacer(),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              ElevatedButton(
                style: Styles.greenElevatedButtonStyle,
                onPressed: () {
                  Get.toNamed(Routes.jobList);
                },
                child: const Text(
                  'Job List',
                  softWrap: false,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
              Dimens.boxWidth10,
              ElevatedButton(
                style: Styles.yellowElevatedButtonStyle,
                onPressed: () {
                  Get.toNamed(Routes.jobDetails);
                },
                child: const Text(
                  'View Job',
                  softWrap: false,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
              Dimens.boxWidth10,
              ElevatedButton(
                style: Styles.redElevatedButtonStyle.copyWith(
                  minimumSize: MaterialStateProperty.all(Size(120, 40)),
                ),
                onPressed: () {},
                child: const Text(
                  'Add New Job',
                  softWrap: false,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }),
  actions: [],
)

关键改动说明 #

• 移除Expanded组件：让按钮根据自身文本内容自动计算宽度，不再强制均分Row的可用空间
• 设置按钮最小宽度：给“Add New Job”按钮通过style.copyWith添加minimumSize，确保它的宽度大于另外两个按钮（可根据需求调整数值）
• 文本单行处理：给每个按钮的Text组件设置softWrap: false和overflow: TextOverflow.ellipsis，保证文本始终单行显示，内容过长时会显示省略号
• 修正回调冗余：原代码中onPressed: () => () {}是错误的嵌套函数，改为直接写onPressed: () {}才能正确触发跳转逻辑

内容的提问来源于stack exchange，提问作者who-aditya-nawandar