'Fl_chart barChart sample5. Need help resolving the errors
Fl_chart is not clear with how to implement their sample charts. I copied and pasted the sample code exact and yet there seems to be so much more that needs to be added along with it. Methods and classes defined in other files but are called in the sample code, how am I supposed to implement these? Methods such as AxisTitles and class TitleMeta for example. Do I just copy and paste all of those as well or do I define the methods and classes myself?
There are others errors such as too many positional arguments and the named parameter 'y' is required that greatly confuse me, how's the sample code supposed to run if these were a problem beforehand?
Here's the sample code
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
class BarChartSample4 extends StatefulWidget {
const BarChartSample4({Key? key}) : super(key: key);
@override
State<StatefulWidget> createState() => BarChartSample4State();
}
class BarChartSample4State extends State<BarChartSample4> {
final Color dark = const Color(0xff3b8c75);
final Color normal = const Color(0xff64caad);
final Color light = const Color(0xff73e8c9);
Widget bottomTitles(double value, TitleMeta meta) {
const style = TextStyle(color: Color(0xff939393), fontSize: 10);
String text;
switch (value.toInt()) {
case 0:
text = 'Apr';
break;
case 1:
text = 'May';
break;
case 2:
text = 'Jun';
break;
case 3:
text = 'Jul';
break;
case 4:
text = 'Aug';
break;
default:
text = '';
break;
}
return Center(child: Text(text, style: style));
}
Widget leftTitles(double value, TitleMeta meta) {
if (value == meta.max) {
return Container();
}
const style = TextStyle(
color: Color(
0xff939393,
),
fontSize: 10,
);
return Padding(
child: Text(meta.formattedValue, style: style),
padding: const EdgeInsets.only(left: 8),
);
}
@override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 1.66,
child: Card(
elevation: 4,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
color: Colors.white,
child: Padding(
padding: const EdgeInsets.only(top: 16.0),
child: BarChart(
BarChartData(
alignment: BarChartAlignment.center,
barTouchData: BarTouchData(
enabled: false,
),
titlesData: FlTitlesData(
show: true,
bottomTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
reservedSize: 28,
getTitlesWidget: bottomTitles,
),
),
leftTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
reservedSize: 40,
getTitlesWidget: leftTitles,
),
),
topTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
rightTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
),
gridData: FlGridData(
show: true,
checkToShowHorizontalLine: (value) => value % 10 == 0,
getDrawingHorizontalLine: (value) => FlLine(
color: const Color(0xffe7e8ec),
strokeWidth: 1,
),
drawVerticalLine: false,
),
borderData: FlBorderData(
show: false,
),
groupsSpace: 4,
barGroups: getData(),
),
),
),
),
);
}
List<BarChartGroupData> getData() {
return [
BarChartGroupData(
x: 0,
barsSpace: 4,
barRods: [
BarChartRodData(
toY: 17000000000,
rodStackItems: [
BarChartRodStackItem(0, 2000000000, dark),
BarChartRodStackItem(2000000000, 12000000000, normal),
BarChartRodStackItem(12000000000, 17000000000, light),
],
borderRadius: const BorderRadius.all(Radius.zero)),
BarChartRodData(
toY: 24000000000,
rodStackItems: [
BarChartRodStackItem(0, 13000000000, dark),
BarChartRodStackItem(13000000000, 14000000000, normal),
BarChartRodStackItem(14000000000, 24000000000, light),
],
borderRadius: const BorderRadius.all(Radius.zero)),
BarChartRodData(
toY: 23000000000.5,
rodStackItems: [
BarChartRodStackItem(0, 6000000000.5, dark),
BarChartRodStackItem(6000000000.5, 18000000000, normal),
BarChartRodStackItem(18000000000, 23000000000.5, light),
],
borderRadius: const BorderRadius.all(Radius.zero)),
BarChartRodData(
toY: 29000000000,
rodStackItems: [
BarChartRodStackItem(0, 9000000000, dark),
BarChartRodStackItem(9000000000, 15000000000, normal),
BarChartRodStackItem(15000000000, 29000000000, light),
],
borderRadius: const BorderRadius.all(Radius.zero)),
BarChartRodData(
toY: 32000000000,
rodStackItems: [
BarChartRodStackItem(0, 2000000000.5, dark),
BarChartRodStackItem(2000000000.5, 17000000000.5, normal),
BarChartRodStackItem(17000000000.5, 32000000000, light),
],
borderRadius: const BorderRadius.all(Radius.zero)),
],
),
BarChartGroupData(
x: 1,
barsSpace: 4,
barRods: [
BarChartRodData(
toY: 31000000000,
rodStackItems: [
BarChartRodStackItem(0, 11000000000, dark),
BarChartRodStackItem(11000000000, 18000000000, normal),
BarChartRodStackItem(18000000000, 31000000000, light),
],
borderRadius: const BorderRadius.all(Radius.zero)),
BarChartRodData(
toY: 35000000000,
rodStackItems: [
BarChartRodStackItem(0, 14000000000, dark),
BarChartRodStackItem(14000000000, 27000000000, normal),
BarChartRodStackItem(27000000000, 35000000000, light),
],
borderRadius: const BorderRadius.all(Radius.zero)),
BarChartRodData(
toY: 31000000000,
rodStackItems: [
BarChartRodStackItem(0, 8000000000, dark),
BarChartRodStackItem(8000000000, 24000000000, normal),
BarChartRodStackItem(24000000000, 31000000000, light),
],
borderRadius: const BorderRadius.all(Radius.zero)),
BarChartRodData(
toY: 15000000000,
rodStackItems: [
BarChartRodStackItem(0, 6000000000.5, dark),
BarChartRodStackItem(6000000000.5, 12000000000.5, normal),
BarChartRodStackItem(12000000000.5, 15000000000, light),
],
borderRadius: const BorderRadius.all(Radius.zero)),
BarChartRodData(
toY: 17000000000,
rodStackItems: [
BarChartRodStackItem(0, 9000000000, dark),
BarChartRodStackItem(9000000000, 15000000000, normal),
BarChartRodStackItem(15000000000, 17000000000, light),
],
borderRadius: const BorderRadius.all(Radius.zero)),
],
),
BarChartGroupData(
x: 2,
barsSpace: 4,
barRods: [
BarChartRodData(
toY: 34000000000,
rodStackItems: [
BarChartRodStackItem(0, 6000000000, dark),
BarChartRodStackItem(6000000000, 23000000000, normal),
BarChartRodStackItem(23000000000, 34000000000, light),
],
borderRadius: const BorderRadius.all(Radius.zero)),
BarChartRodData(
toY: 32000000000,
rodStackItems: [
BarChartRodStackItem(0, 7000000000, dark),
BarChartRodStackItem(7000000000, 24000000000, normal),
BarChartRodStackItem(24000000000, 32000000000, light),
],
borderRadius: const BorderRadius.all(Radius.zero)),
BarChartRodData(
toY: 14000000000.5,
rodStackItems: [
BarChartRodStackItem(0, 1000000000.5, dark),
BarChartRodStackItem(1000000000.5, 12000000000, normal),
BarChartRodStackItem(12000000000, 14000000000.5, light),
],
borderRadius: const BorderRadius.all(Radius.zero)),
BarChartRodData(
toY: 20000000000,
rodStackItems: [
BarChartRodStackItem(0, 4000000000, dark),
BarChartRodStackItem(4000000000, 15000000000, normal),
BarChartRodStackItem(15000000000, 20000000000, light),
],
borderRadius: const BorderRadius.all(Radius.zero)),
BarChartRodData(
toY: 24000000000,
rodStackItems: [
BarChartRodStackItem(0, 4000000000, dark),
BarChartRodStackItem(4000000000, 15000000000, normal),
BarChartRodStackItem(15000000000, 24000000000, light),
],
borderRadius: const BorderRadius.all(Radius.zero)),
],
),
BarChartGroupData(
x: 3,
barsSpace: 4,
barRods: [
BarChartRodData(
toY: 14000000000,
rodStackItems: [
BarChartRodStackItem(0, 1000000000.5, dark),
BarChartRodStackItem(1000000000.5, 12000000000, normal),
BarChartRodStackItem(12000000000, 14000000000, light),
],
borderRadius: const BorderRadius.all(Radius.zero)),
BarChartRodData(
toY: 27000000000,
rodStackItems: [
BarChartRodStackItem(0, 7000000000, dark),
BarChartRodStackItem(7000000000, 25000000000, normal),
BarChartRodStackItem(25000000000, 27000000000, light),
],
borderRadius: const BorderRadius.all(Radius.zero)),
BarChartRodData(
toY: 29000000000,
rodStackItems: [
BarChartRodStackItem(0, 6000000000, dark),
BarChartRodStackItem(6000000000, 23000000000, normal),
BarChartRodStackItem(23000000000, 29000000000, light),
],
borderRadius: const BorderRadius.all(Radius.zero)),
BarChartRodData(
toY: 16000000000.5,
rodStackItems: [
BarChartRodStackItem(0, 9000000000, dark),
BarChartRodStackItem(9000000000, 15000000000, normal),
BarChartRodStackItem(15000000000, 16000000000.5, light),
],
borderRadius: const BorderRadius.all(Radius.zero)),
BarChartRodData(
toY: 15000000000,
rodStackItems: [
BarChartRodStackItem(0, 7000000000, dark),
BarChartRodStackItem(7000000000, 12000000000.5, normal),
BarChartRodStackItem(12000000000.5, 15000000000, light),
],
borderRadius: const BorderRadius.all(Radius.zero)),
],
),
];
}
}
error log
: Error: The argument type 'SideTitles' can't be assigned to the parameter type 'AxisTitles?'.
lib/widgets/line_chart_sample1.dart:18
- 'SideTitles' is from 'package:fl_chart/src/chart/base/axis_chart/axis_chart_data.dart' ('../flutter/.pub-cache/hosted/pub.dartlang.org/fl_chart-0.50.5/lib/src/chart/base/axis_chart/axis_chart_data.dart').
package:fl_chart/…/axis_chart/axis_chart_data.dart:1
- 'AxisTitles' is from 'package:fl_chart/src/chart/base/axis_chart/axis_chart_data.dart' ('../flutter/.pub-cache/hosted/pub.dartlang.org/fl_chart-0.50.5/lib/src/chart/base/axis_chart/axis_chart_data.dart').
package:fl_chart/…/axis_chart/axis_chart_data.dart:1
bottomTitles: BarTitles.getTopBottomTitles(),
^
: Error: The argument type 'SideTitles' can't be assigned to the parameter type 'AxisTitles?'.
lib/widgets/line_chart_sample1.dart:19
- 'SideTitles' is from 'package:fl_chart/src/chart/base/axis_chart/axis_chart_data.dart' ('../flutter/.pub-cache/hosted/pub.dartlang.org/fl_chart-0.50.5/lib/src/chart/base/axis_chart/axis_chart_data.dart').
package:fl_chart/…/axis_chart/axis_chart_data.dart:1
- 'AxisTitles' is from 'package:fl_chart/src/chart/base/axis_chart/axis_chart_data.dart' ('../flutter/.pub-cache/hosted/pub.dartlang.org/fl_chart-0.50.5/lib/src/chart/base/axis_chart/axis_chart_data.dart').
package:fl_chart/…/axis_chart/axis_chart_data.dart:1
leftTitles: BarTitles.getSideTitles(),
^
: Error: No named parameter with the name 'getTextStyles'.
lib/widgets/bar_titles.dart:8
getTextStyles: (value) =>
^^^^^^^^^^^^^
: Context: Found this candidate, but the arguments don't match.
../…/axis_chart/axis_chart_data.dart:114
SideTitles({
^^^^^^^^^^
: Error: No named parameter with the name 'getTextStyles'.
lib/widgets/bar_titles.dart:18
getTextStyles: (value) =>
^^^^^^^^^^^^^
: Context: Found this candidate, but the arguments don't match.
../…/axis_chart/axis_chart_data.dart:114
SideTitles({
^^^^^^^^^^
: Error: Method 'addPostFrameCallback' cannot be called on 'WidgetsBinding?' because it is potentially null.
../…/pie_chart/pie_chart.dart:42
- 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../flutter/packages/flutter/lib/src/widgets/binding.dart').
package:flutter/…/widgets/binding.dart:1
Try calling using ?. instead.
WidgetsBinding.instance.addPostFrameCallback((_) {
^^^^^^^^^^^^^^^^^^^^
Solution 1:[1]
Your sample code use BarChartSample4 and the error log show some errors about BarChartSample5State. I copy/past both and all is working great for me. Maybe you should check the fl_chart version, I personnaly installed this one ^0.50.5 and it's working great. So in your pubspec.yaml you should have
fl_chart: ^0.50.5
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Pierre Monier |