Pakete, Repositories und App-Kategorien suchen

ducafecatFlutter-Ökosystem
Paketdetailsv0.1.0

flutter_sparkline

Schöne Sparkline-Charts für Flutter.

pub.dev API-Dokumentation Quellcode
30-Tage-Downloads
426
Likes
72
Pub-Punkte
30

Paket installieren

flutter pub add flutter_sparkline

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Flutter Sparkline ist ein leichtgewichtiges Paket zum Rendern kompakter, visuell ansprechender Sparkline-Charts in Flutter-Anwendungen. Es ermöglicht Entwicklern, kleine, einfache Liniendiagramme direkt innerhalb von Text oder UI-Elementen anzuzeigen, was ideal für die Darstellung von Trends über die Zeit in einem minimalen Raum ist. Das Paket unterstützt anpassbare Farben, Strichbreiten und Datenpunkt-Styling, wodurch es sich gut für Dashboards, Berichte und Analyse-Oberflächen eignet. Mit einer sauberen API und effizienter Leistung lässt es sich nahtlos in bestehende Flutter-Projekte integrieren.

Anwendungsfälle

  • Trenddaten in Dashboards anzeigen
  • Metriken innerhalb von Tabellen visualisieren
  • Verbesserung der App-Analytik-Oberfläche
  • Historische Daten in kompakter Form anzeigen
  • Integration von Mikro-Graphiken in Listenitems

Hauptmerkmale

  • Minimalistische, hochwirksame Visualisierungen
  • Anpassbare Linienfarbe und -breite
  • Glatte Kurvenrenderung
  • Unterstützt dynamische Datenaktualisierungen
  • Leichtgewichtig und schnelle Leistung

Geeignet für

  • Datenvisualisierung in begrenzten Räumen
  • Mobile-App-Analytik
  • Echtzeit-Metrik-Anzeigen
  • UIs, die subtile Trendindikatoren erfordern
  • Entwickler, die einfache Diagramme ohne Komplexität suchen

Hinweise

  • Beschränkt auf zeilenbasierte Sparklines
  • Keine interaktiven Funktionen wie Tooltips
  • Nicht geeignet für große Datensätze
  • Benötigt manuelle Behandlung der Daten Skalierung
  • Am besten mit kleinen, diskreten Datenserien verwenden

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

pub package

flutter_sparkline

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

Kategorien

Diagramme und Visualisierung

Quell-Repository

Projekte, die dieses Paket verwenden

Noch keine Daten verfügbar.