How to draw from async data in dart? - mobile

Question

Im trying to read a file (async) and return a list of data. Then, I want to draw lines when every given number is line height using CustomPainter (I want to draw multiple lines)
class BarChartPainter extends CustomPainter {
#override
paint(Canvas canvas, Size size) {
final paint = new Paint()
..color = AppColors.primaryColor
..style = PaintingStyle.fill;
var futurePath = run();
futurePath.then((height) {
print('1: $height');
for (var lineHeight in height) {
print('2: $lineHeight');
canvas.drawRect(
new Rect.fromLTWH(1.0, 10.0, 10.0, lineHeight.toDouble()), paint);
}
}).catchError((e) => print(e));
}
#override
bool shouldRepaint(BarChartPainter old) => false;
}
print('1: $height') returns [75, 0, 0, 0, 0, 0, 0, 0, 0, 0, 86, 72, 10, 2, 0, 0, 0, 0, 0, (...), 0, 85, 22, 3, 1]
print('2: $lineHeight') returns 75
drawRect doesn't work. Error is : I/flutter (13751): Object has been disposed.

Answer 1

All of the data needs to be ready by the time the frame is drawn. Using a Future in this case means the data is only available after the canvas has been rendered.
One way to handle this is to move the file loading outside of the CustomPainter and render the painter when the data has been loaded. Here's an example loading from a JSON asset file:
class BarChart extends StatefulWidget {
#override
createState() => new _BarChartState();
}
class _BarChartState extends State<BarChart> {
var barHeights = <int>[];
#override
initState() {
super.initState();
_fetchBarHeights();
}
_fetchBarHeights() async {
final heights = await rootBundle
.loadStructuredData<List<int>>('assets/barchart.json', (jsonStr) async {
final jsonList = json.decode(jsonStr);
return (jsonList as List).map((i) => (i as int)).toList();
});
setState(() => barHeights = heights);
}
#override
Widget build(BuildContext context) {
return new Center(
child: new CustomPaint(
painter: new _BarChartPainter(barHeights),
));
}
}
class _BarChartPainter extends CustomPainter {
_BarChartPainter(this.barHeights);
final List<int> barHeights;
#override
paint(Canvas canvas, Size size) {
final paint = new Paint()
..color = Colors.blue
..style = PaintingStyle.fill;
var pos = 0.0;
barHeights.forEach((barHeight) {
canvas.drawRect(
new Rect.fromLTWH(pos, 10.0, 10.0, barHeight.toDouble()),
paint,
);
pos += 10;
});
}
#override
bool shouldRepaint(BarChartPainter old) =>
!(new ListEquality().equals(old.barHeights, barHeights));
}
}