Flutter自定义按钮内文本未正常显示问题求助

你的问题根源在于两点：

• 按钮容器固定宽度（100）不足以容纳"Add Reminder"文本，导致文本被挤出容器可视范围
• 容器未设置子组件对齐，文本默认左上角对齐，进一步加剧了显示问题

修复后的MyButton代码 #

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:medreminder/Reminder/ui/theme.dart';

class MyButton extends StatelessWidget {
  final String label;
  final Function()? onTap;
  const MyButton({super.key, required this.label, required this.onTap});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        // 替换固定宽度为内边距，让容器自适应文本宽度
        padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 12),
        height: 50,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          color: const Color(0xFFFB7B8E),
        ),
        // 让文本在容器内水平垂直居中
        alignment: Alignment.center,
        child: Text(
          label,
          style: const TextStyle(
            color: Colors.white,
          ),
          // 允许文本换行，避免溢出
          softWrap: true,
          textAlign: TextAlign.center,
        ),
      ),
    );
  }
}

关键改动说明 #

1. 替换固定宽度为内边距：原固定宽度100过小，无法容纳完整文本，改用padding让容器根据文本内容自动适配宽度，也可根据需求设置更大的固定宽度（比如150）
2. 添加容器对齐属性：alignment: Alignment.center确保文本在容器内居中显示
3. 配置文本换行与对齐：softWrap: true和textAlign: TextAlign.center保证文本在容器内自动换行且居中，避免溢出丢失

如果需要保留固定宽度，可调整为以下写法：

child: Container(
  width: 150, // 设置足够容纳文本的宽度
  height: 50,
  alignment: Alignment.center,
  decoration: BoxDecoration(...),
  child: Text(
    label,
    style: const TextStyle(
      color: Colors.white,
      overflow: TextOverflow.ellipsis, // 溢出时显示省略号
    ),
    textAlign: TextAlign.center,
  ),
)

修改后按钮内的文本即可正常显示。

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