¿Cómo dibujar la línea con extremos afilados / línea de degradado / en aleteo?

Aug 20 2020

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

4 sleepingkit Aug 20 2020 at 09:46

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

jack Aug 20 2020 at 09:18

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 ().

AbubakrElghazawy Aug 20 2020 at 12:19

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.

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

Aquí información sobre cómo cambiar el estilo ingrese la descripción del enlace aquí