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

Question

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

Solution 1

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!

Solution 2

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",
        )

Solution 3

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

Solution 4

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

View more solutions