A pretty plotting package for Flutter apps

Last update: Jun 7, 2022

flutter_plot

R. C. Howell - 2018

A pretty plotting package for Flutter apps. Sizing and autopadding isn't great right now, but tinkering with padding and fontSize will allow for you to align things well. You can also check out /docs to learn more, but it really is a single file package.

Example 1

Screenshot

This example is more complicated than typical because it's showing off the styling capability.

final List<Point> data = [
  const Point(21.0, 19.0),
  const Point(3.0, 7.0),
  const Point(8.0, 9.0),
  const Point(11.0, 14.0),
  const Point(18.0, 17.0),
  const Point(7.0, 8.0),
  const Point(-4.0, -4.0),
  const Point(6.0, 12.0),
];

new Card(
  child: new Column(
    children: <Widget>[
      new Container(
        padding: const EdgeInsets.only(top: 12.0),
        child: new Text('Super Neat Plot'),
      ),
      new Container(
        child: new Plot(
          height: 200.0,
          data: widget.data,
          gridSize: new Offset(2.0, 2.0),
          style: new PlotStyle(
            pointRadius: 3.0,
            outlineRadius: 1.0,
            primary: Colors.white,
            secondary: Colors.orange,
            textStyle: new TextStyle(
              fontSize: 8.0,
              color: Colors.blueGrey,
            ),
            axis: Colors.blueGrey[600],
            gridline: Colors.blueGrey[100],
          ),
          padding: const EdgeInsets.fromLTRB(40.0, 12.0, 12.0, 40.0),
          xTitle: 'My X Title',
          yTitle: 'My Y Title',
          ),
      ),
    ],
  ),
),

Example 2

Screenshot 2

// Using the same data as before

Plot simplePlot = new Plot(
  height: 200.0,
  data: widget.data,
  gridSize: new Offset(2.0, 2.0),
  style: new PlotStyle(
    primary: Colors.black,
    textStyle: new TextStyle(
      fontSize: 8.0,
      color: Colors.blueGrey,
    ),
    axis: Colors.blueGrey[600],
  ),
  padding: const EdgeInsets.fromLTRB(40.0, 12.0, 12.0, 40.0),
);

Displaying trace lines and coordinates

Screenshot 4 Screenshot 5 Screenshot 6

final List<Point> data = [
  const Point(9, 1),
  const Point(-7.0, 19.0),
  const Point(13.0, 5.0),
  const Point(-10.0, -4.0),
  const Point(16.0, 12.0),
];

new Card(
  child: new Column(
    children: <Widget>[
      new Container(
        padding: const EdgeInsets.only(top: 12.0),
        child: new Text('Super Neat Plot'),
      ),
      new Container(
        child: new Plot(
          height: 200.0,
          data: widget.data,
          gridSize: new Offset(2.0, 2.0),
          style: new PlotStyle(
            axisStrokeWidth: 2.0,
            pointRadius: 3.0,
            outlineRadius: 1.0,
            primary: Colors.yellow,
            secondary: Colors.red,
            trace: true,
            traceStokeWidth: 3.0,
            traceColor: Colors.blueGrey,
            traceClose: true,
            showCoordinates: true,
            textStyle: new TextStyle(
              fontSize: 8.0,
              color: Colors.grey,
            ),
            axis: Colors.blueGrey[600],
            gridline: Colors.blueGrey[100],
          ),
            axis: Colors.blueGrey[600],
            gridline: Colors.blueGrey[100],
          ),
          padding: const EdgeInsets.fromLTRB(40.0, 12.0, 12.0, 40.0),
          xTitle: 'My X Title',
          yTitle: 'My Y Title',
          ),
      ),
    ],
  ),
),

How to Use

  1. Add as a dependency
  2. import 'package:flutter_plot/flutter_plot.dart';
  3. See examples! There's not much to this package yet!

GitHub

https://github.com/RCHowell/flutter_plot
You might also like...

A Flutter widget to use Apache ECharts (incubating) in a reactive way.

A Flutter widget to use Apache ECharts (incubating) in a reactive way.

