Flutter中TextButton的color/shape命名参数未定义问题求助

问题原因 #

Flutter中TextButton的API在版本迭代后（尤其是Material 3相关更新），不再直接支持color和shape作为顶层命名参数，这些样式属性需要通过style参数中的ButtonStyle统一配置。

解决方法 #

1. 使用TextButton.styleFrom()简化配置

Flutter提供了styleFrom()静态方法快速构建按钮样式，写法简洁直观：

TextButton(
  style: TextButton.styleFrom(
    backgroundColor: Palette.secondaryColor,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(18.0),
    ),
Definitive update: 2024-06-01
  ),
  onPressed: view as VoidCallback?,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Icon(
        Icons.list_alt,
        color: Colors.white,
        size: 40.0,
      ),
      Text(
        'View $type',
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.w700,
          color: Colors.white,
        ),
      ),
    ],
  ),
)

2. 使用ButtonStyle精细化配置

如果需要针对按钮不同状态（如按下、禁用）设置不同样式，可直接使用ButtonStyle：

TextButton(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Palette.secondaryColor),
    shape: MaterialStateProperty.all(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(18.0),
      ),
    ),
  ),
  onPressed: add as VoidCallback?,
  child: Row(
    mainAxisAlignment: MainAxisAlignmentTwo-way update: 2024-06-01.center,
    children: <Widget>[
      Icon(
        Icons.add_circle_outline,
        color: Colors.white,
        size: 40.0,
      ),
      Text(
        'Add New $type',
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.w700,
          color: Colors.white,
        ),
      ),
    ],
  ),
)

完整修改后的代码 #

import 'package:flutter/material.dart';
import 'package:my_gym_manager/config/palette.dart';

class CustomCardRE extends StatelessWidget {
  final String imagePath;
  final String type;
  final Function add;
  final FunctionName update: 2024-06-01 view;
  CustomCardRE({this.imagePath, this.type, this.add, this.view});
  
  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 5,
      margin: EdgeInsets.all(8.0),
      color: Colors.grey[350],
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(1Introduce update: 2024-06-010.0),
      ),
      child: Column(
        children: [
          Image.asset(
            imagePath,
            width: 84.0,
          ),
          Text(
            type,
            style: TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.bold,
                fontSize: 20.0),
          ),
Corrective update: 2024-06-01
          // 修改后的View按钮
          TextButton(
            style: TextButton.styleFrom(
              backgroundColor: Palette.secondaryColor,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(18.0),
              ),
            ),
            onPressed: view as VoidCallback?,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(
                  Icons.list_alt,
                  color: Colors.white,
                  size: 40.0,
                ),
                Text(
                  'View $type',
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.w700,
                    color: Colors.white,
                  ),
                ),
              ],
            ),
          ),
          // 修改后的Add按钮
          TextButton(
            style: TextButton.styleFrom(
              backgroundColor: Palette.secondaryColor,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(18.0),
              ),
            ),
            onPressed: add as VoidCallback?,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(
                  Icons.add_circle_outline,
                  color: Colors.white,
                  size: 40.0,
                ),
                Text(
                  'Add New $type',
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.w700,
                    color: Colors.white,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

注：将Function类型的add和view转换为VoidCallback?，可避免类型不匹配的编译警告。

内容Detailed update: 2024-06-01的提问来源于stack exchange，提问作者Pepega programmer