graph_widget 1.0.12 graph_widget: ^1.0.12 copied to clipboard
GraphWidget package. Building a simple and customized graphics.
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;
}
}