How to fix this error. Someone can help me?
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
AspectRatio(
aspectRatio: 1.70,
child: Container(
height: 250,
padding: EdgeInsets.all(20),
child: LineChart(
mainData(),
),
),
),
],
);
}
LineChartData mainData() {
return LineChartData(
gridData: FlGridData(
show: true,
drawVerticalLine: true,
getDrawingHorizontalLine: (value) {
return FlLine(
color: Color.fromRGBO(0, 0, 0, 0.3),
strokeWidth: 1,
);
},
getDrawingVerticalLine: (value) {
return FlLine(
color: Color.fromRGBO(0, 0, 0, 0.3),
strokeWidth: 1,
);
},
),
titlesData: FlTitlesData(
show: true,
bottomTitles: SideTitles(
showTitles: true,
reservedSize: 10,
rotateAngle: -90,
textStyle: const TextStyle(color: Color(0xff68737d),
fontWeight: FontWeight.bold, fontSize: 10),
getTitles: (value) { //ERROR textStyle
SideTitle's textStyle property changed to getTextStyles getter (it gives you the axis value, and you must return a TextStyle based on it), It helps you to have a different style for specific text, check it in 0.12.0. Therefore, try:
getTextStyles: (BuildContext context, double v) {
return TextStyle(color: Color(0xff68737d), fontWeight: FontWeight.bold, fontSize: 10);
},
After flutter update the textStyle is changed to getTextStyles. Try below code, hope its help to you. Refer SideTitles
SideTitles(
showTitles: true,
reservedSize: 10,
rotateAngle: -90,
getTextStyles: (BuildContext context, double v) {
return TextStyle(color: Color.red,
fontWeight: FontWeight.bold,
fontSize: 15,
);
},
),
Related
I don´t know why this switch it's not working, its a copy of the code example in fl_charts doc. But appears in the default case in all the bars.The only differnce is the way to ad the barchardata. I use two List directly, but the chart work well, the problem is the titles.
My chart widget.
EDIT
I know where is the problem, but I don´t know the solution.
The problem is in BarChartGroupData( x: barChartX.length . barChartX.length is an int (10) in this case, and i need to reference to the index of the list (0-9). Doesn't exist any property like indexOf() with the possibility to give me the int of each iteration of the List.generate previous in the widget?
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: BarChart(
BarChartData(
barTouchData: BarTouchData(
touchTooltipData: BarTouchTooltipData(),
),
alignment: BarChartAlignment.center,
barGroups: List.generate(
barChartX.length,
(i) => BarChartGroupData(
x: barChartX.length,
barRods: [
BarChartRodData(
toY: relBarChart[i] * 10,
color: Color.fromARGB(198, 74, 78, 74),
width: 10.0,
borderRadius: BorderRadius.circular(10),
backDrawRodData: BackgroundBarChartRodData(
show: true,
color: Colors.grey,
),
),
],
),
),
titlesData: FlTitlesData(
bottomTitles: AxisTitles(
sideTitles: SideTitles(
getTitlesWidget: getTitles,
showTitles: true,
reservedSize: 38),
),
),
),
),
),
),
and my title widget
Widget getTitles(double value, TitleMeta meta) {
const style = TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold,
fontSize: 14,
);
Widget text;
switch (value.toInt()) {
case 0:
text = const Text('M', style: style);
break;
case 1:
text = const Text('T', style: style);
break;
case 2:
text = const Text('W', style: style);
break;
case 3:
text = const Text('T', style: style);
break;
case 4:
text = const Text('F', style: style);
break;
case 5:
text = const Text('S', style: style);
break;
case 6:
text = const Text('S', style: style);
break;
case 7:
text = const Text('F', style: style);
break;
case 8:
text = const Text('S', style: style);
break;
case 9:
text = const Text('S', style: style);
break;
default:
text = const Text('default', style: style);
break;
}
return SideTitleWidget(
axisSide: meta.axisSide,
space: 16,
child: text,
);
}
To solve it is very easy I only need to put x: i,
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: BarChart(
BarChartData(
barTouchData: BarTouchData(
touchTooltipData: BarTouchTooltipData(),
),
alignment: BarChartAlignment.center,
barGroups: List.generate(
barChartX.length,
(i) => BarChartGroupData(
x: i,
barRods: [
BarChartRodData(
toY: relBarChart[i] * 10,
color: Color.fromARGB(198, 74, 78, 74),
width: 10.0,
borderRadius: BorderRadius.circular(10),
backDrawRodData: BackgroundBarChartRodData(
show: true,
color: Colors.grey,
),
),
],
),
),
titlesData: FlTitlesData(
bottomTitles: AxisTitles(
sideTitles: SideTitles(
getTitlesWidget: getTitles,
showTitles: true,
reservedSize: 38),
),
),
),
),
),
),
I'm trying to create a line chart off the last 12 hours. I'd like the x-axis to read the labels as "12pm, 5am" respectively. The x-axis labels should only show star/end. When my code gets to this point it freezes the simulator with no errors.
sensorData has 12 objects in it and are stored as a DateTime. The times are hourly based.
final Color lineColor;
final List<SpatialGrowSensor> sensorData;
const SensorLineChart({
Key? key,
required this.sensorData,
required this.lineColor,
}) : super(key: key);
LineChartData sampleData1(List<SpatialGrowSensor> sensorData) {
return LineChartData(
lineTouchData: lineTouchData1(),
gridData: gridData(),
titlesData: titlesData1(),
borderData: borderData(),
lineBarsData: lineBarsData1(),
minY: 0,
maxY: 10,
);
}
LineTouchData lineTouchData1() => LineTouchData(
handleBuiltInTouches: true,
touchTooltipData: LineTouchTooltipData(
tooltipBgColor: Colors.blueGrey.withOpacity(0.8),
),
);
FlTitlesData titlesData1() => FlTitlesData(
bottomTitles: AxisTitles(
sideTitles: bottomTitles(),
),
rightTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
topTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
leftTitles: AxisTitles(
sideTitles: leftTitles(),
),
);
List<LineChartBarData> lineBarsData1() => [
lineChartBarData1_1(),
];
Widget leftTitleWidgets(double value, TitleMeta meta) {
const style = TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 16,
);
return Text(value.toString(), style: style, textAlign: TextAlign.center);
}
SideTitles leftTitles() => SideTitles(
getTitlesWidget: leftTitleWidgets,
showTitles: true,
reservedSize: 32,
interval: 2,
);
Widget bottomTitleWidgets(double value, TitleMeta meta) {
const style = TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 16,
);
// format datetime as '12pm'
String dateFormated = DateFormat('ha').format(DateTime.fromMillisecondsSinceEpoch(value.toInt(), isUtc: true));
Widget text = Text(dateFormated, style: style);
return SideTitleWidget(
axisSide: meta.axisSide,
space: 10,
child: text,
);
}
SideTitles bottomTitles() => SideTitles(
showTitles: true,
reservedSize: 32,
interval: 6,
getTitlesWidget: bottomTitleWidgets,
);
FlGridData gridData() => FlGridData(show: false);
FlBorderData borderData() => FlBorderData(
show: true,
border: const Border(
bottom: BorderSide(color: Color(0xff4e4965), width: 4),
left: BorderSide(color: Colors.transparent),
right: BorderSide(color: Colors.transparent),
top: BorderSide(color: Colors.transparent),
),
);
LineChartBarData lineChartBarData1_1() {
final flSpotData = sensorData.map((sensor) {
return FlSpot(sensor.dateTime.millisecondsSinceEpoch.toDouble(), sensor.sensorValue);
}).toList();
return LineChartBarData(
isCurved: true,
color: lineColor,
barWidth: 4,
dotData: FlDotData(show: false),
belowBarData: BarAreaData(show: false),
preventCurveOverShooting: true,
spots: flSpotData,
);
}
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: HexColor('#0c110a'),
),
child: SizedBox(
height: 200,
child: Padding(
padding: const EdgeInsets.all(32.0),
child: LineChart(
sampleData1(sensorData),
),
),
),
),
);
}
}```
I used the sample code from the github and only changed 1 variable: the handleBuiltInTouches to true, I expect it to have the tooltip pop up when I hold it, but it popped up for a splitsecond before disappearing.
also when I set handleBuiltInTouches to true, even when showingtooltipIndicators has selected all spots, none of the spots have the tooltip popup.
class ScatterChartSample2 extends StatefulWidget {
const ScatterChartSample2({Key? key}) : super(key: key);
#override
State<StatefulWidget> createState() => _ScatterChartSample2State();
}
class _ScatterChartSample2State extends State {
int touchedIndex = -1;
Color greyColor = Colors.grey;
List<int> selectedSpots = [];
#override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 1,
child: Card(
color: const Color(0xff222222),
child: fl.ScatterChart(
fl.ScatterChartData(
scatterSpots: [
fl.ScatterSpot(
4,
4,
color: selectedSpots.contains(0) ? Colors.green : greyColor,
),
fl.ScatterSpot(
2,
5,
color: selectedSpots.contains(1) ? Colors.yellow : greyColor,
radius: 12,
),
fl.ScatterSpot(
4,
5,
color:
selectedSpots.contains(2) ? Colors.purpleAccent : greyColor,
radius: 8,
),
fl.ScatterSpot(
8,
6,
color: selectedSpots.contains(3) ? Colors.orange : greyColor,
radius: 20,
),
fl.ScatterSpot(
5,
7,
color: selectedSpots.contains(4) ? Colors.brown : greyColor,
radius: 14,
),
fl.ScatterSpot(
7,
2,
color: selectedSpots.contains(5)
? Colors.lightGreenAccent
: greyColor,
radius: 18,
),
fl.ScatterSpot(
3,
2,
color: selectedSpots.contains(6) ? Colors.red : greyColor,
radius: 36,
),
fl.ScatterSpot(
2,
8,
color:
selectedSpots.contains(7) ? Colors.tealAccent : greyColor,
radius: 22,
),
],
minX: 0,
maxX: 10,
minY: 0,
maxY: 10,
borderData: fl.FlBorderData(
show: false,
),
gridData: fl.FlGridData(
show: true,
drawHorizontalLine: true,
checkToShowHorizontalLine: (value) => true,
getDrawingHorizontalLine: (value) =>
fl.FlLine(color: Colors.white.withOpacity(0.1)),
drawVerticalLine: true,
checkToShowVerticalLine: (value) => true,
getDrawingVerticalLine: (value) =>
fl.FlLine(color: Colors.white.withOpacity(0.1)),
),
titlesData: fl.FlTitlesData(
show: false,
),
showingTooltipIndicators: selectedSpots,
scatterTouchData: fl.ScatterTouchData(
enabled: true,
handleBuiltInTouches: true,
touchTooltipData: fl.ScatterTouchTooltipData(
tooltipBgColor: Colors.black,
getTooltipItems: (fl.ScatterSpot touchedBarSpot) {
return fl.ScatterTooltipItem(
'X: ',
textStyle: TextStyle(
height: 1.2,
color: Colors.grey[100],
fontStyle: FontStyle.italic,
),
bottomMargin: 10,
children: [
TextSpan(
text: '${touchedBarSpot.x.toInt()} \n',
style: const TextStyle(
color: Colors.white,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
),
),
TextSpan(
text: 'Y: ',
style: TextStyle(
height: 1.2,
color: Colors.grey[100],
fontStyle: FontStyle.italic,
),
),
TextSpan(
text: touchedBarSpot.y.toInt().toString(),
style: const TextStyle(
color: Colors.white,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
),
),
],
);
},
),
touchCallback: (fl.FlTouchEvent event,
fl.ScatterTouchResponse? touchResponse) {
if (touchResponse == null ||
touchResponse.touchedSpot == null) {
return;
}
if (event is fl.FlTapUpEvent) {
final sectionIndex = touchResponse.touchedSpot!.spotIndex;
setState(() {
if (selectedSpots.contains(sectionIndex)) {
selectedSpots.remove(sectionIndex);
} else {
selectedSpots.add(sectionIndex);
}
});
}
},
),
),
),
),
);
}
}
The fl will give the return fl.FlTapDownEvent and fl.FlLongPressEnd if you give long press.
Set fl condition like this:
// Show tooltip if tap down detected
if (event is fl.FlTapDownEvent) {
final sectionIndex = touchResponse.touchedSpot!.spotIndex;
setState(() {
selectedSpots.add(sectionIndex);
});
// Hide/clear tooltip if long press was ended or tap up detected
}else if(event is fl.FlLongPressEnd || event is fl.FlTapUpEvent){
setState(() {
selectedSpots.clear();
});
}
Don't forget to choose and set one between 1-3 condition
I found that you can show the tooltip if inside scatterTouchData:
enable:false and handleBuiltInTouches: false
enable:false and handleBuiltInTouches: true
enable:true and handleBuiltInTouches: false
but not for enable:true and handleBuiltInTouches: true
Who knows why this happened? I'll updated if I found the answer or you can comment to complete the answer.
Full code
class ScatterChartSample2 extends StatefulWidget {
const ScatterChartSample2({Key? key}) : super(key: key);
#override
State<StatefulWidget> createState() => _ScatterChartSample2State();
}
class _ScatterChartSample2State extends State {
int touchedIndex = -1;
Color greyColor = Colors.grey;
List<int> selectedSpots = [];
#override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 1,
child: Card(
color: const Color(0xff222222),
child: fl.ScatterChart(
fl.ScatterChartData(
scatterSpots: [
fl.ScatterSpot(
4,
4,
color: selectedSpots.contains(0) ? Colors.green : greyColor,
),
fl.ScatterSpot(
2,
5,
color: selectedSpots.contains(1) ? Colors.yellow : greyColor,
radius: 12,
),
fl.ScatterSpot(
4,
5,
color:
selectedSpots.contains(2) ? Colors.purpleAccent : greyColor,
radius: 8,
),
fl.ScatterSpot(
8,
6,
color: selectedSpots.contains(3) ? Colors.orange : greyColor,
radius: 20,
),
fl.ScatterSpot(
5,
7,
color: selectedSpots.contains(4) ? Colors.brown : greyColor,
radius: 14,
),
fl.ScatterSpot(
7,
2,
color: selectedSpots.contains(5)
? Colors.lightGreenAccent
: greyColor,
radius: 18,
),
fl.ScatterSpot(
3,
2,
color: selectedSpots.contains(6) ? Colors.red : greyColor,
radius: 36,
),
fl.ScatterSpot(
2,
8,
color:
selectedSpots.contains(7) ? Colors.tealAccent : greyColor,
radius: 22,
),
],
minX: 0,
maxX: 10,
minY: 0,
maxY: 10,
borderData: fl.FlBorderData(
show: false,
),
gridData: fl.FlGridData(
show: true,
drawHorizontalLine: true,
checkToShowHorizontalLine: (value) => true,
getDrawingHorizontalLine: (value) =>
fl.FlLine(color: Colors.white.withOpacity(0.1)),
drawVerticalLine: true,
checkToShowVerticalLine: (value) => true,
getDrawingVerticalLine: (value) =>
fl.FlLine(color: Colors.white.withOpacity(0.1)),
),
titlesData: fl.FlTitlesData(
show: false,
),
showingTooltipIndicators: selectedSpots,
scatterTouchData: fl.ScatterTouchData(
// ====================== Set this false =================================
enabled: false,
handleBuiltInTouches: true,
touchTooltipData: fl.ScatterTouchTooltipData(
tooltipBgColor: Colors.black,
getTooltipItems: (fl.ScatterSpot touchedBarSpot) {
return fl.ScatterTooltipItem(
'X: ',
textStyle: TextStyle(
height: 1.2,
color: Colors.grey[100],
fontStyle: FontStyle.italic,
),
bottomMargin: 10,
children: [
TextSpan(
text: '${touchedBarSpot.x.toInt()} \n',
style: const TextStyle(
color: Colors.white,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
),
),
TextSpan(
text: 'Y: ',
style: TextStyle(
height: 1.2,
color: Colors.grey[100],
fontStyle: FontStyle.italic,
),
),
TextSpan(
text: touchedBarSpot.y.toInt().toString(),
style: const TextStyle(
color: Colors.white,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
),
),
],
);
},
),
touchCallback: (fl.FlTouchEvent event,
fl.ScatterTouchResponse? touchResponse) {
if (touchResponse == null ||
touchResponse.touchedSpot == null) {
return;
}
// Show tooltip if tap down detected
if (event is fl.FlTapDownEvent) {
final sectionIndex = touchResponse.touchedSpot!.spotIndex;
setState(() {
selectedSpots.add(sectionIndex);
});
// Hide/clear tooltip if long press was ended or tap up detected
}else if(event is fl.FlLongPressEnd || event is fl.FlTapUpEvent){
setState(() {
selectedSpots.clear();
});
}
},
),
),
),
),
);
}
}
How can I get the "00" off my count down when the time is up?
Widget _buildTimer() {
return CircularCountDownTimer(
fillColor: Colors.red,
color: Colors.white,
backgroundColor: null,
duration: _data[_currentIndex].duration,
controller: _controller,
width: MediaQuery.of(context).size.width / 4,
height: MediaQuery.of(context).size.height / 4,
strokeWidth: 10.0,
strokeCap: StrokeCap.round,
textStyle: TextStyle(
fontSize: 33.0, color: Colors.black, fontWeight: FontWeight.bold),
textFormat: CountdownTextFormat.SS,
isReverse: true,
isReverseAnimation: true,
isTimerTextShown: true,
autoStart: true,
);
}
When the time runs out it looks like this
enter image description here
Can anyone in help?
I assume you are using this https://pub.dev/packages/circular_countdown_timer
In that case, you need to have a variable controlling the state of the text visibility. Then you can change this in the onComplete callback.
bool isTimerShown = true;
#override
Widget build(BuildContext context) {
return Scaffold(
body: CircularCountDownTimer(
fillColor: Colors.red,
backgroundColor: null,
duration: 3,
controller: CountDownController(),
width: MediaQuery
.of(context)
.size
.width / 4,
height: MediaQuery
.of(context)
.size
.height / 4,
strokeWidth: 10.0,
strokeCap: StrokeCap.round,
textStyle: TextStyle(
fontSize: 33.0,
color: Colors.black,
fontWeight: FontWeight.bold,
),
textFormat: CountdownTextFormat.SS,
isReverse: true,
isReverseAnimation: true,
isTimerTextShown: isTimerShown,
autoStart: true,
ringColor: Colors.white,
onComplete: () =>
setState(() {
isTimerShown = false;
}),
),
);
}
I have a fl_chart (pub), which is displayed below in the gifs. When transitioning data the painter paints outside of the chart's bounds. How could I add a clipper (or some other fix) to the chart below, so this bug does not occur? There is some code at the bottom & some images. fl_chart uses a CustomPainter to draw the charts, so maybe I could override something in the source code?
My quick fix (I removed the transition animation, but I'd like to use the animation):
Ignore the label bug on the y axis (on the left)
(If you don't see the bug look close on the right side)
I would like to use a transition like this, but without the chart going outside the boundaries:
Here is the code:
LineChartData mainData() {
return LineChartData(
lineTouchData: LineTouchData(
touchTooltipData: LineTouchTooltipData(
fitInsideHorizontally: true,
tooltipBgColor: Colors.white,
getTooltipItems: (List<LineBarSpot> touchedBarSpots) {
return touchedBarSpots.map((barSpot) {
return LineTooltipItem(
'${barSpot.y.toInt()}',
TextStyle(
fontFamily: 'Jost*',
fontSize: 15,
color: Colors.black,
),
);
}).toList();
}
),
getTouchedSpotIndicator: (LineChartBarData barData, List<int> spotIndexes) {
return spotIndexes.map((spotIndex) {
return TouchedSpotIndicatorData(
FlLine(
color: const Color.fromARGB(255, 77, 77, 77),
strokeWidth: 1,
dashArray: [4,4],
),
FlDotData(
getDotPainter: (spot, percent, barData, index) {
return FlDotCirclePainter(
radius: 5.5,
color: gradientColors[0],
strokeWidth: 2,
strokeColor: Colors.white,
);
},
),
);
}).toList();
}
),
gridData: FlGridData(
show: true,
getDrawingHorizontalLine: (value) {
return FlLine(
color: const Color.fromARGB(255, 98, 95, 161),
strokeWidth: 1,
dashArray: [4,4]
);
},
),
titlesData: FlTitlesData(
show: true,
bottomTitles: SideTitles(
showTitles: true,
reservedSize: 14,
textStyle:
const TextStyle(
color: Color.fromARGB(255, 181, 181, 181),
fontWeight: FontWeight.w300,
fontFamily: 'Jost*',
fontSize: 13,
),
getTitles: (value) {
return _labels[widget.timeType][value.toInt()] ?? '';
},
),
leftTitles: SideTitles(
showTitles: true,
textStyle: const TextStyle(
color: Color.fromARGB(255, 181, 181, 181),
fontWeight: FontWeight.w300,
fontFamily: 'Jost*',
fontSize: 16,
),
getTitles: (value) {
return (value.toInt()).toString();
},
reservedSize: 28,
margin: 12,
),
),
borderData:
FlBorderData(
show: true,
border: Border.symmetric(
horizontal: BorderSide(
color: const Color.fromARGB(255, 170, 170, 170),
width: 1.2
),
),
),
minX: 0,
maxX: _data[widget.timeType].length.toDouble()-1, //length of data set
minY: _data[widget.timeType].reduce(min).toDouble() - 1, //set to lowest v
maxY: _data[widget.timeType].reduce(max).toDouble() + 1, //set to highest v
lineBarsData: [
LineChartBarData(
spots: [
for (int i = 0; i < _data[widget.timeType].length; i++)
FlSpot(i.toDouble(), _data[widget.timeType][i].toDouble())
],
//FlSpot(2.6, 4),
isCurved: true,
colors: [
gradientColors[0],
],
barWidth: 2,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(
show: true,
colors: gradientColors,
gradientColorStops: [0, 0.5, 1.0],
gradientFrom: const Offset(0, 0),
gradientTo: const Offset(0, 1),
),
),
],
);
}
there is a clipData property in the LinechartData
try to set it as FlClipData.all().