Flutter scoped model not updating all descendants" - flutter

Question

My app is intended to consume live sensors data from an API using flutter scoped_model. The data is a JSON array like these:
[
{
"id": 4,
"device_name": "fermentero2",
"active_beer": 4,
"active_beer_name": "Sourgobo",
"controller_fridge_temp": "Fridge --.- 1.0 ░C",
"controller_beer_temp": "Beer 28.6 10.0 ░C",
"active_beer_temp": 28.63,
"active_fridge_temp": null,
"active_beer_set": 10,
"active_fridge_set": 1,
"controller_mode": "b"
},
{
"id": 6,
"device_name": "brewpi",
"active_beer": 1,
"active_beer_name": "Amber Ale",
"controller_fridge_temp": null,
"controller_beer_temp": null,
"active_beer_temp": null,
"active_fridge_temp": null,
"active_beer_set": null,
"active_fridge_set": null,
"controller_mode": null
}
]
Those are devices. My Device model is as follow (json annotation):
#JsonSerializable(nullable: false)
class Device {
int id;
String device_name;
#JsonKey(nullable: true) int active_beer;
#JsonKey(nullable: true) String active_beer_name;
#JsonKey(nullable: true) String controller_mode; // manual beer/fridge ou perfil
#JsonKey(nullable: true) double active_beer_temp;
#JsonKey(nullable: true) double active_fridge_temp;
#JsonKey(nullable: true) double active_beer_set;
#JsonKey(nullable: true) double active_fridge_set;
Device({
this.id,
this.device_name,
this.active_beer,
this.active_beer_name,
this.controller_mode,
this.active_beer_temp,
this.active_beer_set,
this.active_fridge_set,
});
factory Device.fromJson(Map<String, dynamic> json) => _$DeviceFromJson(json);
Map<String, dynamic> toJson() => _$DeviceToJson(this);
}
My scoped model class for the Device is as follow:
class DeviceModel extends Model {
Timer timer;
List<dynamic> _deviceList = [];
List<dynamic> get devices => _deviceList;
set _devices(List<dynamic> value) {
_deviceList = value;
notifyListeners();
}
List _data;
Future getDevices() async {
loading = true;
_data = await getDeviceInfo()
.then((response) {
print('Type of devices is ${response.runtimeType}');
print("Array: $response");
_devices = response.map((d) => Device.fromJson(d)).toList();
loading = false;
notifyListeners();
});
}
bool _loading = false;
bool get loading => _loading;
set loading(bool value) {
_loading = value;
notifyListeners();
}
notifyListeners();
}
My UI is intended to be a list of devices showing live data (rebuild ui as sensor data change) and a detail page of each Device, also showing live data. For that I'm using a timer. The page to list Devices is working as expected and "refreshing" every 30 seconds:
class DevicesPage extends StatefulWidget {
#override
State<DevicesPage> createState() => _DevicesPageState();
}
class _DevicesPageState extends State<DevicesPage> {
DeviceModel model = DeviceModel();
Timer timer;
#override
void initState() {
model.getDevices();
super.initState();
timer = Timer.periodic(Duration(seconds: 30), (Timer t) => model.getDevices());
}
#override
Widget build(BuildContext) {
return Scaffold(
appBar: new AppBar(
title: new Text('Controladores'),
),
drawer: AppDrawer(),
body: ScopedModel<DeviceModel>(
model: model,
child: _buildListView(),
),
);
}
_buildListView() {
return ScopedModelDescendant<DeviceModel>(
builder: (BuildContext context, Widget child, DeviceModel model) {
if (model.loading) {
return UiLoading();
}
final devicesList = model.devices;
return ListView.builder(
itemBuilder: (context, index) => InkWell(
splashColor: Colors.blue[300],
child: _buildListTile(devicesList[index]),
onTap: () {
Route route = MaterialPageRoute(
builder: (context) => DevicePage(devicesList[index]),
);
Navigator.push(context, route);
},
),
itemCount: devicesList.length,
);
},
);
}
_buildListTile(Device device) {
return Card(
child: ListTile(
leading: Icon(Icons.devices),
title: device.device_name == null
? null
: Text(
device.device_name.toString() ?? "",
),
subtitle: device.active_beer_name == null
? null
: Text(
device.active_beer_temp.toString() ?? "",
),
),
);
}
}
class UiLoading extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircularProgressIndicator(),
SizedBox(height: 12),
Text(
'Loading',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
],
),
);
}
}
The problem happens with the detail page UI that is also supposed to show live Data but it behaves like a statelesswidget and do not rebuild itself after the Model gets updated:
class DevicePage extends StatefulWidget {
Device device;
DevicePage(this.device);
#override
//State<DevicePage> createState() => _DevicePageState(device);
State<DevicePage> createState() => _DevicePageState();
}
class _DevicePageState extends State<DevicePage> {
DeviceModel model = DeviceModel();
Timer timer;
#override
void initState() {
DeviceModel model = DeviceModel();
super.initState();
timer = Timer.periodic(Duration(seconds: 30), (Timer t) => model.updateDevice());
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text(widget.device.device_name),
),
drawer: AppDrawer(),
body: ScopedModel<DeviceModel>(
model: model,
child: _buildView(widget.device),
),
);
}
_buildView(Device device) {
return ScopedModelDescendant<DeviceModel>(
builder: (BuildContext context, Widget child, DeviceModel model) {
if (model.loading) {
return UiLoading();
}
return Card(
child: ListTile(
leading: Icon(Icons.devices),
title: device.device_name == null
? null
: Text(
device.device_name.toString() ?? "",
),
subtitle: device.active_beer_name == null
? null
: Text(
device.active_beer_temp.toString() ?? "",
),
),
);
},
);
}
}
class UiLoading extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircularProgressIndicator(),
SizedBox(height: 12),
Text(
'Loading',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
],
),
);
}
What am I missing ?
many thanks in advance

Answer 1

It looks like you're building a new DeviceModel for your DevicePage which means that model will be the one your ui would react to, not the one higher up the widget tree - your DevicesPage.
ScopedModel<DeviceModel>(
model: model,
child: _buildView(widget.device),
)
On your DevicePage where you add a the body to your Scaffold replace the ScopedModel with just:
_buildView(widget.device)
That should solve your issue.