graph_widget 1.0.13

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 72

graph_widget #

Graph Widget package

Getting Started #

For installing tips see Installing section.

2. Usage #

  • Setup variables and GraphParams. Here you can setup your Graph.(For details look at 3. Graph Params) For example:
  • Create a GlobalKey:
GlobalKey<GraphWidgetInternalState> widgetKey = GlobalKey();
  • Create a List:
List<GraphPoint> values = List();
for (int i = 0; i < 100; i++) {
      var rng = new Random();
      values.add(GraphPoint(x: i.toDouble(), y: rng.nextInt(500).toDouble()));
    }
  • Setup GraphParams:
GraphParams params = GraphParams(
        graphPoints: values,
        height: 200.0,
        width: GraphConst.WRAP,
        top: 16.0,
       yGridSize: 10,
        yScale: GraphConst.AUTO,
        xScale: 10,
        startOverScroll: 0.0,
        endOverScroll: 0.0,
        enableRoundCorners: false,
        enableFill: false,
        enableMarks: false,
        enableGrid: false,
        enableScroll: true,
        textStyle: getTextStyle(),
        marksBgdPaint: _getMarksBgd(),
        gradient: _getGradient());
  • Next Setup a Widget For example:
    GraphWidget(widgetKey: widgetKey, params: params)
  • For scroll or move Graph you can use functions:
 widgetKey.currentState.moveTo(int position);

or

 widgetKey.currentState.scrollTo(int position);

Note: position is index in list

3. Graph Params #

  • Points of Graph. Array of [GraphPoint(x: value, y: value)]
List<GraphPoint> graphPoints
  • Left (X) widget offset. Default is 0.0.
double left
  • Top (Y) widget offset. Default is 0.0.
double top
  • Additional free area for scrolling before Graph. Default is 0.0.
double startOverScroll
  • Additional free area for scrolling after Graph. Default is 0.0.
double endOverScroll
  • Count of grid lines at Y coordinate. Default is 10.
int yGridSize
  • Duration of scroll animation in milliseconds
int scrollDuration
  • Points radius [double]
double pointRadius
  • Max point at screen at X coordinate Using only when scrolling is enabled; To use Y scale size depending on Graph max value - use GraphConst.AUTO.
int yScale
  • Max point of Y coordinate
int xScale
  • Show markings every X value For example: showMarkingsEveryX = 5; ,markings = 5,10,15 etc to enable all markings set showMarkingsEveryX to 0.
int showMarkingsEveryX
  • Enable or disable rounding Graph corners.

Disabled by default.

bool enableRoundCorners
  • Enable or disable fill Graph with paint or Gradient. Disabled by default.
bool enableFill
  • Enable or disable text markings at the bottom of Graph. Disabled by default.
bool enableMarks
  • Enable or disable grid. Disabled by default.
bool enableGrid
  • Enable or disable scrolling. Disabled by default.
bool enableScroll
  • Enable or disable scroll fling. Disabled by default.
bool enableFling
  • Enable or disable points. Disabled by default.
bool enablePoints
  • Widget height. To use screen height use GraphConst.WRAP.
double height
  • Widget width. To use screen width use GraphConst.WRAP.
double width
  • Paint of Graph.
Paint mainLinePaint
  • Gradient of Graph paint.
Gradient gradient
  • Paint of Grid.
Paint gridPaint
  • Paint of Point at Graph.
Paint pointsPaint
  • Paint of background.
Paint bgdPaint
  • Paint of Markings background.
Paint marksBgdPaint
  • Markings text style UI.TextStyle.
UI.TextStyle textStyle

[1.0.13] - 26.02.2019

  • 1.0.13 release
  • fixed readme file

[1.0.1] - 26.02.2019

  • 1.0.1 release
  • fixed example files

[1.0.0] - 26.02.2019

  • Initial release
  • added main package files
  • added example

example/main.dart

import 'package:flutter/material.dart';
import 'package:graph_widget/graph_widget.dart';
import 'dart:ui' as UI;
import 'dart:math';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Graph Widget Demo App ',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Home());
  }
}

