我们发现多例子堆溢出如何利用RaiseButton与一个渐变的背景,但由于公布的这些问题的答案,RaiseButton已经被弃用。
大多数的解决方案,我已经找到了一个ElevatedButton与一个渐变的背景已经不完全的程度;梯度并不复盖整个背景或阴影是关闭的。
这 是最完整的答案,我们发现,但onPress高程提出了一种不和谐的阴影。
下面我发表一个答复我最好的尝试的一个ElevatedButton与一个渐变的背景(Q&A式)。 请评论的方式你看到我的回答改进!
我们发现多例子堆溢出如何利用RaiseButton与一个渐变的背景,但由于公布的这些问题的答案,RaiseButton已经被弃用。
大多数的解决方案,我已经找到了一个ElevatedButton与一个渐变的背景已经不完全的程度;梯度并不复盖整个背景或阴影是关闭的。
这 是最完整的答案,我们发现,但onPress高程提出了一种不和谐的阴影。
下面我发表一个答复我最好的尝试的一个ElevatedButton与一个渐变的背景(Q&A式)。 请评论的方式你看到我的回答改进!
经过大量试验和错误,我设法重新ElevatedButton.
最终结果:
下面是我的代码可重复使用的梯度按钮。
import 'package:flutter/material.dart';
class GradientElevatedButton extends StatelessWidget {
const GradientElevatedButton({
Key? key,
required this.child,
required this.onPressed,
required this.linearGradient,
}) : super(key: key);
final Widget child;
final VoidCallback onPressed;
final LinearGradient linearGradient;
@override
Widget build(BuildContext context) {
return Padding(
// ElevatedButton has default 5 padding on top and bottom
padding: const EdgeInsets.symmetric(
vertical: 5,
),
// DecoratedBox contains our linear gradient
child: DecoratedBox(
decoration: BoxDecoration(
gradient: linearGradient,
// Round the DecoratedBox to match ElevatedButton
borderRadius: BorderRadius.circular(5),
),
child: ElevatedButton(
onPressed: onPressed,
// Duplicate the default styling of an ElevatedButton
style: ElevatedButton.styleFrom(
// Enables us to see the BoxDecoration behind the ElevatedButton
primary: Colors.transparent,
// Fits the Ink in the BoxDecoration
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
).merge(
ButtonStyle(
// Elevation declared here so we can cover onPress elevation
// Declaring in styleFrom does not allow for MaterialStateProperty
elevation: MaterialStateProperty.all(0),
),
),
child: child,
),
),
);
}
}