Flutter 如何为凸起的按钮填充渐变颜色？

Question

我正在尝试渲染渐变按钮，但在某些设备上，渐变颜色不会像下图那样展开。

我该如何解决这个问题？
谢谢！

代码

class GradientButton extends StatelessWidget {
  final Widget child;
  final VoidCallback onPressed;
  const GradientButton({@required this.child, @required this.onPressed});
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      textColor: Colors.white,
      shape: StadiumBorder(),
      padding: const EdgeInsets.all(0.0),
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: <Color>[Color(0xff00F260), Color(0xff0575E6)],
          ),
        ),
        padding: EdgeInsets.all(8.0),
        child: child
        onPressed: onPressed,
      ),
    );
  }
}

Answer 1

如果您想维护 RaisedButton 小部件及其行为，您可以这样做：

RaisedButton(
  textColor: Colors.white,
  shape: StadiumBorder(),
  padding: const EdgeInsets.all(0.0),
  child: Container(
    decoration: ShapeDecoration(
      shape: StadiumBorder(),
      gradient: LinearGradient(
          colors: <Color>[Color(0xff00F260), Color(0xff0575E6)]
      ),
    ),
    padding: EdgeInsets.fromLTRB(19.0,12.0,19.0,12.0),
    child: child,
  ),
  onPressed: onPressed,
),

但是容器周围的填充感觉有点像作弊。您可以只用 GestureDetector 包裹一个容器，然后根据需要操纵容器，如下所示：

GestureDetector(
  onTap: onPressed,
  child: Container(
    decoration: ShapeDecoration(
      shape: StadiumBorder(),
      gradient: LinearGradient(
          colors: <Color>[Color(0xff00F260), Color(0xff0575E6)]
      ),
    ),
    padding: EdgeInsets.fromLTRB(19.0,12.0,19.0,12.0),
    child: Text('Lets Go',
      style: TextStyle(color: Colors.white),
    ),
  ),
),

Answer 2

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class GradientButton extends StatelessWidget {
  final Widget child;
  final VoidCallback onPressed;

  const GradientButton({Key key, this.onPressed, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: ShapeDecoration(
        shape: const StadiumBorder(),
        gradient: LinearGradient(
          colors: [Color(0xff00F260), Color(0xff0575E6)],
        ),
      ),
      child: MaterialButton(
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        shape: const StadiumBorder(),
        child: child,
        onPressed: onPressed,
      ),
    );
  }
}

您还会获得一些 MaterialButton 效果，例如点击 Ripple，当 onPressed 为 null 时 Disabled 等。对于ShapeDecoration

中的海拔集 shadows 属性

shadows: [
  BoxShadow(
      color: Colors.black54,
      spreadRadius: 0.5,
      blurRadius: 3,
      offset: Offset(1, 1))
]

Answer 3

试试这个，material 带有圆形边框的按钮

MaterialButton(
  onPressed: () {},
  child: Ink(
    padding: EdgeInsets.all(DEFAULT_PADDING),
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      gradient: LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        colors: <Color>[
          SECONDARY_COLOR_SHADE_DARK_NEW,
          SECONDARY_COLOR_SHADE_LITE_NEW,
        ],
      ),
  ),
    child: Text(
      buttonText,
      style: Theme.of(context).textTheme.button.copyWith(fontWeight: FontWeight.bold),
      textAlign: TextAlign.center,
    ),
  ),
  shape: CircleBorder(),
);

Flutter 如何为凸起的按钮填充渐变颜色？

Flutter how to fill gredient color for raised button?

flutter

flutter-web