button - 带有透明png的Flutter按钮

Question

这很简单，但我无法使其如我所愿。我想有一个自定义的png并使其像RaisedButton一样工作，在其中我可以编辑splashColor，highlightColor，添加边框(其宽度和颜色)并具有Ink的波纹效果，但仅在其可见部分上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")
                ),
              )
            ],
          ),
        ],
      ),
    ),);
  }
}

Answer 1

到目前为止，我一直在考虑实现您尝试做的事情，例如:

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;
  }
}

RaisedButton接受shape属性。我构建了一个自定义 ShapeBorder，并将此对象分配给 RaisedButton的shape属性。
我创建了一个新的类 _CustomBorder，它扩展了 ShapeBorder。在此类中，我重写了 ShapeBorder的一些方法。
需要关注的方法是 getOuterPath()。在此方法中，我返回了 Path对象。如果您观察到，我已经使用过moveTo()，lineTo()和close()方法来构建自定义形状。您检查 Paths in Flutter: A Visual Guide可以对此进行更多挖掘。
如果您决定要绘制的形状，则只需替换代码的这一部分即可:

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

如果您在上面运行我的代码，这将得到:

另外，当您阅读博客 ClipPath, Custom Painter, and Flutter CustomClipper made it fast!时，提到存在一些将 .svg文件转换为 Path的工具。