📊
fl_chartで変数を使うとエラーが出る?
変数をなぜ使えないのか?
fl_chartというライブラリを使って、グラフを作成したのですが、直接数値を書くのではなく変数の値を入れたいのでコードを書くとエラーが出た😱
なぜ?
変数を書く場所が適切ではない?
データの型が決まっている!
エラーの警告が出てくる😱
調べてみると、データの型は「double」だった😇
というわけで変更してみる。
bar_chart_sample3.dart
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
// 親のクラスを作る
class BarChart2Page extends StatelessWidget {
const BarChart2Page({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Chart2"),
),
// このクラスを作る
body: BarChart2(),
);
}
}
// _BarChartだと読み込めない?、書き換えた!
class BarChart2 extends StatelessWidget {
// const BarChart2({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return BarChart(
BarChartData(
barTouchData: barTouchData,
titlesData: titlesData,
borderData: borderData,
barGroups: barGroups,
gridData: FlGridData(show: false),
alignment: BarChartAlignment.spaceAround,
maxY: 20,
),
);
}
BarTouchData get barTouchData => BarTouchData(
enabled: false,
touchTooltipData: BarTouchTooltipData(
tooltipBgColor: Colors.transparent,
tooltipPadding: const EdgeInsets.all(0),
tooltipMargin: 8,
getTooltipItem: (
BarChartGroupData group,
int groupIndex,
BarChartRodData rod,
int rodIndex,
) {
return BarTooltipItem(
rod.toY.round().toString(),
const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
);
},
),
);
Widget getTitles(double value, TitleMeta meta) {
const style = TextStyle(
color: Color(0xff7589a2),
fontWeight: FontWeight.bold,
fontSize: 14,
);
String text;
switch (value.toInt()) {
case 0:
text = 'Mn';
break;
case 1:
text = 'Te';
break;
case 2:
text = 'Wd';
break;
case 3:
text = 'Tu';
break;
case 4:
text = 'Fr';
break;
case 5:
text = 'St';
break;
case 6:
text = 'Sn';
break;
default:
text = '';
break;
}
return SideTitleWidget(
axisSide: meta.axisSide,
space: 4.0,
child: Text(text, style: style),
);
}
FlTitlesData get titlesData => FlTitlesData(
show: true,
bottomTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
reservedSize: 30,
getTitlesWidget: getTitles,
),
),
leftTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
topTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
rightTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
);
FlBorderData get borderData => FlBorderData(
show: false,
);
final _barsGradient = const LinearGradient(
colors: [
Colors.lightBlueAccent,
Colors.greenAccent,
],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
);
// double型の配列をここに配置する
final _dummy = <double>[10, 11, 12, 13, 14, 15];
// 左から順番に実行される
List<BarChartGroupData> get barGroups => [
BarChartGroupData(
x: 0,
barRods: [
BarChartRodData(
// Y軸のところで配列のデータを読み込んでみる
toY: _dummy[0],
gradient: _barsGradient,
)
],
showingTooltipIndicators: [0],
),
BarChartGroupData(
x: 1,
barRods: [
BarChartRodData(
// Y軸のところで配列のデータを読み込んでみる
toY: _dummy[1],
gradient: _barsGradient,
)
],
showingTooltipIndicators: [0],
),
BarChartGroupData(
x: 2,
barRods: [
BarChartRodData(
// Y軸のところで配列のデータを読み込んでみる
toY: _dummy[2],
gradient: _barsGradient,
)
],
showingTooltipIndicators: [0],
),
BarChartGroupData(
x: 3,
barRods: [
BarChartRodData(
// Y軸のところで配列のデータを読み込んでみる
toY: _dummy[3],
gradient: _barsGradient,
)
],
showingTooltipIndicators: [0],
),
BarChartGroupData(
x: 3,
barRods: [
BarChartRodData(
// Y軸のところで配列のデータを読み込んでみる
toY: _dummy[4],
gradient: _barsGradient,
)
],
showingTooltipIndicators: [0],
),
BarChartGroupData(
x: 3,
barRods: [
BarChartRodData(
// Y軸のところで配列のデータを読み込んでみる
toY: _dummy[5],
gradient: _barsGradient,
)
],
showingTooltipIndicators: [0],
),
];
}
class BarChartSample3 extends StatefulWidget {
const BarChartSample3({Key? key}) : super(key: key);
State<StatefulWidget> createState() => BarChartSample3State();
}
class BarChartSample3State extends State<BarChartSample3> {
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 1.7,
child: Card(
elevation: 0,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
color: const Color(0xff2c4260),
child: BarChart2(), // constを削除しないと使えない!
),
);
}
}
main.dart
import 'package:bar_chart_sample/bar_chart_sample3.dart';
import 'package:flutter/material.dart';
// import 'bar_chart_sample4.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
// home: BarChartSample1(),
home: BarChart2Page(),
);
}
}
スクリーンショット
おお!
成功してるみたいですね。この調子で次はFireStoreから取得した値を入れるのをやってみたいなと思います。
最後に
オープンチャットでFlutterを使ってる人に質問をしてみて、こんな感じではないかと思い手探りやってみましたができました!
日々outputして技術の向上に努めております💪
Discussion