¿Cómo dibujar la línea con extremos afilados / línea de degradado / en aleteo?
Usando el método de trazo, ¿cómo crear una línea de degradado con un extremo afilado en aleteo? Quiero dibujar la línea como se muestra a continuación en aleteo.

Respuestas
Utilice CustomPainter para dibujar:
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;
}
}
No puedo ver tu imagen. Puedes usar el widget CustomPaint para dibujar líneas, definir una clase que amplíe CustomPainter y usar el método canvas.drawLine ().

Clase divisoria
Una delgada línea horizontal, con acolchado a cada lado.
En el lenguaje de diseño de materiales, esto representa un divisor. Los divisores se pueden usar en listas, cajones y en otros lugares para separar contenido.
Para crear un divisor entre elementos de ListTile, considere usar ListTile.divideTiles, que está optimizado para este caso.
La altura total de la caja se controla mediante la altura. El acolchado apropiado se calcula automáticamente a partir de la altura.
[
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: MyStatelessWidget(),
),
);
}
}
/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
MyStatelessWidget({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: <Widget>\[
Expanded(
child: Container(
color: Colors.amber,
child: const Center(
child: Text('Above'),
),
),
),
const Divider(
color: Colors.black,
height: 20,
thickness: 5,
indent: 20,
endIndent: 0,
),
Expanded(
child: Container(
color: Colors.blue,
child: const Center(
child: Text('Below'),
),
),
),
\],
),
);
}
}]
Aquí información sobre cómo cambiar el estilo ingrese la descripción del enlace aquí