やりたいこと
- Arduinoの環境センサーとiPhoneをBLEでつなげてグラフで表示したい
- グラフを表示するiPhoneアプリをFlutterで作る
- ざっくりと作れるか探るためにライブラリやサンプルプログラムを使ってみる
- グラフ表示は fl_chart がよさそう
- 画面を上下分割して２つのグラフを表示したい
公式などのリンク
困ったときにお世話になる場所を先に確認。
Flutter documentation…公式ドキュメント
Flutter Guide JP…有志による日本語ドキュメント
pub.dev…ライブラリがいっぱいあるところ
material library…マテリアルの様々なクラスについてのドキュメント
そもそもライブラリの使い方
- プロジェクトフォルダーにある pubspec.yaml の dependencies: にライブラリ名を追加
dependencies:
flutter:
sdk: flutter
fl_chart: ^0.55.0import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: BarChartSample1(),
);
}
}
class MyChart extends StatelessWidget {
const MyChart({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Code Sample'),
),
body: Padding(
padding: const EdgeInsets.fromLTRB(5, 100, 5, 30),
child: BarChart(
BarChartData(
borderData: FlBorderData(
border: const Border(
top: BorderSide.none,
right: BorderSide.none,
left: BorderSide(width: 1),
bottom: BorderSide(width: 1),
)),
groupsSpace: 10,
barGroups: [
BarChartGroupData(x: 1, barRods: [
BarChartRodData(toY: 10, width: 15),
]),
BarChartGroupData(x: 2, barRods: [
BarChartRodData(toY: 9, width: 15),
]),
BarChartGroupData(x: 3, barRods: [
BarChartRodData(toY: 4, width: 15),
]),
BarChartGroupData(x: 4, barRods: [
BarChartRodData(toY: 2, width: 15),
]),
BarChartGroupData(x: 5, barRods: [
BarChartRodData(toY: 13, width: 15),
]),
BarChartGroupData(x: 6, barRods: [
BarChartRodData(toY: 17, width: 15),
]),
BarChartGroupData(x: 7, barRods: [
BarChartRodData(toY: 19, width: 15),
]),
BarChartGroupData(x: 8, barRods: [
BarChartRodData(toY: 21, width: 15),
]),
]),
),
),
);
}
}
// aaaaaaaaaaaaaaaaaaaaa
class BarChartSample1 extends StatefulWidget {
final List<Color> availableColors = const [
Colors.purpleAccent,
Colors.yellow,
Colors.lightBlue,
Colors.orange,
Colors.pink,
Colors.redAccent,
];
const BarChartSample1({Key? key}) : super(key: key);
@override
State<StatefulWidget> createState() => BarChartSample1State();
}
class BarChartSample1State extends State<BarChartSample1> {
final Color barBackgroundColor = const Color(0xff72d8bf);
final Duration animDuration = const Duration(milliseconds: 250);
int touchedIndex = -1;
bool isPlaying = false;
@override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 1,
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(18)),
color: const Color(0xff81e5cd),
child: Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
const Text(
'Mingguan',
style: TextStyle(
color: Color(0xff0f4a3c),
fontSize: 24,
fontWeight: FontWeight.bold),
),
const SizedBox(
height: 4,
),
const Text(
'Grafik konsumsi kalori',
style: TextStyle(
color: Color(0xff379982),
fontSize: 18,
fontWeight: FontWeight.bold),
),
const SizedBox(
height: 38,
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: BarChart(
isPlaying ? randomData() : mainBarData(),
swapAnimationDuration: animDuration,
),
),
),
const SizedBox(
height: 12,
),
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Align(
alignment: Alignment.topRight,
child: IconButton(
icon: Icon(
isPlaying ? Icons.pause : Icons.play_arrow,
color: const Color(0xff0f4a3c),
),
onPressed: () {
setState(() {
isPlaying = !isPlaying;
if (isPlaying) {
refreshState();
}
});
},
),
),
)
],
),
),
);
}
BarChartGroupData makeGroupData(
int x,
double y, {
bool isTouched = false,
Color barColor = Colors.white,
double width = 22,
List<int> showTooltips = const [],
}) {
return BarChartGroupData(
x: x,
barRods: [
BarChartRodData(
toY: isTouched ? y + 1 : y,
color: isTouched ? Colors.yellow : barColor,
width: width,
borderSide: isTouched
? BorderSide(color: Colors.yellow.shade600, width: 1)
: const BorderSide(color: Colors.white, width: 0),
backDrawRodData: BackgroundBarChartRodData(
show: true,
toY: 20,
color: barBackgroundColor,
),
),
],
showingTooltipIndicators: showTooltips,
);
}
List<BarChartGroupData> showingGroups() => List.generate(7, (i) {
switch (i) {
case 0:
return makeGroupData(0, 5, isTouched: i == touchedIndex);
case 1:
return makeGroupData(1, 6.5, isTouched: i == touchedIndex);
case 2:
return makeGroupData(2, 5, isTouched: i == touchedIndex);
case 3:
return makeGroupData(3, 7.5, isTouched: i == touchedIndex);
case 4:
return makeGroupData(4, 9, isTouched: i == touchedIndex);
case 5:
return makeGroupData(5, 11.5, isTouched: i == touchedIndex);
case 6:
return makeGroupData(6, 6.5, isTouched: i == touchedIndex);
default:
return throw Error();
}
});
BarChartData mainBarData() {
return BarChartData(
barTouchData: BarTouchData(
touchTooltipData: BarTouchTooltipData(
tooltipBgColor: Colors.blueGrey,
getTooltipItem: (group, groupIndex, rod, rodIndex) {
String weekDay;
switch (group.x.toInt()) {
case 0:
weekDay = 'Monday';
break;
case 1:
weekDay = 'Tuesday';
break;
case 2:
weekDay = 'Wednesday';
break;
case 3:
weekDay = 'Thursday';
break;
case 4:
weekDay = 'Friday';
break;
case 5:
weekDay = 'Saturday';
break;
case 6:
weekDay = 'Sunday';
break;
default:
throw Error();
}
return BarTooltipItem(
weekDay += '\n',
const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 18,
),
children: <TextSpan>[
TextSpan(
text: (rod.toY - 1).toString(),
style: const TextStyle(
color: Colors.yellow,
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
],
);
}),
touchCallback: (FlTouchEvent event, barTouchResponse) {
setState(() {
if (!event.isInterestedForInteractions ||
barTouchResponse == null ||
barTouchResponse.spot == null) {
touchedIndex = -1;
return;
}
touchedIndex = barTouchResponse.spot!.touchedBarGroupIndex;
});
},
),
titlesData: FlTitlesData(
show: true,
rightTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
topTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
bottomTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
getTitlesWidget: getTitles,
reservedSize: 38,
),
),
leftTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: false,
),
),
),
borderData: FlBorderData(
show: false,
),
barGroups: showingGroups(),
gridData: FlGridData(show: false),
);
}
Widget getTitles(double value, TitleMeta meta) {
const style = TextStyle(
color: Colors.white,
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;
default:
text = const Text('', style: style);
break;
}
return SideTitleWidget(
axisSide: meta.axisSide,
space: 16,
child: text,
);
}
BarChartData randomData() {
return BarChartData(
barTouchData: BarTouchData(
enabled: false,
),
titlesData: FlTitlesData(
show: true,
bottomTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
getTitlesWidget: getTitles,
reservedSize: 38,
),
),
leftTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: false,
),
),
topTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: false,
),
),
rightTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: false,
),
),
),
borderData: FlBorderData(
show: false,
),
barGroups: List.generate(7, (i) {
switch (i) {
case 0:
return makeGroupData(0, Random().nextInt(15).toDouble() + 6,
barColor: widget.availableColors[
Random().nextInt(widget.availableColors.length)]);
case 1:
return makeGroupData(1, Random().nextInt(15).toDouble() + 6,
barColor: widget.availableColors[
Random().nextInt(widget.availableColors.length)]);
case 2:
return makeGroupData(2, Random().nextInt(15).toDouble() + 6,
barColor: widget.availableColors[
Random().nextInt(widget.availableColors.length)]);
case 3:
return makeGroupData(3, Random().nextInt(15).toDouble() + 6,
barColor: widget.availableColors[
Random().nextInt(widget.availableColors.length)]);
case 4:
return makeGroupData(4, Random().nextInt(15).toDouble() + 6,
barColor: widget.availableColors[
Random().nextInt(widget.availableColors.length)]);
case 5:
return makeGroupData(5, Random().nextInt(15).toDouble() + 6,
barColor: widget.availableColors[
Random().nextInt(widget.availableColors.length)]);
case 6:
return makeGroupData(6, Random().nextInt(15).toDouble() + 6,
barColor: widget.availableColors[
Random().nextInt(widget.availableColors.length)]);
default:
return throw Error();
}
}),
gridData: FlGridData(show: false),
);
}
Future<dynamic> refreshState() async {
setState(() {});
await Future<dynamic>.delayed(
animDuration + const Duration(milliseconds: 50));
if (isPlaying) {
await refreshState();
}
}
}