dashed_line

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

Um pacote Flutter para desenhar linhas tracejadas personalizáveis com qualquer forma ou estilo. Permite que desenvolvedores criem caminhos tracejados visualmente atraentes com facilidade, suportando várias configurações como comprimento do traço, tamanho do espaço entre traços e largura da linha. Ideal para elementos de interface como divisórias, bordas ou linhas decorativas em aplicativos em múltiplas plataformas. O pacote é leve e se integra perfeitamente em projetos Flutter existentes.

Casos de uso

Criando divisores personalizados em layouts de interface
Projetando padrões decorativos de linhas
Desenhando bordas tracejadas ao redor dos widgets
Melhorando visualizações de gráficos ou diagramas
Construindo ferramentas interativas de desenho

Principais recursos

Suporta qualquer forma de caminho
Comprimentos personalizáveis de traços e espaçamentos
Largura de traço ajustável
Compatibilidade multiplataforma
Integração simples da API

Indicado para

Designers de UI procurando variedade visual
Desenvolvedores de componentes de visualização de dados
Aplicativos que exigem elementos decorativos com estilo
Aplicações Flutter multiplataforma

Considerações

Pode exigir otimização de desempenho para caminhos complexos
Limitado a renderização 2D dentro da tela do Flutter
Não adequado para efeitos animados de ponteiro sem lógica adicional

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

Draw dashed lines with any shape and style you want. Just like that.

Usage

Add the dependency to your pubspec.yaml (you can see the newest version in the pub badge):

dependencies:
  dashed_line: ^0.1.0

Use the widget:

import 'package:dashed_line/dashed_line.dart';

// ...

DashedLine(
  path: Path()..cubicTo(-40, 53, 14, 86, 61, 102),
  color: Colors.red,
)

...you can also use the SVG path commands instead of a Path:

DashedLine.svgPath(
  'C -40 53 14 86 61 102',
  color: Colors.red,
)

Where to obtain path methods/commands?

There are many ways.

You can construct the path yourself using the Path methods like lineTo or cubicTo.

You can also use the path commands used in the d attribute of SVG files. You can do this manually or via export from one of the vector graphics software, like Inkscape or Figma. We found SvgPathEditor quite useful too.

Example: Exporting path commands from Figma

First step	Second step

And now we have an SVG in the clipboard:

<svg width="190" height="48" viewBox="0 0 190 48" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M1 16C73 79 100 3 121 0.999997C142 -1 214.5 11.5 179 47" stroke="black"/>
</svg>

From here we can just copy the value of the path's d attribute and use for the DashedLine.svgPath constructor's first argument.

🚨 Note about paths

Due to how Paths work in Flutter and Skia, the DashedLine widget takes NOT as much space as the dashed line needs, but as much it needs to contain all the control points. Table below should help understand the problem.