diff --git a/example/animated_pie_chart_example.dart b/example/animated_pie_chart_example.dart new file mode 100644 index 0000000..8d09159 --- /dev/null +++ b/example/animated_pie_chart_example.dart @@ -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> _quarterlyProfitPieData = [ + [ + new CircularStackEntry( + [ + 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', + ), + ], + [ + new CircularStackEntry( + [ + 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', + ), + ], + [ + new CircularStackEntry( + [ + 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 { + final GlobalKey _chartKey = + new GlobalKey(); + final _chartSize = const Size(300.0, 300.0); + int sampleIndex = 0; + + void _cycleSamples() { + setState(() { + sampleIndex++; + List 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, + ), + ); + } +} diff --git a/example/animated_radial_chart_example.dart b/example/animated_radial_chart_example.dart new file mode 100644 index 0000000..5fe995e --- /dev/null +++ b/example/animated_radial_chart_example.dart @@ -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 { + final GlobalKey _chartKey = + new GlobalKey(); + final _chartSize = const Size(200.0, 200.0); + + double value = 50.0; + + void _increment() { + setState(() { + value += 10; + List data = _generateChartData(value); + _chartKey.currentState.updateData(data); + }); + } + + void _decrement() { + setState(() { + value -= 10; + List data = _generateChartData(value); + _chartKey.currentState.updateData(data); + }); + } + + List _generateChartData(double value) { + Color dialColor = Colors.blue[200]; + if (value < 0) { + dialColor = Colors.red[200]; + } else if (value < 50) { + dialColor = Colors.yellow[200]; + } + + List data = [ + new CircularStackEntry( + [ + new CircularSegmentEntry( + value, + dialColor, + rankKey: 'percentage', + ) + ], + rankKey: 'percentage', + ), + ]; + + if (value > 100) { + data.add(new CircularStackEntry( + [ + 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: [ + 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: [ + new RaisedButton(onPressed: _increment, child: const Text('+10')), + new RaisedButton(onPressed: _decrement, child: const Text('-10')), + ], + ), + ], + ), + ); + } +}