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

Questions

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

March 3, 2022

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 :

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: