如何在Flutter上设置自定义高程颜色? [英] How to set a custom elevation color on Flutter?

问题描述

我正在尝试自定义抖动上RaisedButton阴影的颜色，例如绿色而不是灰色，我不想像互联网上的所有解决方案一样将按钮放在Container中，所以我希望有一种解决方案可以使用高度和"android material"不可能做到的旧答案不再是问题.

I am trying to customize the color of the RaisedButton's shadow on flutter, e.g Green instead of Grey, I don't want to put the button inside a Container like all solutions on the internet, so I hope that there's a solution using elevation and the old answer that this is not possible by "android material" is not an issue any more.

已编辑:使用ShadowBox解决方案的容器存在的问题是，由于偏移只有两个值(垂直和水平)，并且如果我们将ShadowBox推入其中，则该容器会散布到所有侧面仅一侧，然后一侧会很大(按钮高度的一半)！

Edited: the problem with the container with ShadowBox solution is that will be Spread to all sides as the offset has two values only,vertical and horizontal, and if we push the ShadowBox to make it in one side only, then in one side BUT it's going to be big(half of the button height)!

因此，如果有一种方法可以使child(RaisedButton)大于容器，那么这将是一个解决方案.

So if there's a way to make the child(RaisedButton) bigger than the container then that would be a solution.

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

I am trying to use Stack(..Positioned(..)) but no luck so far.

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

BTW, this is the button that I need a native but colorful shadow for it.

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(...)),
),  

我只想在底部有与按钮相同颜色的阴影:

I want a shadow at the bottom only with same color as the button:

但是我到目前为止所得到的:

but what I am getting so far:

谢谢

推荐答案

经过2年的更新，事情发生了变化.对于更新，请检查答案https://stackoverflow.com/a/66638462/10380182 下方.

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

目前无法在Flutter中更改默认的立面颜色.我认为不会，因为 Material Design 原理.

It is not possible to change default elevation color right now in Flutter. And in my opinion, it won't be, because of Material Design principles.

创建一个包装器 Container ，然后用Container包装您的 Button Widget (没有高度).

Create a wrapper Container then wrap your Button Widget(that has no elevation) with the Container.

您可以根据需要调整 BoxShadow .您还可以使用半强度 Offset(1，0)& Offset(-1，0).

You can tweak the BoxShadow however you want. Also you can add additional elevation to right and left side with half strength 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 按钮:

我们为容器创建高度参数:

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'),
  ),
)

这篇关于如何在Flutter上设置自定义高程颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！