class Home extends StatefulWidget {
  HomeState createState() => HomeState();
}

GlobalKey<GraphWidgetInternalState> widgetKey = GlobalKey();
List<GraphPoint> values = List();

class HomeState extends State<Home> {
  GraphParams graphParams;

  @override
  void initState() {
    super.initState();
    for (int i = 0; i < 100; i++) {
      var rng = new Random();
      values.add(GraphPoint(x: i.toDouble(), y: rng.nextInt(500).toDouble()));
    }

    graphParams = GraphParams(
        graphPoints: values,
        height: 200.0,
        width: GraphConst.WRAP,
        top: 16.0,
        yGridSize: 10,
        yScale: GraphConst.AUTO,
        xScale: 10,
        startOverScroll: 0.0,
        endOverScroll: 0.0,
        enableRoundCorners: false,
        enableFill: false,
        enableMarks: false,
        enableGrid: false,
        enableScroll: true,
        textStyle: getTextStyle(),
        marksBgdPaint: _getMarksBgd(),
        gradient: _getGradient());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        color: Colors.white,
        child: Padding(
          padding: const EdgeInsets.only(top: 12.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              GraphWidget(widgetKey: widgetKey, params: graphParams),
              Padding(
                padding: const EdgeInsets.only(top: 16.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  mainAxisSize: MainAxisSize.max,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    RaisedButton(
                      child: Text(
                        (graphParams.enableFill ? 'Off ' : 'On ') + 'Fill',
                        style: TextStyle(color: Colors.white),
                      ),
                      color: graphParams.enableFill
                          ? Colors.green
                          : Colors.redAccent,
                      onPressed: () {
                        setState(() {
                          graphParams.enableFill = !graphParams.enableFill;
                        });
                      },
                    ),
                    RaisedButton(
                      child: Text(
                        (graphParams.enableRoundCorners ? 'Off ' : 'On ') +
                            'Round',
                        style: TextStyle(color: Colors.white, fontSize: 12.0),
                      ),
                      color: graphParams.enableRoundCorners
                          ? Colors.green
                          : Colors.redAccent,
                      onPressed: () {
                        setState(() {
                          graphParams.enableRoundCorners =
                              !graphParams.enableRoundCorners;
                        });
                      },
                    ),
                    RaisedButton(
                      child: Text(
                        (graphParams.enableMarks ? 'Off ' : 'On ') + 'Marks',
                        style: TextStyle(color: Colors.white, fontSize: 12.0),
                      ),
                      color: graphParams.enableMarks
                          ? Colors.green
                          : Colors.redAccent,
                      onPressed: () {
                        setState(() {
                          graphParams.enableMarks = !graphParams.enableMarks;
                        });
                      },
                    ),
                  ],
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  RaisedButton(
                    child: Text(
                      (graphParams.gradient != null ? 'Off ' : 'On ') +
                          'Gradient',
                      style: TextStyle(color: Colors.white, fontSize: 12.0),
                    ),
                    color: graphParams.gradient == null
                        ? Colors.green
                        : Colors.redAccent,
                    onPressed: () {
                      setState(() {
                        graphParams.gradient = graphParams.gradient == null
                            ? _getGradient()
                            : null;
                      });
                    },
                  ),
                  RaisedButton(
                    child: Text(
                      (graphParams.enableGrid ? 'Off ' : 'On ') + 'Grid',
                      style: TextStyle(color: Colors.white, fontSize: 12.0),
                    ),
                    color: graphParams.enableGrid
                        ? Colors.green
                        : Colors.redAccent,
                    onPressed: () {
                      setState(() {
                        graphParams.enableGrid = !graphParams.enableGrid;
                      });
                    },
                  ),
                  RaisedButton(
                    child: Text(
                      (graphParams.enableScroll ? 'Off ' : 'On ') + 'Scroll',
                      style: TextStyle(color: Colors.white, fontSize: 12.0),
                    ),
                    color: graphParams.enableScroll
                        ? Colors.green
                        : Colors.redAccent,
                    onPressed: () {
                      setState(() {
                        graphParams.enableScroll = !graphParams.enableScroll;
                        graphParams.showMarkingsEveryX =
                            graphParams.enableScroll ? 0 : 10;
                      });
                    },
                  )
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  RaisedButton(
                    child: Text(
                      (graphParams.enableFling ? 'Off ' : 'On ') + 'Fling',
                      style: TextStyle(color: Colors.white),
                    ),
                    color: graphParams.enableFling
                        ? Colors.green
                        : Colors.redAccent,
                    onPressed: () {
                      setState(() {
                        graphParams.enableFling = !graphParams.enableFling;
                      });
                    },
                  ),
                  RaisedButton(
                    child: Text(
                      (graphParams.enablePoints ? 'Off ' : 'On ') + 'Points',
                      style: TextStyle(color: Colors.white),
                    ),
                    color: graphParams.enablePoints
                        ? Colors.green
                        : Colors.redAccent,
                    onPressed: () {
                      setState(() {
                        graphParams.enablePoints = !graphParams.enablePoints;
                      });
                    },
                  )
                ],
              ),
              Flexible(
                child: ListView.separated(
                    itemCount: values.length,
                    separatorBuilder: (context, position) {
                      return Divider(color: Colors.black);
                    },
                    itemBuilder: (context, position) {
                      return ListTile(
                        leading: Row(
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            RaisedButton(
                                child: Text(
                                  'Move to',
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 12.0),
                                ),
                                color: Colors.blue,
                                onPressed: () {
                                  widgetKey.currentState.moveTo(position);
                                }),
                            RaisedButton(
                                child: Text(
                                  'Scroll to',
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 12.0),
                                ),
                                color: Colors.blue,
                                onPressed: () {
                                  widgetKey.currentState.scrollTo(position);
                                })
                          ],
                        ),
                        title: Text('X = ' +
                            values[position].x.toString() +
                            '\nY = ' +
                            values[position].y.toString()),
                      );
                    }),
              )
            ],
          ),
        ),
      ),
    );
  }

  UI.TextStyle getTextStyle() {
    return UI.TextStyle(fontSize: 12.0, color: Colors.white);
  }

  Gradient _getGradient() {
    return new LinearGradient(
      begin: Alignment(1.0, 1.0),
      tileMode: TileMode.clamp,
      colors: <Color>[
        Colors.red,
        Colors.black,
      ],
      stops: [
        0.0,
        1.0,
      ],
    );
  }

  Paint _getMarksBgd() {
    return Paint()
      ..style = PaintingStyle.fill
      ..color = Colors.red
      ..isAntiAlias = true;
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  graph_widget: ^1.0.13

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:graph_widget/graph_widget.dart';
  
Version Uploaded Documentation Archive
1.0.13 Feb 26, 2019 Go to the documentation of graph_widget 1.0.13 Download graph_widget 1.0.13 archive
1.0.12 Feb 26, 2019 Go to the documentation of graph_widget 1.0.12 Download graph_widget 1.0.12 archive
1.0.11 Feb 26, 2019 Go to the documentation of graph_widget 1.0.11 Download graph_widget 1.0.11 archive
1.0.1 Feb 26, 2019 Go to the documentation of graph_widget 1.0.1 Download graph_widget 1.0.1 archive
1.0.0 Feb 26, 2019 Go to the documentation of graph_widget 1.0.0 Download graph_widget 1.0.0 archive
0.0.1 Feb 26, 2019 Go to the documentation of graph_widget 0.0.1 Download graph_widget 0.0.1 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
46
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
95
Overall:
Weighted score of the above. [more]
72
Learn more about scoring.

We analyzed this package on Jun 25, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.3.2
  • pana: 0.12.18
  • Flutter: 1.5.4-hotfix.2

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Maintenance issues and suggestions

Support latest dependencies. (-5 points)

The version constraint in pubspec.yaml does not support the latest published versions for 1 dependency.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test