δΈ­ζ–‡ [![pub](https://img.shields.io/pub/v/flutter_echarts.svg)](https://pub.dev/packages/flutter_echarts) A Flutter widget to use Apache ECharts in a re

Aug 13, 2022

A Flutter data visualization library based on Grammar of Graphics.

A Flutter data visualization library based on Grammar of Graphics.

Graphic is now under a total refactoring. The prior available version code is here: v0.3.0 . A Flutter data visualization library based on Grammar of

Aug 12, 2022

Flutter cryptocurrency UI dashboard.

Flutter cryptocurrency UI dashboard.

πŸ”₯ πŸ”₯ Crypto Dashboard Flutter UI Kit πŸ”₯ πŸ”₯ πŸ’« ⭐️ ⭐️ πŸ‘¨β€πŸ’» Free Flutter UI Kits based on designs on UpLabs πŸ’“ . Watch Youtube Speed code Tutorial Here

Jul 16, 2022

A scrollable time chart in Flutter.

A scrollable time chart in Flutter.

time_chart An amazing time chart in Flutter. Chart Types TimeChart AmountChart Getting Started 1 - Depend on it Add it to your package's pubspec.yaml

Jul 23, 2022

[reborned barcode_scan] A flutter plugin for reading 2D barcodes and QR codes.

Reborned πŸŽ‰ Original barcode_scan was discontinued, so barcode_scan2 was borned with sound null safety support πŸŽ‰ barcode_scan2 A flutter plugin for s

Aug 11, 2022

A library to draw fantastic bar charts race in Flutter

A library to draw fantastic bar charts race in Flutter

bar_chart_race The first library to draw fantastic bar charts race in Flutter Usage Let's get started add the dependencies to your app: dependencies:

Jun 24, 2022

This project is used to introduce the use of flutter canvas, include draw chart, clip image's path and draw progress indicator.

This project is used to introduce the use of flutter canvas, include draw chart, clip image's path and draw progress indicator.

flutter_canvas This project is used to introduce the use of flutter canvas, include draw chart, clip image's path and draw progress indicator. draw ch

Jan 14, 2022

Maybe this is the best k chart in Flutter.Support drag,scale,long press,fling.And easy to use.

Maybe this is the best k chart in Flutter.Support drag,scale,long press,fling.And easy to use.

k_chart Maybe this is the best k chart in Flutter.Support drag,scale,long press,fling.And easy to use. display image gif Getting Started Install depen

Aug 2, 2022

Sleek circular slider for Flutter

Sleek circular slider for Flutter

Sleek circular slider/progress bar & spinner for Flutter A highly customizable circular slider/progress bar & spinner for Flutter. Getting Started Ins

Aug 7, 2022
Comments
  • 1. Plotting problem

    Maybe this isn't the supposed usage, but I was using your lib to plot geometrical transformations, and simply can't plot a square. Is there any way to get this right?

    Example:

    class _PlotterState extends State<Plotter> {
      List<Point> originalShape = [
        Point(1, 1),
        Point(4, 1),
        Point(1, 4),
        Point(4, 4)
      ];
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("Shape Plotting"),
            backgroundColor: Colors.blueGrey[900],
          ),
          body: Center(
            child: Container(
              width: 500,
              padding: EdgeInsets.all(10),
              child: Plot(
                height: 400.0,
                data: originalShape,
                centered: true,
                gridSize: Offset(2.0, 2.0),
                style: PlotStyle(
                    pointRadius: 3.0,
                    outlineRadius: 1.0,
                    primary: Colors.white,
                    secondary: Colors.blueAccent,
                    textStyle: TextStyle(
                      fontSize: 10.0,
                      color: Colors.blueGrey,
                    ),
                    axis: Colors.blueGrey[600],
                    gridline: Colors.blueGrey[100],
                    trace: true,
                    traceClose: true),
                padding: EdgeInsets.fromLTRB(40.0, 12.0, 12.0, 40.0),
                xTitle: 'X',
                yTitle: 'Y',
              ),
            ),
          ),
        );
      }
    

    Result

    image

    Reviewed by h80r at 2021-02-13 16:06
  • 2. Add centered parameter

    Adds a centered parameter (bool), which centers the origin of the plot (0,0). The X and Y axis length becomes the same in order to achieve the centering.

    Screenshot

    Screenshot_1597583414

    Reviewed by Coec0 at 2020-08-16 14:12
  • 3. Null-safety migration

    Dart/Flutter null-safety is at the end of beta and many apps are already using it, obviously this package should have it. I hacked something up in a few minutes and it works in my app.

    Reviewed by pixelcmtd at 2021-04-03 23:14
  • 4. Added line trace and display coordinates

    Hi,

    I added lines trace and display of coordinates above each point, both of these have setters soy they can be toggled, for example with a button.

    These are the properties added to the PlotStyle class:

    **### /// If true lines will be drawn between each consecutive point /// /// Defaluts to false bool trace;

    /// If true a line will be traced between the last point and the first /// /// Defaluts to false bool traceClose;

    /// Color to draw trace lines with /// /// Defaults to #FF0000FF (Blue) final Color traceColor;

    /// Trace line stroke width /// /// Defaults to 2.0 final double traceStokeWidth;

    /// If true each point's coordinates will be displayed above each point /// /// Defaults to false bool showCoordinates;**

    Reviewed by RaulMarquezInclan at 2018-09-02 00:38

