如何在 Flutter 上设置自定义高程颜色？

Posted 2023-02-23

【中文标题】如何在 Flutter 上设置自定义高程颜色？

【英文标题】：How to set a custom elevation color on Flutter?

【发布时间】：2019-12-05 10:11:12

【问题描述】：

我正在尝试自定义 RaisedButton 在颤动时阴影的颜色，例如绿色而不是灰色，我不想像互联网上的所有解决方案一样将按钮放在容器内，所以我希望有一个解决方案使用提升和“android 材料”不可能做到这一点的旧答案不再是问题。

已编辑：使用ShadowBox解决方案的容器的问题是，由于偏移量只有两个值，垂直和水平，并且如果我们推动ShadowBox使其进入只有一侧，然后在一侧，但它会很大（按钮高度的一半）！

因此，如果有办法使子项（RaisedButton）大于容器，那将是一个解决方案。

我正在尝试使用 Stack(..Positioned(..)) 但到目前为止没有运气。

顺便说一句，这是我需要一个原生但彩色阴影的按钮。

RaisedButton(
   padding: EdgeInsets.symmetric(vertical: 15.0),
   shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(30.0)
   ),
   color: Theme.of(context).primaryColor,
   onPressed: () => print('Hello'),
   child: Center(Text(...)),
),  

我只希望底部有一个与按钮颜色相同的阴影：

但到目前为止我得到了什么：

谢谢

【问题讨论】：

我们可以知道为什么不Container 以便我们更好地了解您的问题吗？

请检查上述问题中的编辑部分，谢谢。

不确定offset has two values only,vertical and horizontal 的意思。下面的答案不适合你吗？

是的，编辑后工作正常））谢谢

【参考方案1】：

Edit: After 2 years of updates, things are changed. For the updates check the answer:https://***.com/a/66638462/10380182

目前无法在 Flutter 中更改默认的高程颜色。在我看来，这不会是因为Material Design 原则。

创建一个包装器Container，然后用容器包装你的Button Widget（没有海拔）。

您可以随意调整BoxShadow。此外，您还可以使用半强度 Offset(1, 0) 和 Offset(-1, 0) 在右侧和左侧添加额外的高度。

容器（例如蓝色）：

class CustomElevation extends StatelessWidget 
  final Widget child;

  CustomElevation(@required this.child) : assert(child != null);

  @override
  Widget build(BuildContext context) 
    return Container(
      decoration: BoxDecoration(
        boxShadow: <BoxShadow>[
          BoxShadow(
            color: Colors.blue.withOpacity(0.1),
            blurRadius: 1,
            offset: Offset(0, 2),
          ),
        ],
      ),
      child: this.child,
    );
  

用例：

CustomElevation(
  child: FlatButton(
    color: Colors.blue,
    onPressed: () ,
    child: Text('Custom Elevation'),
  ),
)

编辑：对于StadiumBorder 按钮：

我们为Container创建高度参数：

class CustomElevation extends StatelessWidget 
  final Widget child;
  final double height;

  CustomElevation(@required this.child, @required this.height)
      : assert(child != null);

  @override
  Widget build(BuildContext context) 
    return Container(
      height: this.height,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(this.height / 2)),
        boxShadow: <BoxShadow>[
          BoxShadow(
            color: Colors.blue.withOpacity(0.2),
            blurRadius: height / 5,
            offset: Offset(0, height / 5),
          ),
        ],
      ),
      child: this.child,
    );
  

然后：

CustomElevation(
  height: 60,
  child: FlatButton(
    shape: StadiumBorder(),
    color: Colors.blue,
    onPressed: () ,
    child: Text('Custom Elevation'),
  ),
)

【讨论】：

感谢您的回答，非常感谢。但问题在于我的按钮的形状，因为它的半径是 30.0，请看这里：imgur.com/Hy6Alxo

@JehadNasser 我根据您的需要编辑了答案。

正是我想要的，就像一个魅力！非常感谢））

【参考方案2】：

由于FlatButton, RaisedButton, and OutlineButton 现在已被弃用，我想添加一种更简单的最新方式。因此，接受的答案不再完全正确，因为答案所指的 Material Design principles 已更改。

见（source）：

FlatButton、RaisedButton 和 OutlineButton 已被替换为 分别为 TextButton、ElevatedButton 和 OutlinedButton。

TextButton(
        style: ButtonStyle(
          backgroundColor: MaterialStateProperty.all(color), //Background Color
          elevation: MaterialStateProperty.all(3), //Defines Elevation
          shadowColor: MaterialStateProperty.all(color), //Defines shadowColor
        ),
        onPressed: () ,
        child: Text('bla'),
        ),
)

这也适用于ElevatedButton and OutlinedButton。