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

I am building a landing page that has a logo and then a sign in and login button below it. I used a box decoration to specify the background color because I am very particular about the gradient scheme. However, I realize it may have some kind of "absolute" effect on my container widget because I can't seem to change the colors of the buttons within the widget. I am new to flutter UI and I am probably layering the widgets incorrectly, but any help would be greatly appreciated! Here's the code for the landing page:

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

Here's the code for the custom elevated button 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,
      ),
    );
  }
}

And here's what the page looks like currently. No matter what I do, I can't get the buttons to not match the background color. Any ideas on how to correct this behavior: Picture of landing page

CodePudding user response：

Looks like a slight oversight. You have your buttons as null. I understand you are probably testing your code is why. But if you want to see the colors behave, add a void callback to the onPressed like so:

onPressed: () {}

You will then get an error because your children widget list is const. Remove that for now while you're testing and you should be good to go!

CodePudding user response：

Try this it will work. Change on pressed from null to 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",
        )

CodePudding user response：

Your onPressed of button is null its not taking the color. Try as follows:

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

CodePudding user response：

The problem is that onPressed is null. In ElevatedButton's documentation it says

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

What you see is the button's default disabled colors. Strangely enough you can't set those colors from ElevatedButton.styleFrom so I suggest you give a non-null onPressed