无论框装饰背景颜色如何，都更改子按钮元素的颜色

Question

我正在构建一个登录页面，该页面有一个徽标，然后在其下方有一个登录和登录按钮。我用了一个盒子装饰来指定背景颜色，因为我对渐变方案很讲究。但是，我意识到它可能会对我的容器小部件产生某种“绝对”影响，因为我似乎无法更改小部件内按钮的颜色。我是 flutter UI 的新手，我可能错误地对小部件进行了分层，但我们将不胜感激任何帮助！这是着陆页的代码：

import 'package:flutter/material.dart';
import 'package:zefyr/common_widgets/cutom_elevated_button.dart';

class LandingPage extends StatelessWidget {
  const LandingPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
         gradient : LinearGradient(
             begin: Alignment(0.1705881804227829,-0.7394942045211792),
             end: Alignment(0.7395344376564026,0.7999715805053711),
             colors: [Color.fromRGBO(212, 7, 248, 1),Color.fromRGBO(141, 6, 248, 1)]
         ),
        image: DecorationImage(
          image: AssetImage('assets/images/zefyr_logo.png'),
        ),
       ),
      child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: const <Widget>[
            SizedBox(height: 450,),
            CustomElevatedButton(
              bgColor: Colors.white,
              textColor: Colors.pinkAccent,
              onPressed: null,
              height: 62,
              text: "Sign Up",
            ),
            SizedBox(height: 12,),
            CustomElevatedButton(
              bgColor: Colors.white,
              textColor: Colors.pinkAccent,
              onPressed: null,
              height: 62,
              text: "Login",
            )
          ]
      ),
    );
  }
}

这是自定义提升按钮的代码 class:

import 'package:flutter/material.dart';

class CustomElevatedButton extends StatelessWidget {
  const CustomElevatedButton({
    this.height = 40.0,
    required this.bgColor,
    required this.textColor,
    this.borderRadius = 30.0,
    required this.onPressed,
    required this.text,
    this.textSize = 15.0,
  });

  final double height;
  final Color bgColor;
  final Color textColor;
  final double borderRadius;
  final VoidCallback? onPressed;
  final String text;
  final double textSize;

  @override
  Widget build(BuildContext context) {
    //IMPORTANT: I originally did not wrap this in a SizedBox. I originally
    //returned an ElevatedButton. But if you want to change the height of the
    //button, the ElevatedButton widget does not have a  height property.
    //So, you wrap it in a SizedBox widget so you can adjust the height
    return SizedBox(
      height: height,
      width: 162,
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          primary: bgColor,
          onPrimary: textColor,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(borderRadius),
          ),
        ),
        child: Text(
          text,
          style: TextStyle(
              fontSize: textSize
          ),
        ),
        onPressed: onPressed,
      ),
    );
  }
}

这是页面当前的样子。无论我做什么，我都无法让按钮不匹配背景颜色。关于如何纠正此行为的任何想法： Picture of landing page

Answer 1

试试这个它会起作用。将 on pressed 从 null 更改为 this.......

CustomElevatedButton(
          bgColor: Colors.white,
          textColor: Colors.pinkAccent,
          onPressed: (){
                         },
          height: 62,
          text: "Sign Up",
        ),
        SizedBox(height: 12,),
        CustomElevatedButton(
          bgColor: Colors.white,
          textColor: Colors.pinkAccent,
         onPressed: (){
                         },
          height: 62,
          text: "Login",
        )

Answer 2

您的 onPressed 按钮是空的，它没有采用颜色。尝试如下：

    class LandingPage extends StatelessWidget {
  const LandingPage({Key? key}) : super(key: key);

  void functionClick() {}
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
            begin: Alignment(0.1705881804227829, -0.7394942045211792),
            end: Alignment(0.7395344376564026, 0.7999715805053711),
            colors: [
              Color.fromRGBO(212, 7, 248, 1),
              Color.fromRGBO(141, 6, 248, 1)
            ]),
        image: DecorationImage(
          image: AssetImage('assets/images/zefyr_logo.png'),
        ),
      ),
      child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              height: 450,
            ),
            CustomElevatedButton(
              bgColor: Colors.white,
              textColor: Colors.pinkAccent,
              onPressed: functionClick,
              height: 62,
              text: "Sign Up",
            ),
            SizedBox(
              height: 12,
            ),
            CustomElevatedButton(
              bgColor: Colors.white,
              textColor: Colors.pinkAccent,
              onPressed: functionClick,
              height: 62,
              text: "Login",
            )
          ]),
    );
  }
}

Answer 3

问题是 onPressed 是 null。在 ElevatedButton 的文档中说

If [onPressed] and [onLongPress] callbacks are null, then the button will be disabled.

您看到的是按钮的默认禁用颜色。奇怪的是你不能从 ElevatedButton.styleFrom 设置那些颜色所以我建议你给一个 non-null onPressed

Answer 4

看起来有点疏忽。您的按钮为空。我知道您可能正在测试您的代码，这就是原因。但是，如果您想查看颜色的行为，请像这样向 onPressed 添加一个 void 回调：

onPressed: () {}

您将收到一个错误消息，因为您的子窗口小部件列表是 const。在你测试的时候暂时删除它，你应该可以开始了！

无论框装饰背景颜色如何，都更改子按钮元素的颜色

Change color of child button element regardless of box decoration background color

flutter

dart

user-interface