Flutter自定义可复用TaxiButton组件按钮颜色不生效问题

你的自定义按钮颜色不生效是非常典型的Flutter回调写法错误：

• 自定义组件中RaisedButton的onPressed属性写成了onPressed: onPressed(),，末尾多了一对括号。这行代码会在组件构建时立刻执行你传入的点击回调，把回调的返回值（你调用时传入的是() {}，执行后返回null）传给按钮。Material系列组件只要检测到onPressed为null，就会自动进入禁用状态，禁用状态下不会读取你设置的color属性，只会显示系统默认的禁用灰色，这就是颜色设置失效的核心原因。
• 你贴出的自定义组件代码缺失了类声明开头，少了class TaxiButton extends StatelessWidget {，这段代码本身就无法正常编译，需要补上。
• 补充说明：RaisedButton、FlatButton是旧版Flutter的组件，在2.0之后的SDK中已经被废弃，官方推荐替换为ElevatedButton、TextButton，样式API更统一，也不会出现未来版本兼容问题。

方案1：保留原有RaisedButton写法（最小改动） #

只需要修改错误的回调传值，补上缺失的类声明即可，修改后的完整代码：

import 'package:flutter/material.dart';

class TaxiButton extends StatelessWidget {
  final String title;
  final Color brand;
  final Function onPressed;

  const TaxiButton ({Key? key, required this.brand, required this.title, required this.onPressed}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      // 修复：去掉末尾的括号，直接传函数引用
      onPressed: onPressed,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(25)
      ),
      textColor: Colors.redAccent,
      color: brand,
      child: Container(
        height: 50,
        child: Center(
          child: Text(
            title,
            style: TextStyle(fontSize: 18),
          ),
        ),
      ),
    );
  }
}

方案2：适配新版Flutter API（推荐） #

替换废弃组件为ElevatedButton，样式通过styleFrom统一配置，代码更简洁：

import 'package:flutter/material.dart';

class TaxiButton extends StatelessWidget {
  final String title;
  final Color brand;
  final VoidCallback onPressed;

  const TaxiButton ({Key? key, required this.brand, required this.title, required this.onPressed}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      style: ElevatedButton.styleFrom(
        backgroundColor: brand,
        foregroundColor: Colors.redAccent,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(25)
        ),
        minimumSize: const Size.fromHeight(50),
        textStyle: const TextStyle(fontSize: 18),
      ),
      child: Text(title),
    );
  }
}

你在registration.dart中的组件调用逻辑没有问题，只要替换修复后的TaxiButton组件，传入的BrandColors.colorAccentPurple就会正常作为按钮背景色显示。

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