flutter_circular_chart/example/animated_radial_chart_example.dart
Victor Choueiri 0ac55b639b Add examples
2017-11-03 03:57:39 +02:00

110 lines
2.8 KiB
Dart

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')),
],
),
],
),
);
}
}