146 lines
3.5 KiB
Dart
146 lines
3.5 KiB
Dart
import 'dart:async';
|
|
import 'dart:math';
|
|
|
|
import 'package:fl_chart/fl_chart.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:hoshan/ui/theme/colors.dart';
|
|
|
|
class CustomeLineChartPlaceholder extends StatefulWidget {
|
|
const CustomeLineChartPlaceholder({super.key});
|
|
|
|
@override
|
|
State<CustomeLineChartPlaceholder> createState() => _LineChartSample2State();
|
|
}
|
|
|
|
class _LineChartSample2State extends State<CustomeLineChartPlaceholder> {
|
|
List<Color> gradientColors = [
|
|
AppColors.secondryColor.defaultShade,
|
|
AppColors.primaryColor.defaultShade,
|
|
];
|
|
|
|
final limitCount = 100;
|
|
final sinPoints = <FlSpot>[];
|
|
final cosPoints = <FlSpot>[];
|
|
|
|
double xValue = 0;
|
|
double step = 0.08;
|
|
|
|
Timer? timer;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
timer = Timer.periodic(const Duration(milliseconds: 40), (timer) {
|
|
while (sinPoints.length > limitCount) {
|
|
sinPoints.removeAt(0);
|
|
cosPoints.removeAt(0);
|
|
}
|
|
setState(() {
|
|
sinPoints.add(FlSpot(xValue, sin(xValue)));
|
|
cosPoints.add(FlSpot(xValue, -sin(xValue)));
|
|
});
|
|
xValue += step;
|
|
});
|
|
}
|
|
|
|
LineChartBarData sinLine(List<FlSpot> points) {
|
|
return LineChartBarData(
|
|
spots: points,
|
|
dotData: const FlDotData(
|
|
show: false,
|
|
),
|
|
gradient: LinearGradient(
|
|
colors: gradientColors,
|
|
stops: const [0.1, 1.0],
|
|
),
|
|
isStrokeCapRound: true,
|
|
belowBarData: BarAreaData(
|
|
show: true,
|
|
gradient: LinearGradient(
|
|
colors: gradientColors.map((color) => color.withAlpha(30)).toList(),
|
|
),
|
|
),
|
|
barWidth: 4,
|
|
isCurved: true,
|
|
);
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
timer?.cancel();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return AspectRatio(
|
|
aspectRatio: 1,
|
|
child: LineChart(
|
|
mainData(),
|
|
),
|
|
);
|
|
}
|
|
|
|
LineChartData mainData() {
|
|
return LineChartData(
|
|
minY: -4,
|
|
maxY: 4,
|
|
minX: sinPoints.first.x,
|
|
maxX: sinPoints.last.x,
|
|
lineTouchData: const LineTouchData(enabled: false),
|
|
clipData: const FlClipData.all(),
|
|
lineBarsData: [
|
|
sinLine(sinPoints),
|
|
sinLine(cosPoints),
|
|
],
|
|
gridData: FlGridData(
|
|
show: true,
|
|
drawVerticalLine: true,
|
|
horizontalInterval: 1,
|
|
verticalInterval: 1,
|
|
getDrawingHorizontalLine: (value) {
|
|
return FlLine(
|
|
color: AppColors.gray.defaultShade,
|
|
strokeWidth: 1,
|
|
);
|
|
},
|
|
getDrawingVerticalLine: (value) {
|
|
return FlLine(
|
|
color: AppColors.gray.defaultShade,
|
|
strokeWidth: 1,
|
|
);
|
|
},
|
|
),
|
|
titlesData: FlTitlesData(
|
|
show: true,
|
|
rightTitles: const AxisTitles(
|
|
sideTitles: SideTitles(showTitles: false),
|
|
),
|
|
topTitles: const AxisTitles(
|
|
sideTitles: SideTitles(showTitles: false),
|
|
),
|
|
bottomTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: false,
|
|
reservedSize: 30,
|
|
interval: 1,
|
|
getTitlesWidget: (value, meta) => Text(value.toString()),
|
|
),
|
|
),
|
|
leftTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: false,
|
|
interval: 1,
|
|
getTitlesWidget: (value, meta) => Text(value.toString()),
|
|
reservedSize: 50,
|
|
),
|
|
),
|
|
),
|
|
borderData: FlBorderData(
|
|
show: true,
|
|
border: Border.all(color: const Color(0xff37434d)),
|
|
),
|
|
);
|
|
}
|
|
}
|