im trying to display data with flutter from firebase realtime database. the display will be shown as linechart data with fl_chart. to display this data, the linechart is wrap with streambuilder. but i got error The following UnsupportedError was thrown building SideTitlesWidget(dirty): Unsupported operation: Infinity or NaN toInt
my flutter code :
import 'package:fl_chart/fl_chart.dart';
import 'package:intl/intl.dart';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:firebase_database/firebase_database.dart';
class DataPoint {
double value;
int timestamp; // Epoch timestamp in milliseconds
DataPoint(this.value, this.timestamp);
@override
String toString() {
return 'Value: $value, Timestamp: $timestamp';
}
}
int widthGraph = 600;
int startIndex = 0;
int lastIndex = 0;
bool _isCurved = false;
RangeValues _rangeValues = const RangeValues(0, 4);
class DataPage extends StatefulWidget {
@override
State<DataPage> createState() => _DataPageState();
}
class _DataPageState extends State<DataPage> {
@override
void initState() {
super.initState();
}
Widget bottomTitleWidgets(double value, TitleMeta meta, double chartWidth) {
if (value % 1 != 0) {
return Container();
}
return SideTitleWidget(
axisSide: meta.axisSide,
space: 20,
child: Text(meta.formattedValue),
);
}
var dbr = FirebaseDatabase.instance.ref();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Monitoring Gas'),
),
body: ListView(
children: [
SizedBox(
height: 400,
child: StreamBuilder(
stream:
FirebaseDatabase.instance.ref().child('SensorData').onValue,
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const Center(child: CircularProgressIndicator());
}
if (snapshot.hasError) {
return Center(child: Text('Error: ${snapshot.error}'));
}
if (!snapshot.hasData ||
snapshot.data!.snapshot.value == null) {
return const Center(child: Text('No data available'));
}
var data =
snapshot.data!.snapshot.value as Map<dynamic, dynamic>;
List<DataPoint> dataList1 = [];
List<DataPoint> dataList2 = [];
data.forEach((key, value) {
// Assuming "Device1" holds integer values
dataList1.add(DataPoint(
double.parse(value["Device1"].toString()),
int.parse(key.toString())));
dataList2.add(DataPoint(
double.parse(value["Device2"].toString()),
int.parse(key.toString())));
});
print(dataList1);
return LineChart(LineChartData(
lineBarsData: [
LineChartBarData(
spots: List.generate(
dataList1.length,
(index) => dataList1[index].timestamp.toDouble() >=
dataList1[startIndex]
.timestamp
.toDouble() &&
dataList1[index].timestamp.toDouble() <=
dataList1[lastIndex]
.timestamp
.toDouble()
? FlSpot(
dataList1[index].timestamp.toDouble(),
dataList1[index].value,
)
: null,
)
.where((spot) => spot != null)
.cast<FlSpot>()
.toList(),
isCurved: _isCurved,
color: const Color.fromARGB(83, 39, 176, 85),
barWidth: 2,
isStrokeCapRound: true,
dotData: const FlDotData(
show: true,
),
belowBarData: BarAreaData(
show: true,
color: const Color.fromARGB(78, 39, 176, 85)),
),
],
titlesData: FlTitlesData(
topTitles: const AxisTitles(
sideTitles: SideTitles(showTitles: false)),
leftTitles: AxisTitles(
axisNameWidget:
const Text('Gas particle on air(ppm)'),
sideTitles: SideTitles(
showTitles: true,
getTitlesWidget: (value, meta) {
return Text(
value.toString(),
style: const TextStyle(fontSize: 8),
);
},
)),
bottomTitles: AxisTitles(
axisNameWidget: const Text('Timestamp'),
sideTitles: SideTitles(
showTitles: true,
getTitlesWidget: (value, meta) {
DateTime dateTime =
DateTime.fromMillisecondsSinceEpoch(
value.toInt() * 1000);
return RotatedBox(
quarterTurns: 1,
child: Text(
DateFormat('h:mm a').format(dateTime),
style: const TextStyle(fontSize: 8),
),
);
},
)),
)));
},
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Flexible(
flex: 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
alignment: Alignment.center,
height: 100,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Colors.black12, width: 1)),
child: const Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [Text("MQ-2 : "), Text("-- ppm")],
),
),
),
),
Flexible(
flex: 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
alignment: Alignment.center,
height: 100,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Colors.black12, width: 1)),
child: const Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [Text("MQ-7"), Text("-- ppm")],
),
),
),
),
Flexible(
flex: 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
alignment: Alignment.center,
height: 100,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Colors.black12, width: 1)),
child: const Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [Text("MQ-4"), Text("-- ppm")],
),
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Flexible(
flex: 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
alignment: Alignment.center,
height: 100,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Colors.black12, width: 1)),
child: const Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [Text("MQ-135"), Text("-- ppm")],
),
),
),
),
Flexible(
flex: 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
alignment: Alignment.center,
height: 100,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Colors.black12, width: 1)),
child: const Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [Text("MQ-136"), Text("-- ppm")],
),
),
),
),
],
),
],
));
}
void showNotification(BuildContext context, String message) {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
backgroundColor: Colors.white.withOpacity(0.3),
content: Text(message.toString())));
}
}
my terminal debug error :
D/EGL_emulation(10746): app_time_stats: avg=54988.80ms min=36.06ms max=219347.78ms count=4
I/flutter (10746): 2
══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following UnsupportedError was thrown building SideTitlesWidget(dirty):
Unsupported operation: Infinity or NaN toInt
The relevant error-causing widget was:
SideTitlesWidget
SideTitlesWidget:file:///C:/Users/pegug/AppData/Local/Pub/Cache/hosted/pub.dev/fl_chart-0.67.0/lib/src/chart/base/axis_chart/axis_chart_scaffold_widget.dart:105:9
When the exception was thrown, this was the stack:
#0 double.toInt (dart:core-patch/double.dart)
#1 double.truncate (dart:core-patch/double.dart:195:21)
#2 double.~/ (dart:core-patch/double.dart:56:38)
#3 Utils.getEfficientInterval (package:fl_chart/src/utils/utils.dart:137:48)
#4 SideTitlesWidget.makeWidgets (package:fl_chart/src/chart/base/axis_chart/side_titles/side_titles_widget.dart:116:17)
#5 SideTitlesWidget.build (package:fl_chart/src/chart/base/axis_chart/side_titles/side_titles_widget.dart:208:32)
#6 StatelessElement.build (package:flutter/src/widgets/framework.dart:5550:49)
#7 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:5480:15)
#8 Element.rebuild (package:flutter/src/widgets/framework.dart:5196:7)
#9 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:5462:5)
#10 ComponentElement.mount (package:flutter/src/widgets/framework.dart:5456:5)
#11 Element.inflateWidget (package:flutter/src/widgets/framework.dart:4335:16)
#12 MultiChildRenderObjectElement.inflateWidget (package:flutter/src/widgets/framework.dart:6893:36)
#13 MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6905:32)
#14 Element.inflateWidget (package:flutter/src/widgets/framework.dart:4335:16)
#15 Element.updateChild (package:flutter/src/widgets/framework.dart:3846:18)
#16 _LayoutBuilderElement._layout.layoutCallback (package:flutter/src/widgets/layout_builder.dart:155:18)
#17 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2844:19)
#18 _LayoutBuilderElement._layout (package:flutter/src/widgets/layout_builder.dart:173:12)
#19 RenderObject.invokeLayoutCallback.<anonymous closure> (package:flutter/src/rendering/object.dart:2686:59)
#20 PipelineOwner._enableMutationsToDirtySubtrees (package:flutter/src/rendering/object.dart:1097:15)
#21 RenderObject.invokeLayoutCallback (package:flutter/src/rendering/object.dart:2686:14)
#22 RenderConstrainedLayoutBuilder.rebuildIfNecessary (package:flutter/src/widgets/layout_builder.dart:248:7)
#23 _RenderLayoutBuilder.performLayout (package:flutter/src/widgets/layout_builder.dart:331:5)
#24 RenderObject.layout (package:flutter/src/rendering/object.dart:2575:7)
#25 RenderBox.layout (package:flutter/src/rendering/box.dart:2389:11)
#26 ChildLayoutHelper.layoutChild (package:flutter/src/rendering/layout_helper.dart:52:11)
#27 RenderFlex._computeSizes (package:flutter/src/rendering/flex.dart:809:43)
#28 RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:904:32)
#29 RenderObject.layout (package:flutter/src/rendering/object.dart:2575:7)
#30 RenderBox.layout (package:flutter/src/rendering/box.dart:2389:11)
#31 RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:280:14)
#32 RenderObject.layout (package:flutter/src/rendering/object.dart:2575:7)
#33 RenderBox.layout (package:flutter/src/rendering/box.dart:2389:11)
#34 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:21)
#35 RenderObject.layout (package:flutter/src/rendering/object.dart:2575:7)
#36 RenderBox.layout (package:flutter/src/rendering/box.dart:2389:11)
#37 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:21)
#38 RenderObject.layout (package:flutter/src/rendering/object.dart:2575:7)
#39 RenderBox.layout (package:flutter/src/rendering/box.dart:2389:11)
#40 RenderSliverList.performLayout (package:flutter/src/rendering/sliver_list.dart:211:28)
#41 RenderObject.layout (package:flutter/src/rendering/object.dart:2575:7)
#42 RenderSliverEdgeInsetsPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:139:12)
#43 RenderSliverPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:361:11)
#44 RenderObject.layout (package:flutter/src/rendering/object.dart:2575:7)
#45 RenderViewportBase.layoutChildSequence (package:flutter/src/rendering/viewport.dart:601:13)
#46 RenderViewport._attemptLayout (package:flutter/src/rendering/viewport.dart:1555:12)
#47 RenderViewport.performLayout (package:flutter/src/rendering/viewport.dart:1464:20)
#48 RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:2414:7)
#49 PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:1051:18)
#50 PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:1064:15)
#51 RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:582:23)
#52 WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:991:13)
#53 RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:448:5)
#54 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1386:15)
#55 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1311:9)
#56 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:1169:5)
#57 _invoke (dart:ui/hooks.dart:312:13)
#58 PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:399:5)
#59 _drawFrame (dart:ui/hooks.dart:283:31)
════════════════════════════════════════════════════════════════════════════════════════════════════
Another exception was thrown: Unsupported operation: Infinity or NaN toInt
Another exception was thrown: RenderLineChart object was given an infinite size during layout.
Another exception was thrown: RenderPadding object was given an infinite size during layout.
Another exception was thrown: RenderDecoratedBox object was given an infinite size during layout.
Another exception was thrown: RenderPadding object was given an infinite size during layout.
Another exception was thrown: 'package:flutter/src/rendering/stack.dart': Failed assertion: line 600 pos 12: 'size.isFinite': is not true.
Another exception was thrown: RenderBox was not laid out: RenderStack#38474 relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
Another exception was thrown: RenderBox was not laid out: _RenderLayoutBuilder#47c9e relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
Another exception was thrown: RenderBox was not laid out: RenderFlex#36c43 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (10746): 4
Another exception was thrown: Unsupported operation: Infinity or NaN toInt
Another exception was thrown: Unsupported operation: Infinity or NaN toInt
Another exception was thrown: RenderLineChart object was given an infinite size during layout.
Another exception was thrown: RenderPadding object was given an infinite size during layout.
Another exception was thrown: RenderDecoratedBox object was given an infinite size during layout.
Another exception was thrown: RenderPadding object was given an infinite size during layout.
Another exception was thrown: 'package:flutter/src/rendering/stack.dart': Failed assertion: line 600 pos 12: 'size.isFinite': is not true.
Another exception was thrown: RenderBox was not laid out: RenderStack#975a2 relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
Another exception was thrown: RenderBox was not laid out: _RenderLayoutBuilder#9f1fd relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
Another exception was thrown: RenderBox was not laid out: RenderFlex#b9766 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
Another exception was thrown: Unsupported operation: Infinity or NaN toInt
W/System (10746): Ignoring header X-Firebase-Locale because its value was null.
D/FirebaseAuth(10746): Notifying id token listeners about user ( n6GZErmNaphkh5vamRulwaOsJoe2 )
the error seems likely about the widget, so i have tried removing the sidetitle widget, wrapping the streambuilder with expanded. but the following method i tried still got the same error.
New contributor
pegugu is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.