Button 带有透明png的颤振按钮

这会很简单，但我不能让它像我想的那样工作。我想有一个定制的png，使它像一个升起的按钮，在那里我可以编辑splashColor，highlightColor，添加一个边框（它的宽度和颜色），并有墨水的涟漪效果，但只有在png的可见部分。目前正在尝试：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("Buttons practice"),
      ),
      body: new Container(
        color: Colors.amber,
        child: new Column(
            children: <Widget>[
        //Button1
        new Row(
        children: <Widget>[
            Container(
            height: 150,
            width: 150,
            child: new RaisedButton(
              onPressed: () {},
              child: new Image.asset(
                "assets/Freccia.png",
              ),
            ))
        ],
      ),

      //Button2
      new Row(
        children: <Widget>[
          Container(
            height:150 ,
            width: 150,
            child: new FlatButton(onPressed: () {}, child: new Image.asset(
              "assets/Freccia.png",)),
          )],
          ),

          //Button3
          new Row(
            children: <Widget>[
              Container(
                height: 150,
                width: 150,
                child: new OutlineButton(
                    onPressed: () {},
                    child: new Image.asset(
                        "assets/Freccia.png")
                ),
              )
            ],
          ),
        ],
      ),
    ),);
  }
}

类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar：新的appBar(
标题：新文本（“按钮实践”），
),
主体：新容器(
颜色：颜色。琥珀色，
子：新列(
儿童：[
//按钮1
新行(
儿童：[
容器(
身高：150，
宽度：150，
孩子：新升起的按钮(
按下：（）{}，
子：新建Image.asset(
“assets/Freccia.png”，
),
))
],
),
//按钮2
新行(
儿童：[
容器(
身高：150，
宽度：150，
子级：新建平面按钮（按下时：（）{}，子级：new Image.asset(
“assets/Freccia.png”，），
)],
),
//按钮3
新行(
儿童：[
容器(
身高：150，
宽度：150，
孩子：新的大纲按钮(
按下：（）{}，
子：新建Image.asset(
“资产/Freccia.png”）
),
)
],
),
],
),
),);
}
}

---

到目前为止，我一直在想如何实现您要做的事情：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Text("Flutter Sample - Irregular shaped RaisedButton"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {},
          shape: _CustomBorder(),
          color: Colors.blue,
        ),
      ),
    );
  }
}

class _CustomBorder extends ShapeBorder {
  const _CustomBorder();

  @override
  EdgeInsetsGeometry get dimensions {
    return const EdgeInsets.only();
  }

  @override
  Path getInnerPath(Rect rect, {TextDirection textDirection}) {
    return getOuterPath(rect, textDirection: textDirection);
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) {
    return Path()
      ..moveTo(rect.left + rect.width / 2.0, rect.top)
      ..lineTo(rect.right - rect.width / 3, rect.top + rect.height / 3)
      ..lineTo(rect.right, rect.top + rect.height / 2.0)
      ..lineTo(rect.right - rect.width / 3, rect.top + 2 * rect.height / 3)
      ..lineTo(rect.left + rect.width / 2.0, rect.bottom)
      ..lineTo(rect.left + rect.width / 3, rect.top + 2 * rect.height / 3)
      ..lineTo(rect.left, rect.top + rect.height / 2.0)
      ..lineTo(rect.left + rect.width / 3, rect.top + rect.height / 3)
      ..close();
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {}

  // This border doesn't support scaling.
  @override
  ShapeBorder scale(double t) {
    return null;
  }
}

如果您运行上面的代码，您会得到以下结果：

---

另外，当您阅读该博客时，有人提到，当我单击中心位置时，现有的工具可以将

.svg

文件转换为

路径

，例如，涟漪效应应用于150x 150x的整个容器，难道没有办法从svg导入路径吗？

body: Center(
        child: RaisedButton(
          onPressed: () {},
          shape: _CustomBorder(),
          color: Colors.blue,
        ),
      ),