111 lines
3.2 KiB
Dart
111 lines
3.2 KiB
Dart
import 'package:bootstrap_icons/bootstrap_icons.dart';
|
|
import 'package:fl_chart/fl_chart.dart';
|
|
import 'package:flutter/material.dart';
|
|
|
|
class CircleChart extends StatefulWidget {
|
|
const CircleChart({super.key, required this.humidityPercentage});
|
|
|
|
final double humidityPercentage;
|
|
|
|
@override
|
|
State<CircleChart> createState() => _CircleChartState();
|
|
}
|
|
|
|
class _CircleChartState extends State<CircleChart> {
|
|
double currentPercentage = 0;
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
Future.delayed(Duration.zero, () async {
|
|
for (double i = 0; i <= widget.humidityPercentage; i++) {
|
|
await Future.delayed(const Duration(milliseconds: 25), () {
|
|
setState(() {
|
|
currentPercentage = i;
|
|
});
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Center(
|
|
child: Stack(
|
|
alignment: Alignment.center,
|
|
children: [
|
|
ShaderMask(
|
|
shaderCallback: (Rect bounds) {
|
|
return RadialGradient(
|
|
center: Alignment.center,
|
|
radius: 0.6,
|
|
colors: <Color>[
|
|
Colors.white,
|
|
_getAnimatedColor(currentPercentage)
|
|
],
|
|
tileMode: TileMode.mirror,
|
|
).createShader(bounds);
|
|
},
|
|
child: PieChart(
|
|
PieChartData(
|
|
sections: _createSections(currentPercentage),
|
|
centerSpaceRadius: MediaQuery.of(context).size.width * 0.25,
|
|
sectionsSpace: 0,
|
|
startDegreeOffset: 270,
|
|
borderData: FlBorderData(show: false),
|
|
),
|
|
),
|
|
),
|
|
TweenAnimationBuilder<double>(
|
|
tween: Tween<double>(begin: 0, end: currentPercentage),
|
|
duration: const Duration(milliseconds: 300),
|
|
builder: (context, value, child) {
|
|
return Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Icon(BootstrapIcons.droplet_fill,
|
|
size: 32, color: _getAnimatedColor(value)),
|
|
Text(
|
|
'${value.toStringAsFixed(0)}%', // Animated percentage text
|
|
style: const TextStyle(
|
|
fontSize: 28,
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.black,
|
|
),
|
|
),
|
|
],
|
|
);
|
|
},
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
List<PieChartSectionData> _createSections(double humidityPercentage) {
|
|
return [
|
|
PieChartSectionData(
|
|
color: Colors.white,
|
|
value: humidityPercentage,
|
|
title: '',
|
|
radius: 50, // Size of the pie slice
|
|
titleStyle: const TextStyle(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
PieChartSectionData(
|
|
color: Colors.white24,
|
|
value: 100 - humidityPercentage,
|
|
title: '',
|
|
radius: 50,
|
|
),
|
|
];
|
|
}
|
|
|
|
Color _getAnimatedColor(double percentage) {
|
|
return Color.lerp(
|
|
Colors.green, Colors.blue, percentage / widget.humidityPercentage)!;
|
|
}
|
|
}
|