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

Question

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

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

Answer 1

要么使用代表此按钮的图像并用 GestureDetector 包裹它（不推荐，但有时 UI 太复杂以至于完全在 Flutter 中制作它可能有点矫枉过正，因此保留此选项in mind is not bad) 或者玩 CustomClipper!

你想要做的是创建一个 Container 或 FlatButton 并用 ClipPath 包装它，你提供 CustomClipper 作为 clipper 属性共 ClipPath。在 CustomClipper 的实现中，您可以按照自己的意愿塑造小部件。查看这个很棒的 Medium post（不是我写的，感谢 Kinjal Dhamat），她在其中解释了如何使用 CustomClipper 和塑造您想要的一切的各种方式：

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

根据 pskink 的建议，创建自定义 ShapeBorder class，例如，将设置为 FlatButton 的 shape 属性，具有有很多好处，但需要一些额外的知识，看看这个 post:

Answer 2

您可以使用 CustomPainter. Have a look at this great example 了解如何使用它。

这是一个你想要实现的小例子（虽然我没有做圆角边框但是你可以很容易地展开：

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

结果:

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

How to make a custom button shape in flutter

user-interface

dart

flutter

flutter-animation