graph_widget 1.0.13

GraphWidget package. Building a simple and customized graphics.

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;
  }
}