如何在颤动的按钮中创建样式？答案

【问题标题】：how to create a styling in button in flutter?如何在颤动的按钮中创建样式？
【发布时间】：2020-12-02 14:12:42
【问题描述】：

如何为颤动的按钮制作这种样式。由于我是新手，我不知道该怎么做。

图像中的三角形有些不规则，我希望它与按钮框匹配。

【问题讨论】：

【解决方案1】：

您可以使用CustomPaint 小部件来获得该效果。您可以轻松地从 Flutter Shape Maker 自动生成 CustomPaint 代码。请看下面的代码。您还可以在以下 URL https://dartpad.dev/0171e4b838b740ea23f896f3b0be1f8e 上运行 DartPad 上的代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 360,
          height: 100,
          color: Colors.black,
          child: CustomPaint(
            size: Size(1200, 700),
            painter: FlagPainter(),
            child: Text(
              "text",
              style: TextStyle(color: Colors.black, fontSize:24),
            ),
          ),
        ),
      ),
    );
  }
}

class FlagPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint_0 = new Paint()
      ..color = Color.fromARGB(255, 255, 255, 255)
      ..style = PaintingStyle.fill
      ..strokeWidth = 1;

    Path path_0 = Path();
    path_0.moveTo(0, 0);
    path_0.lineTo(0, size.height * 2.40);
    path_0.lineTo(0, size.height * 0.72);
    path_0.lineTo(size.width * 0.28, 0);

    canvas.drawPath(path_0, paint_0);
  }

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

【讨论】：

请您解释一下 FlagPainter 代码。请对我有帮助。
请看这个来自 Flutter 团队的 youtube.com/watch?v=kp14Y4uHpHs Widget of the Week 视频以了解 CustomPaint。 FlagPainter 真的很简单。黑色容器是 CustomPaint 在其上绘制的画布。首先使用白色创建油漆，油漆样式填充和笔触宽度为 1。创建路径。路径从左上角开始，即 0，然后通过绘制线条创建旗形或三角形。路径是封闭的。我建议您观看此视频youtube.com/watch?v=Z4-XLVRCRpA 以了解 CustomPaint。
另见此视频youtube.com/watch?v=nxhneengTl0，它展示了如何使用 Flutter Shape Maker fluttershapemaker.com