[英]How to create a gradient button in flutter
I am trying to create a button similar to this one, I don't have exact colors so using yellow and black.我正在尝试创建一个与此类似的按钮,我没有确切的 colors,所以使用黄色和黑色。
Want this想要这个
My Code Output我的密码 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.请帮助如何做到这一点。
Try below code hope its help to you and used FractionalOffset
试试下面的代码希望它对你有帮助并使用FractionalOffset
GestureDetector(
onTap: () {},
child: Container(
alignment: Alignment.center,
height: 44.0,
width: 100,
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.yellow,
Colors.black,
],
begin: FractionalOffset.bottomCenter,
end: FractionalOffset.topCenter,
),
),
child: const Text('SIGN UP'),
),
),
You can modify your Linear Gradient
like this:您可以像这样修改Linear Gradient
:
LinearGradient(
colors: [
Color.fromARGB(100, 137, 90, 11),
Color.fromARGB(255, 252, 208, 72)
],
begin: Alignment.topCenter,
end: Alignment.center,
stops: [0.0, 0.3],
),
Output: Output:
IMO, It looks better.海事组织,它看起来更好。
PS You can change colors
& stops
property as per your need. PS 您可以根据需要更改colors
& stops
属性。
Use this code for Gradient color in Elevated Button将此代码用于高架按钮中的渐变颜色
Container(
height: 44.0,
decoration: BoxDecoration(gradient: LinearGradient(colors: [Colors.orange, Colors.green])),
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(primary: Colors.transparent, shadowColor: Colors.transparent),
child: Text('Elevated Button'),
),
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.