Want to make dynamic chart in flutter? I suggest using Map type instead. If you want to use List, whenever you want to apply any changes into the element of the data, you need to search through it and find the right element. But with Map type, you can just store the key and use it later.
Check out the corrected code and let me know if you have any question about it:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | import 'package:flutter/material.dart'; import 'package:charts_flutter/flutter.dart' as charts; import 'package:intl/intl.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => new _MyHomePageState(); } class ClicksPerYear { final String year; int clicks; final charts.Color color; ClicksPerYear(this.year, this.clicks, Color color) : this.color = new charts.Color( r: color.red, g: color.green, b: color.blue, a: color.alpha); incrementClick() { clicks++; } } class _MyHomePageState extends State<MyHomePage> { var currentTime = DateFormat('dd/MM/yyyy').format(DateTime.now()); Map<String, ClicksPerYear> data; @override void initState() { data = { '2015': ClicksPerYear('2015', 3, Colors.red), '2016': ClicksPerYear('2016', 7, Colors.orange), '2017': ClicksPerYear('2017', 42, Colors.yellow), '$currentTime': ClicksPerYear('$currentTime', 0, Colors.green), }; super.initState(); } @override Widget build(BuildContext context) { var series = [ new charts.Series( domainFn: (ClicksPerYear clickData, _) => clickData.year, measureFn: (ClicksPerYear clickData, _) => clickData.clicks, colorFn: (ClicksPerYear clickData, _) => clickData.color, id: 'Clicks', data: data.values.toList()), ]; var chart = new charts.BarChart( series, animate: true, ); var chartWidget = new Padding( padding: new EdgeInsets.all(32.0), child: new SizedBox( height: 200.0, child: chart, ), ); return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: new Center(child: chartWidget), floatingActionButton: Row( mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[ Padding( padding: const EdgeInsets.all(8.0), child: FloatingActionButton( onPressed: () { setState(() { data.putIfAbsent( '2012', () => ClicksPerYear('2012', 42, Colors.teal)); }); }, child: Icon( Icons.add, ), backgroundColor: Colors.red, ), ), Padding( padding: const EdgeInsets.all(8.0), child: FloatingActionButton( onPressed: () { setState(() { DateTime now = DateTime.now(); currentTime = DateFormat('dd/MM/yyyy').format(now); data[currentTime].incrementClick(); }); }, child: Icon( Icons.add, ), ), ), ], ), ); } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