Related

A flutter package which makes it easier to plot different types of charts with lots of customization, made purely in dart
A flutter package which makes it easier to plot different types of charts with lots of customization, made purely in dart

multi_charts It is a library that provides different types of charts to plot data points. Currently it supports only Radar Chart, but will support mor

Mar 29, 2022
Flutter package for creating simple yet modern looking charts
Flutter package for creating simple yet modern looking charts

A package for creating simple yet modern looking charts. Five chart types Bar Gauge Line Pie Radar Canvas + DOM modern_charts combines Canvas and DOM

May 2, 2022
Animating Location Pin Flutter Package
Animating Location Pin Flutter Package

Animating Location Pin This Flutter package provides a Animating Location Pin Widget which can be used while fetching device location. ?? Installation

Jun 15, 2021
Sliver bar chart - A package that supports Bar Chart in a Flutter Sliver
Sliver bar chart - A package that supports Bar Chart in a Flutter Sliver

Sliver bar chart - A package that supports Bar Chart in a Flutter Sliver. This Package allows us to add Bar Chart in Sliver and sets a Bar Chart as a Header on Slivers Scroll.

Apr 21, 2022
Charts Library for Flutter, written in Dart with Flutter.
Charts Library for Flutter, written in Dart with Flutter.

Table of Contents New in the current release Illustration of the new "iterative auto layout" feature Autolayout step 1 Autolayout step 2 Autolayout st

Aug 6, 2022
Animated radial and pie charts for Flutter
Animated radial and pie charts for Flutter

Flutter Circular Chart A library for creating animated circular chart widgets with Flutter, inspired by Zero to One with Flutter. Overview Create easi

Aug 6, 2022
Beautiful sparkline charts for Flutter
Beautiful sparkline charts for Flutter

flutter_sparkline Beautiful sparkline charts for Flutter. Installation Install the latest version from pub. Quick Start Import the package, create a S

Jul 31, 2022
Elegant OHLC Candlestick and Trade Volume charts for @Flutter
Elegant OHLC Candlestick and Trade Volume charts for @Flutter

flutter_candlesticks Elegant OHLC Candlestick and Trade Volume charts for Flutter Usage Install for Flutter with pub. Property Description data Requir

Aug 7, 2022
A powerful Flutter chart library, currently supporting Line Chart, Bar Chart, Pie Chart, Scatter Chart and Radar Chart.
A powerful Flutter chart library, currently supporting Line Chart, Bar Chart, Pie Chart, Scatter Chart and Radar Chart.

FL Chart ?? A library to draw fantastic charts in Flutter ?? Chart Types LineChart BarChart PieChart Read More Read More Read More ScatterChart RadarC

Aug 12, 2022
A beautiful bezier line chart widget for flutter that is highly interactive and configurable.
A beautiful bezier line chart widget for flutter that is highly interactive and configurable.

Bezier Chart A beautiful bezier line chart widget for flutter that is highly interactive and configurable. Features Multi bezier lines Allow numbers a

Jul 27, 2022