I am trying to create a button similar to this one, I don’t have exact colors so using yellow and black.
Want this
My Code Output
here is my code:
class CustomButton extends StatelessWidget {
final String? text;
double width;
final Function()? onPressed;
CustomButton({this.width = 0.8, this.text, this.onPressed});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onPressed,
child: Container(
child: Center(
child: CustomTextWidget(
text: text!,
textColor: AppColors.BLACK_COLOR,
fontWeight: FontWeight.bold,
fontSize: 1.1,
)),
height: ScreenSize.heightSize * 0.08,
width: width.sw,
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [Colors.yellow, Colors.black],
begin: Alignment.topRight,
end: Alignment.topRight,
stops: [0.7, 0.8],
tileMode: TileMode.repeated,
),
borderRadius: BorderRadius.circular(4)),
),
);
}
}
Kindly help how to do this.
3
Answers
Try below code hope its help to you and used
FractionalOffset
Result->
You can modify your
Linear Gradient
like this:Output:
IMO, It looks better.
P.S. You can change
colors
&stops
property as per your need.Use this code for Gradient color in Elevated Button