sphericalkat/flutter_circular_chart
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Add examples

Browse Source
This commit is contained in:
Victor Choueiri 2017-11-03 03:57:39 +02:00
parent e4f1eda3e6
commit 0ac55b639b
2 changed files with 195 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
example/animated_pie_chart_example.dart Normal file
View File

@ -0,0 +1,86 @@
import 'package:flutter/material.dart';
import 'package:flutter_circular_chart/flutter_circular_chart.dart';
void main() {
runApp(new MaterialApp(
home: new AnimatedPieChartExample(),
));
}
final List<List<CircularStackEntry>> _quarterlyProfitPieData = [
<CircularStackEntry>[
new CircularStackEntry(
<CircularSegmentEntry>[
new CircularSegmentEntry(500.0, Colors.red[200], rankKey: 'Q1'),
new CircularSegmentEntry(1000.0, Colors.green[200], rankKey: 'Q2'),
new CircularSegmentEntry(2000.0, Colors.blue[200], rankKey: 'Q3'),
new CircularSegmentEntry(1000.0, Colors.yellow[200], rankKey: 'Q4'),
],
rankKey: 'Quarterly Profits',
),
],
<CircularStackEntry>[
new CircularStackEntry(
<CircularSegmentEntry>[
new CircularSegmentEntry(1500.0, Colors.red[200], rankKey: 'Q1'),
new CircularSegmentEntry(750.0, Colors.green[200], rankKey: 'Q2'),
new CircularSegmentEntry(2000.0, Colors.blue[200], rankKey: 'Q3'),
new CircularSegmentEntry(1000.0, Colors.yellow[200], rankKey: 'Q4'),
],
rankKey: 'Quarterly Profits',
),
],
<CircularStackEntry>[
new CircularStackEntry(
<CircularSegmentEntry>[
new CircularSegmentEntry(1800.0, Colors.red[200], rankKey: 'Q1'),
new CircularSegmentEntry(2900.0, Colors.green[200], rankKey: 'Q2'),
new CircularSegmentEntry(4000.0, Colors.blue[200], rankKey: 'Q3'),
new CircularSegmentEntry(7000.0, Colors.yellow[200], rankKey: 'Q4'),
],
rankKey: 'Quarterly Profits',
),
],
];
class AnimatedPieChartExample extends StatefulWidget {
@override
_AnimatedPieChartExampleState createState() =>
new _AnimatedPieChartExampleState();
}
class _AnimatedPieChartExampleState extends State<AnimatedPieChartExample> {
final GlobalKey<AnimatedCircularChartState> _chartKey =
new GlobalKey<AnimatedCircularChartState>();
final _chartSize = const Size(300.0, 300.0);
int sampleIndex = 0;
void _cycleSamples() {
setState(() {
sampleIndex++;
List<CircularStackEntry> data = _quarterlyProfitPieData[sampleIndex % 3];
_chartKey.currentState.updateData(data);
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: const Text('Quarterly Profit'),
),
body: new Center(
child: new AnimatedCircularChart(
key: _chartKey,
size: _chartSize,
initialChartData: _quarterlyProfitPieData[0],
chartType: CircularChartType.Pie,
),
),
floatingActionButton: new FloatingActionButton(
child: new Icon(Icons.refresh),
onPressed: _cycleSamples,
),
);
}
}

109
example/animated_radial_chart_example.dart Normal file
View File

@ -0,0 +1,109 @@
import 'package:flutter/material.dart';
import 'package:flutter_circular_chart/flutter_circular_chart.dart';
void main() {
runApp(new MaterialApp(
home: new AnimatedRadialChartExample(),
));
}
class AnimatedRadialChartExample extends StatefulWidget {
@override
_AnimatedRadialChartExampleState createState() =>
new _AnimatedRadialChartExampleState();
}
class _AnimatedRadialChartExampleState
extends State<AnimatedRadialChartExample> {
final GlobalKey<AnimatedCircularChartState> _chartKey =
new GlobalKey<AnimatedCircularChartState>();
final _chartSize = const Size(200.0, 200.0);
double value = 50.0;
void _increment() {
setState(() {
value += 10;
List<CircularStackEntry> data = _generateChartData(value);
_chartKey.currentState.updateData(data);
});
}
void _decrement() {
setState(() {
value -= 10;
List<CircularStackEntry> data = _generateChartData(value);
_chartKey.currentState.updateData(data);
});
}
List<CircularStackEntry> _generateChartData(double value) {
Color dialColor = Colors.blue[200];
if (value < 0) {
dialColor = Colors.red[200];
} else if (value < 50) {
dialColor = Colors.yellow[200];
}
List<CircularStackEntry> data = <CircularStackEntry>[
new CircularStackEntry(
<CircularSegmentEntry>[
new CircularSegmentEntry(
value,
dialColor,
rankKey: 'percentage',
)
],
rankKey: 'percentage',
),
];
if (value > 100) {
data.add(new CircularStackEntry(
<CircularSegmentEntry>[
new CircularSegmentEntry(
value - 100,
Colors.green[200],
rankKey: 'percentage',
),
],
rankKey: 'percentage2',
));
}
return data;
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: const Text('Percentage Dial'),
),
body: new Column(
children: <Widget>[
new Container(
child: new AnimatedCircularChart(
key: _chartKey,
size: _chartSize,
initialChartData: _generateChartData(value),
chartType: CircularChartType.Radial,
percentageValues: true,
),
),
new Text(
'%$value',
style: Theme.of(context).textTheme.title,
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new RaisedButton(onPressed: _increment, child: const Text('+10')),
new RaisedButton(onPressed: _decrement, child: const Text('-10')),
],
),
],
),
);
}
}