Flutter 创建一个凸起的按钮

Question

我目前正在尝试在 Flutter 中创建一个自定义样式的按钮。我希望创建一个类似于此的按钮 https://raw.githubusercontent.com/hoang8f/android-flat-button/master/screenshot/screenshot.gif

我可以使用 RaisedButton 创建类似的东西，还是需要使用 CustomPainter 通过自定义绘图来创建它？ RaisedButton 在使用 elevation 参数时似乎没有产生想要的效果。

Answer 1

您可以创建一个 StatefulWidget 并使用 GestureDetector

  class MyCustomButton extends StatefulWidget {
    @override
    _MyCustomButtonState createState() => _MyCustomButtonState();
  }

  class _MyCustomButtonState extends State<MyCustomButton> {
    bool _isPressed = false;

    @override
    Widget build(BuildContext context) {
      return GestureDetector(
        onTapDown: (TapDownDetails details) {
          setState(() {
            _isPressed = true;
          });
        },
        onTapUp: (TapUpDetails details) {
          setState(() {
            _isPressed = false;
          });
        },
        child: Container(
            padding: EdgeInsets.all(20.0),
            decoration: BoxDecoration(
              color: Colors.blue,
              border: _isPressed
                  ? Border(bottom: BorderSide(color: Colors.grey, width: 10.0))
                  : null,
            ),
            child: Text("title button")),
      );
    }
  }