Как нарисовать линию с острыми концами / градиентную линию / в виде флаттера?
Используя метод обводки, как создать градиентную линию с острым концом в флаттере? Я хочу нарисовать линию трепетом, как показано ниже.

Ответы
Используйте 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;
}
}
Изображение не отображается. Вы можете использовать виджет CustomPaint для рисования линий, определить класс, расширяющий CustomPainter, и использовать метод canvas.drawLine ().

Класс делителя
Тонкая горизонтальная линия с отступами по бокам.
На языке материального дизайна это разделитель. Разделители можно использовать в списках, ящиках и других местах для разделения содержимого.
Чтобы создать разделитель между элементами ListTile, рассмотрите возможность использования ListTile.divideTiles, который оптимизирован для этого случая.
Общая высота коробки регулируется высотой. Соответствующий отступ автоматически вычисляется по высоте.
[
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'),
),
),
),
\],
),
);
}
}]
Здесь информация, как изменить стиль, введите описание ссылки здесь