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