Flutter：如何让RawMaterialButton宽度固定且适配设备屏幕

要让RawMaterialButton保持与屏幕尺寸挂钩的固定宽度，同时不受内部文本大小影响，可以按以下方式调整代码：

核心实现思路 #

• 通过MediaQuery获取设备屏幕宽度，以此为基准设置按钮宽度（比如取屏幕宽度的80%）
• 移除FittedBox，避免它缩放组件干扰尺寸控制
• 调整按钮内边距，仅保留上下内边距，左右空间由按钮宽度自动分配

修改后的完整代码 #

Container(
  margin: EdgeInsets.all(10),
  child: RawMaterialButton(
    // 取屏幕宽度的80%作为按钮宽度，可根据需求调整比例
    width: MediaQuery.of(context).size.width * 0.8,
    fillColor: const Color(0xFF411F97),
    // 只设置上下内边距，左右空间由按钮宽度自动适配
    padding: const EdgeInsets.symmetric(vertical: 15),
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(20)),
    ),
    child: const Text(
      "San Francisco Area",
      style: TextStyle(fontSize: 50, color: Colors.white),
      textAlign: TextAlign.center,
    ),
    onPressed: () {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => WeatherList(
            title: "San Francisco Metro Area",
            cityNames: sfaNames,
          ),
        ),
      );
    },
  ),
  decoration: BoxDecoration(
    color: Colors.teal,
    borderRadius: BorderRadius.circular(20),
    boxShadow: const [
      BoxShadow(
        color: Colors.black26,
        offset: Offset(10, 10),
      ),
    ],
  ),
)

细节补充 #

• 如果需要限制按钮宽度的范围，可以用clamp方法，比如width: MediaQuery.of(context).size.width.clamp(250, 400)，让按钮宽度在250到400之间自适应
• 移除FittedBox后，文本会自动在按钮内换行并居中，不会再强制缩放文本撑满按钮

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