如何在颤动中画出具有尖锐末端/渐变线/的线? [英] How to draw the line with sharp ends /gradient line/ in flutter?

问题描述

使用笔触方法，如何在颤动中创建带有尖锐末端的渐变线?我要在颤动中画出下面的线.

Using stroke method, how to create gradient line with sharp end in flutter? I want to draw the line as below in flutter.

推荐答案

使用CustomPainter绘制:

Use CustomPainter to draw:

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

这篇关于如何在颤动中画出具有尖锐末端/渐变线/的线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！