如何在颤振中制作自定义按钮形状

Question

我正在做一个项目，我想实现一个按钮

我怎样才能轻松地做出这个形状。

Answer 1

您可以使用CustomPainter。看看这个关于如何使用它的好例子。

这是您想要实现的一个小例子（虽然我没有做圆形边框，但您可以轻松扩展：

import 'package:flutter/material.dart';

main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Drawing Paths',
      home: Scaffold(
        body: Center(
          child: GestureDetector(
            onTap: () => print('Do Something'),
            child: CustomPaint(
              size: Size(200, 50),
              painter: CurvePainter(),
            ),
          ),
        ),
      ),
    );
  }
}

class CurvePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Color(0xFFE32087)
      ..style = PaintingStyle.fill;

    var path = Path()
      ..moveTo(size.width*0.2, 0)
      ..lineTo(size.width, size.height*0.2)
      ..lineTo(size.width, size.height)
      ..lineTo(0, size.height);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

结果：

Answer 2

要么使用代表此按钮的图像并将其包装起来GestureDetector（不推荐，但有时 UI 非常复杂，纯粹在 Flutter 中制作它可能有点矫枉过正，所以记住这个选项也不错），或者尝试一下CustomClipper！

您想要做的是创建一个ContainerorFlatButton并将其包装在ClipPath您提供 aCustomClipper作为clipper的属性的位置ClipPath。在您的实现中，您CustomClipper可以按照您想要的方式塑造小部件。看看这篇很棒的 Medium 帖子（不是我写的，感谢 Kinjal Dhamat），她在其中解释了如何使用CustomClipper和塑造你想要的一切的各种方法：

https://medium.com/flutter-community/flutter-custom-clipper-28c6d380fdd6

正如 pskink 所建议的，创建一个自定义ShapeBorder类（例如，将其设置为shape属性FlatButton）具有相当多的好处，但需要一些额外的知识，请看一下这篇文章：

颤动 - ClipPath