flutter_sparkline

Visão geral do pacote

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

O Flutter Sparkline é um pacote leve para renderizar gráficos compactos e visualmente atraentes em aplicativos Flutter. Permite que desenvolvedores exibam pequenos gráficos de linha simples diretamente dentro de textos ou elementos da interface, ideal para mostrar tendências ao longo do tempo em um espaço mínimo. O pacote suporta cores personalizáveis, larguras de traço e estilização de pontos de dados, tornando-o adequado para painéis, relatórios e interfaces de análise. Com uma API limpa e desempenho eficiente, integra-se perfeitamente em projetos existentes do Flutter.

Casos de uso

Exibindo dados de tendência em painéis
Visualizando métricas dentro de tabelas
Melhorando a interface do usuário de análise de aplicativos
Mostrando dados históricos em formato compacto
Integrando micrográficos em itens de lista

Principais recursos

Visualizações minimalistas e de alto impacto
Cor e largura da linha personalizáveis
Renderização de curva suave
Suporta atualizações dinâmicas de dados
Leve e desempenho rápido

Indicado para

Visualização de dados em espaços restritos
Análise de aplicativos móveis
Exibição de métricas em tempo real
UIs que exigem indicadores sutis de tendência
Desenvolvedores procurando gráficos simples sem complexidade

Considerações

Limitado a sparklines baseados em linhas apenas
Sem recursos interativos como dicas de ferramentas
Não indicado para grandes conjuntos de dados
Requer manuseio manual da escala de dados
Melhor usado com séries de dados pequenas e discretas

README original

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

Beautiful sparkline charts for Flutter.

screenshot

Installation

Install the latest version from pub.

Quick Start

Import the package, create a Sparkline, and pass it your data.

import 'package:flutter/material.dart';
import 'package:flutter_sparkline/flutter_sparkline.dart';

void main() {
  var data = [0.0, 1.0, 1.5, 2.0, 0.0, 0.0, -0.5, -1.0, -0.5, 0.0, 0.0];
  runApp(
    new MaterialApp(
      home: new Scaffold(
        body: new Center(
          child: new Container(
            width: 300.0,
            height: 100.0,
            child: new Sparkline(
              data: data,
            ),
          ),
        ),
      ),
    ),
  );
}

base example screenshot

Customization

Sparkline

Property	Default
lineWidth	2.0
lineColor	Colors.lightBlue
lineGradient	null

Example:

new Sparkline(
  data: data,
  lineWidth: 5.0,
  lineColor: Colors.purple,
);

lineopts example screenshot

new Sparkline(
  data: data,
  lineWidth: 10.0,
  lineGradient: new LinearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    colors: [Colors.purple[800], Colors.purple[200]],
  ),
);

lineopts example screenshot

Points

Property	Default
pointsMode	PointsMode.none
pointSize	4.0
pointColor	Colors.lightBlue[800]

PointsMode	Description
none (default)	Do not draw individual points.
all	Draw all the points in the data set.
last	Draw only the last point in the data set.

Example:

new Sparkline(
  data: data,
  pointsMode: PointsMode.all,
  pointSize: 8.0,
  pointColor: Colors.amber,
);

all points example screenshot

new Sparkline(
  data: data,
  pointsMode: PointsMode.last,
  pointSize: 8.0,
  pointColor: Colors.amber,
);

last point example screenshot

Fill

Property	Default
fillMode	FillMode.none
fillColor	Colors.lightBlue[200]
fillGradient	null

FillMode	Description
none (default)	Do not fill, draw only the sparkline.
above	Fill the area above the sparkline.
below	Fill the area below the sparkline.

Example:

new Sparkline(
  data: data,
  fillMode: FillMode.below,
  fillColor: Colors.red[200],
);

fill below example screenshot

new Sparkline(
  data: data,
  fillMode: FillMode.above,
  fillColor: Colors.red[200],
);

fill above example screenshot

new Sparkline(
  data: data,
  fillMode: FillMode.below,
  fillGradient: new LinearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    colors: [Colors.red[800], Colors.red[200]],
  ),
);

fill above example screenshot

Todo:

[x] simple sparkline
[x] custom line width
[x] custom line color
[x] optional rounded corners
[x] fill
[x] embiggen individual points/change color
[x] different points modes [all/last/none]
[ ] animate between two sparklines
[ ] animate drawing a single sparkline
[ ] gesture detector to select closest point to tap
[ ] baseline
[x] different fill modes [above/below/none]
[x] fix edge points overflowing by offsetting by lineWidth
[ ] better corner rounding
[ ] axis labels
[x] gradient shader on line paint
[x] gradient shader on fill paint
[ ] multiple overlapping sparklines on a shared axis
[ ] tests

Buscar pacotes, repositórios e categorias de apps

flutter_sparkline

Instalar pacote

Visão geral do pacote

Casos de uso

Principais recursos

Indicado para

Considerações

README original