Plot – A Pretty Plotting Pack

flutter plot

a pretty plotting package for flutter apps. sizing and auto padding aren’t great right now, but tinkering with padding and font size 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

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

// 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

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!

121

download the full project for this post from the following button

this source is fully free for all time

download as zip