I'm trying to integrate a Flutter chart into a dynamic app. I have chart code adapted from a YouTube tutorial, but I believe the original code was likely designed for use within a stateless widget
. I'm struggling to refactor the code to work correctly within a StatefulWidget
and alongside a Scaffold
to provide the overall app structure.
Here's the chart code:
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
class LineTitles {
static GetTitleData() => FlTitlesData(
show: true,
bottomTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
reservedSize: 35,
getTitlesWidget: (value, meta) {
switch (value.toInt()) {
case 2:
return Text(
'MAR',
style: TextStyle(
color: Color(0xff68737d),
fontWeight: FontWeight.bold,
fontSize: 16,
),
);
case 5:
return Text(
'JUN',
style: TextStyle(
color: Color(0xff68737d),
fontWeight: FontWeight.bold,
fontSize: 16,
),
);
case 8:
return Text('SEP',
style: TextStyle(
color: Color(0xff68737d),
fontWeight: FontWeight.bold,
fontSize: 16,
));
}
return Text(" ");
}),
),
leftTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
reservedSize: 35,
getTitlesWidget: (value, meta) {
switch (value.toInt()) {
case 1:
return Text(
'10k',
style: TextStyle(
color: Color(0xff68737d),
fontWeight: FontWeight.bold,
fontSize: 15,
),
);
case 3:
return Text(
'30k',
style: TextStyle(
color: Color(0xff68737d),
fontWeight: FontWeight.bold,
fontSize: 15,
),
);
case 5:
return Text('50k',
style: TextStyle(
color: Color(0xff68737d),
fontWeight: FontWeight.bold,
fontSize: 15,
)
);
}
return Text(" ");
},
)));
}
I'm using Android Studio
for development. Can someone guide how to restructure this chart code to function effectively within a stateful widget
and use a Scaffold
for the app's layout? Thank you!
Here you go. Add other missing packages in top.
import 'package:flutter/material.dart';
class Scaffoldcheck extends StatefulWidget {
@override
State<Scaffoldcheck> createState() => _ScaffoldcheckState();
}
class _ScaffoldcheckState extends State<Scaffoldcheck> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: LineTitles.GetTitleData(),
);
}
}
class LineTitles {
static GetTitleData() {
return FlTitlesData(
show: true,
bottomTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
reservedSize: 35,
getTitlesWidget: (value, meta) {
switch (value.toInt()) {
case 2:
return Text(
'MAR',
style: TextStyle(
color: Color(0xff68737d),
fontWeight: FontWeight.bold,
fontSize: 16,
),
);
case 5:
return Text(
'JUN',
style: TextStyle(
color: Color(0xff68737d),
fontWeight: FontWeight.bold,
fontSize: 16,
),
);
case 8:
return Text('SEP',
style: TextStyle(
color: Color(0xff68737d),
fontWeight: FontWeight.bold,
fontSize: 16,
));
}
return Text(" ");
}),
),
leftTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
reservedSize: 35,
getTitlesWidget: (value, meta) {
switch (value.toInt()) {
case 1:
return Text(
'10k',
style: TextStyle(
color: Color(0xff68737d),
fontWeight: FontWeight.bold,
fontSize: 15,
),
);
case 3:
return Text(
'30k',
style: TextStyle(
color: Color(0xff68737d),
fontWeight: FontWeight.bold,
fontSize: 15,
),
);
case 5:
return Text('50k',
style: TextStyle(
color: Color(0xff68737d),
fontWeight: FontWeight.bold,
fontSize: 15,
)
);
}
return Text(" ");
},
)));
}
}