web-dev-qa-db-ja.com

フラッタにカスタム標高色を設定する方法

私は、灰色の代わりに緑色の緑色の緑色の色をカスタマイズしようとしています、私はインターネット上のすべての解決策のようにコンテナの内側にボタンを置きたくないので、 「Android素材」ではこれが不可能であるという古い答えはそれ以上の問題ではありません。

編集：ShadowBoxソリューションを持つコンテナの問題は、オフセットのみが2つの値のみ、垂直方向、水平方向の場合、すべての側面に拡散されることです。私たちはシャドウボックスを片側だけで片側にしますが、それは大きくなるだろう（ボタンの高さの半分）！

それで、子供（RaisedButton）をコンテナよりも大きくする方法があるなら、それは解決策です。

私はスタック（..配置された（..））を使おうとしていますが、これまでの運もできません。

BTW、これはネイティブですがカラフルなシャドウが必要なボタンです。

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

ボタンと同じ色のみで下のシャドウが欲しい: button with same color shadow

しかし、私がこれまでに得ているのは：

buttons with diff shadows

ありがとう

androidfluttermaterial-designflutter-layout
8
Jehad Nasser

Flutterで現在の標高色を変更することはできません。そして私の意見では、_Material Design_原則のためにはそうではありません。

ラッパーを作成します。Containerは、コンテナと一緒に_Button Widget_（標高がない）を包みます。

あなたが望むBoxShadowを微調整することができます。また、半分の強度Offset(1, 0)＆Offset(-1, 0)。

コンテナ（青色の場合はq.）：

_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'),
  ),
)
_
3
Esen Mehmet