class GradientButtonWidget extends StatefulWidget {
const GradientButtonWidget({Key? key}) : super(key: key);
@override
State<GradientButtonWidget> createState() {
return GradientButtonState();
}
}
class GradientButtonState extends State<GradientButtonWidget> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("渐变按钮"),
),
body: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
GradientButton(
colors: const [Colors.orange, Colors.red],
height: 50,
onPressed: onTap,
child: const Text("Submit"),
),
GradientButton(
colors: [Colors.lightGreen, Colors.green.shade700],
height: 50,
onPressed: onTap,
child: const Text("Submit"),
),
GradientButton(
colors: [Colors.lightBlue.shade300, Colors.blueAccent],
height: 50,
onPressed: onTap,
child: const Text("Submit"),
),
],
),
);
}
void onTap() {}
}
class GradientButton extends StatelessWidget {
const GradientButton(
{Key? key,
this.colors,
this.width,
this.height,
this.borderRadius,
this.onPressed,
required this.child})
: super(key: key);
// 渐变色数组
final List<Color>? colors;
// 按钮宽高
final double? width;
final double? height;
final BorderRadius? borderRadius;
//点击回调
final GestureTapCallback? onPressed;
final Widget child;
@override
Widget build(BuildContext context) {
ThemeData theme = Theme.of(context);
List<Color> _colors =
colors ?? [theme.primaryColor, theme.primaryColorDark];
return DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(colors: _colors),
borderRadius: borderRadius,
),
child: Material(
type: MaterialType.transparency,
child: InkWell(
splashColor: _colors.last,
highlightColor: Colors.transparent,
borderRadius: borderRadius,
onTap: onPressed,
child: ConstrainedBox(
constraints: BoxConstraints.tightFor(height: height, width: width),
child: Center(
child: Padding(
padding: const EdgeInsets.all(8),
child: DefaultTextStyle(
style: const TextStyle(fontWeight: FontWeight.bold),
child: child,
),
),
),
),
),
),
);
}
}
Flutter 渐变按钮示例
猜你喜欢
转载自blog.csdn.net/xiaopihair123/article/details/125006177
今日推荐
周排行