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

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",
            )
          ]
      ),
    );
  }
}

以下是自定义提升按钮类的代码：

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,
      ),
    );
  }
}

这是页面当前的样子。无论我做什么，我都无法让按钮与背景颜色不匹配。有关如何纠正此行为的任何想法： 登陆页面图片

Answer 1

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

onPressed: () {}

然后你会得到一个错误，因为你的子部件列表是const。在测试时暂时将其删除，然后就可以开始了！