131 lines
3.4 KiB
Dart
131 lines
3.4 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;
|
|
Color labelColor = Colors.blue[200];
|
|
|
|
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];
|
|
}
|
|
labelColor = dialColor;
|
|
|
|
List<CircularStackEntry> data = <CircularStackEntry>[
|
|
new CircularStackEntry(
|
|
<CircularSegmentEntry>[
|
|
new CircularSegmentEntry(
|
|
value,
|
|
dialColor,
|
|
rankKey: 'percentage',
|
|
)
|
|
],
|
|
rankKey: 'percentage',
|
|
),
|
|
];
|
|
|
|
if (value > 100) {
|
|
labelColor = Colors.green[200];
|
|
|
|
data.add(new CircularStackEntry(
|
|
<CircularSegmentEntry>[
|
|
new CircularSegmentEntry(
|
|
value - 100,
|
|
Colors.green[200],
|
|
rankKey: 'percentage',
|
|
),
|
|
],
|
|
rankKey: 'percentage2',
|
|
));
|
|
}
|
|
|
|
return data;
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
TextStyle _labelStyle = Theme
|
|
.of(context)
|
|
.textTheme
|
|
.title
|
|
.merge(new TextStyle(color: labelColor));
|
|
|
|
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,
|
|
edgeStyle: SegmentEdgeStyle.Round,
|
|
percentageValues: true,
|
|
holeLabel: '$value%',
|
|
labelStyle: _labelStyle,
|
|
),
|
|
),
|
|
new Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
|
children: <Widget>[
|
|
new RaisedButton(
|
|
onPressed: _decrement,
|
|
child: const Icon(Icons.remove),
|
|
shape: const CircleBorder(),
|
|
color: Colors.red[200],
|
|
textColor: Colors.white,
|
|
),
|
|
new RaisedButton(
|
|
onPressed: _increment,
|
|
child: const Icon(Icons.add),
|
|
shape: const CircleBorder(),
|
|
color: Colors.blue[200],
|
|
textColor: Colors.white,
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|