How do flutter components fit together? - flutter

Question

I'm picking up flutter for what's supposed to be a quick bit of app work. I must be missing something. Can someone please explain how stateful components fit together? If I have a webservice API that provides a data structure as JSON and I want to display parts of that in my app and I want to break the display down into components, how do the components get associated with the different bits of JSON?
At its simplest, I have a component to display a battery level:
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class BatteryPainter extends CustomPainter {
double level;
BatteryPainter({this.level = 0.75});
#override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = Colors.green
..strokeWidth = 5
..strokeJoin = StrokeJoin.round
..style = PaintingStyle.stroke;
Rect rect = Rect.fromCenter(
center: Offset(size.width / 2, size.height),
width: size.width * 0.9,
height: 50,
);
RRect rr = RRect.fromRectAndRadius(rect, const Radius.circular(5));
canvas.drawRRect(rr, paint);
rect = Rect.fromCenter(
center: Offset(size.width / 2, size.height),
width: size.width * 0.9 - 10,
height: 40
);
double right = rect.left + (rect.right - rect.left) * level;
rect = Rect.fromLTRB(rect.left, rect.top, right, rect.bottom);
rr = RRect.fromRectAndRadius(rect, const Radius.circular(5));
paint
..style = PaintingStyle.fill;
canvas.drawRRect(rr, paint);
}
#override
bool shouldRepaint(BatteryPainter oldDelegate) => oldDelegate.level != level;
}
class Battery extends StatefulWidget {
#override
_BatteryWidgetState createState() => _BatteryWidgetState();
}
class _BatteryWidgetState extends State<Battery> {
Widget build (BuildContext context) {
return LayoutBuilder(builder: (context, constraints) {
return CustomPaint(
painter:BatteryPainter(),
size:Size(constraints.maxWidth, 50)
);
});
}
}
But now if I create one of these:
Widget build(BuildContext context) {
return Container(
child: Column(children: [
...,
Battery()
]
);
}
How do I pass updates to the battery state in so that the component gets redrawn? If I keep a reference to the Battery object, that does me no good because it's the state that keeps the current battery level, not the widget, so there's no obvious way to change the level value. If I pass a level into the Battery() constructor and the use that value in createState that doesn't really help either, since Dart is pass-by-value so changing the value in the top-level component which knows about changes to this value don't change the value in the battery level display component.
How are fine-grained components meant to be connected to a model like this?

Answer 1

How do I pass updates to the battery state in so that the component gets redrawn?
There is no simple answer. You pick one of the many state management methods and go with it.