Как нарисовать линию с острыми концами / градиентную линию / в виде флаттера?

Aug 20 2020

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

Ответы

4 sleepingkit Aug 20 2020 at 09:46

Используйте 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;
  }
}

jack Aug 20 2020 at 09:18

Изображение не отображается. Вы можете использовать виджет CustomPaint для рисования линий, определить класс, расширяющий CustomPainter, и использовать метод canvas.drawLine ().

AbubakrElghazawy Aug 20 2020 at 12:19

Класс делителя

Тонкая горизонтальная линия с отступами по бокам.

На языке материального дизайна это разделитель. Разделители можно использовать в списках, ящиках и других местах для разделения содержимого.

Чтобы создать разделитель между элементами ListTile, рассмотрите возможность использования ListTile.divideTiles, который оптимизирован для этого случая.

Общая высота коробки регулируется высотой. Соответствующий отступ автоматически вычисляется по высоте.

    [![// Flutter code sample for Divider

// This sample shows how to display a Divider between an orange and blue box
// inside a column. The Divider is 20 logical pixels in height and contains a
// vertically centered black line that is 5 logical pixels thick. The black
// line is indented by 20 logical pixels.
//
// !\[\](https://flutter.github.io/assets-for-api-docs/assets/material/divider.png)

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'),
              ),
            ),
          ),
        \],
      ),
    );
  }
}]

Здесь информация, как изменить стиль, введите описание ссылки здесь