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

Question

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

已编辑：使用 ShadowBox 解决方案的容器的问题是，由于偏移量只有两个值，垂直和水平，因此将向所有侧面展开，如果我们推动 ShadowBox 使其仅在一侧，则在一侧但它是会很大（按钮高度的一半）！

因此，如果有一种方法可以使 child(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(...)),
),  

我只想要底部的阴影与按钮的颜色相同：

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

谢谢

Answer 1

Edit: After 2 years of updates, things are changed. For the updates check the answer: /sf/answers/4664692371/

目前无法在 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'),
  ),
)

Answer 2

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

见（来源）：

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.