Paint on Image after Image loaded from the network - dart

Question

I'm loading the images from api call and then showing the image and some data in listview in flutter and drawing bounding box on image, but since my image is getting loaded from url my UI gets disturbed,How I ensure that the Canvas will paint after the image is loaded from the network url in flutter layout.Is there any callbacks which I can use.
class ListPage extends StatefulWidget {
ListPage({Key key, this.title}) : super(key: key);
final String title;
#override
_ListPageState createState() => _ListPageState();
}
class _ListPageState extends State<ListPage> {
Future<List<ProcessedInference>> processInference;
#override
void initState() {
processInference = localInference();
super.initState();
}
#override
Widget build(BuildContext context) {
final toAppBar = AppBar(
elevation: 0.1,
backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
title: Text(widget.title),
actions: <Widget>[
IconButton(
icon: Icon(Icons.list),
onPressed: () {},
)
],
);
Card makeCard(ProcessedInference pro) => Card(
elevation: 2.0,
margin: new EdgeInsets.symmetric(horizontal: 5.0, vertical: 5.0),
child: Container(
child: Column(
children: <Widget>[
CustomPaint(
size: Size(640.0, 480.0),
foregroundPainter: RectPainter(pro.boundingBox),
child: Image.network(pro.frameUrl),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 8.0,
),
Text(
"Spotted: ${pro.peopleCount}",
style: TextStyle(fontSize: 16.0),
textAlign: TextAlign.start,
),
SizedBox(
height: 8.0,
),
Text(
"Spotted on : ${pro.timeStamp}",
style: TextStyle(fontSize: 16.0),
textAlign: TextAlign.start,
),
SizedBox(
height: 8.0,
),
],
),
],
),
),
);
final makeBody = Container(
child: FutureBuilder<List<ProcessedInference>>(
future: processInference,
builder: (context, snapshot) {
if (snapshot.hasData) {
print("Has data");
if (snapshot.data == null || snapshot.data.length <= 0) {
return Center(
child: Text("No results", textAlign: TextAlign.center));
} else {
return ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return makeCard(snapshot.data[index]);
});
}
} else if (snapshot.hasError) {
print("has error ");
return Text("${snapshot.error}");
}
return CircularProgressIndicator();
},
),
);
return Scaffold(
appBar: toAppBar,
body: makeBody,
);
}
}
class RectPainter extends CustomPainter {
final List<List<double>> boundingBox;
RectPainter(this.boundingBox);
#override
void paint(Canvas canvas, Size size) {
final paint = Paint();
paint.color = Colors.deepOrange;
paint.style = PaintingStyle.stroke;
paint.strokeWidth = 2.0;
final boxPaint = Paint();
boxPaint.color = Colors.amberAccent;
boxPaint.style = PaintingStyle.fill;
boxPaint.strokeWidth = 2.0;
for (var i = 0; i < boundingBox.length; i++) {
var confidence = boundingBox[i][0];
var left = boundingBox[i][1] * size.width;
var top = boundingBox[i][2] * size.height;
var right = boundingBox[i][3] * size.width;
var bottom = boundingBox[i][4] * size.height;
var rect = Rect.fromLTRB(left, top - 15, right, bottom);
canvas.drawRect(rect, paint);
TextSpan span = new TextSpan(
style: new TextStyle(color: Colors.red[600], fontSize: 10.0),
text: confidence.toStringAsFixed(2));
TextPainter tp = new TextPainter(
text: span,
textAlign: TextAlign.center,
textDirection: TextDirection.ltr);
tp.layout();
canvas.drawRect(
Rect.fromLTRB(
rect.left, rect.top, rect.left + tp.width, rect.top + tp.height),
boxPaint);
tp.paint(canvas, new Offset(rect.left, rect.top));
}
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}