如何在颤动中绘制带有尖头/渐变线/的线？

Question

使用描边法，如何在颤动中创建带有尖头的渐变线？我想在颤动中绘制如下线。

Answer 1

使用 CustomPainter 绘制：

import 'package:flutter/material.dart';

void main() => runApp(Example());

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
      child: CustomPaint(
        size: Size(200, 5),
        painter: CurvePainter(),
      ),
    )));
  }

  @override
  void dispose() {
    super.dispose();
  }
}

class CurvePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint();
    paint.color = Colors.black;
    paint.style = PaintingStyle.fill; // Change this to fill

    var path = Path();

    path.moveTo(0, 0);
    path.quadraticBezierTo(size.width / 2, size.height / 2, size.width, 0);
    path.quadraticBezierTo(size.width / 2, -size.height / 2, 0, 0);

    canvas.drawPath(path, paint);
  }

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

Answer 2

看不到您的图片。您可以使用 CustomPaint 小部件来绘制线条，定义一个扩展 CustomPainter 的类，并使用 canvas.drawLine() 方法。