feat(diary): chart update pixel perfect

This commit is contained in:
mso7nueh
2024-11-11 15:32:14 +03:00
parent c7906ea9da
commit b07161b41d

View File

@@ -214,22 +214,18 @@ class _DiaryScreenState extends State<DiaryScreen> {
ChartData(
nutrition.dailyNutritionIntake.carbohydrates,
nutrition.dailyNutritionRecommendation.carbohydrates,
Color(0xFFFF9500),
),
ChartData(
nutrition.dailyNutritionIntake.fats,
nutrition.dailyNutritionRecommendation.fats,
Color(0xFFFF3B30),
),
ChartData(
nutrition.dailyNutritionIntake.proteins,
nutrition.dailyNutritionRecommendation.proteins,
Color(0xFF4CD964),
),
ChartData(
nutrition.dailyNutritionIntake.energy,
nutrition.dailyNutritionRecommendation.energy,
Color(0xFF007AFF),
),
];
@@ -268,46 +264,77 @@ class _DiaryScreenState extends State<DiaryScreen> {
showLabels: false,
showTicks: false,
radiusFactor: 0.7,
axisLineStyle: AxisLineStyle(
thickness: 0.1,
color: Colors.grey[200],
thicknessUnit: GaugeSizeUnit.factor,
),
showAxisLine: false,
pointers: <GaugePointer>[
// Carbohydrates Arc
RangePointer(
value: 100,
width: 0.16,
animationDuration: 2000,
color: Color(0xFFF6FAFF),
sizeUnit: GaugeSizeUnit.factor,
enableAnimation: true,
cornerStyle: CornerStyle.bothCurve,
),
RangePointer(
value: (chartData[0].intake / chartData[0].recommendation) * 100,
width: 0.16,
color: chartData[0].intake < chartData[0].recommendation ? chartData[0].color : Colors.red,
color: chartData[0].intake < chartData[0].recommendation ? appTheme.blueA400 : Colors.red,
sizeUnit: GaugeSizeUnit.factor,
enableAnimation: true,
cornerStyle: CornerStyle.bothCurve, // Rounded ends
cornerStyle: CornerStyle.bothCurve,
),
// Fats Arc
RangePointer(
value: (chartData[1].intake / chartData[1].recommendation) * 100,
value: 100,
width: 0.16,
color: chartData[1].intake < chartData[1].recommendation ? chartData[1].color : Colors.red,
animationDuration: 2000,
color: Color(0xFFF6FAFF),
sizeUnit: GaugeSizeUnit.factor,
enableAnimation: true,
cornerStyle: CornerStyle.bothCurve,
pointerOffset: -0.18,
),
// Proteins Arc
RangePointer(
value: (chartData[2].intake / chartData[2].recommendation) * 100,
value: (chartData[1].intake / chartData[1].recommendation) * 100,
width: 0.16,
color: chartData[2].intake < chartData[2].recommendation ? chartData[2].color : Colors.red,
color: chartData[1].intake < chartData[1].recommendation ? appTheme.blueA400 : Colors.red,
sizeUnit: GaugeSizeUnit.factor,
enableAnimation: true,
cornerStyle: CornerStyle.bothCurve,
pointerOffset: -0.18,
),
RangePointer(
value: 100,
width: 0.16,
animationDuration: 2000,
color: Color(0xFFF6FAFF),
sizeUnit: GaugeSizeUnit.factor,
enableAnimation: true,
cornerStyle: CornerStyle.bothCurve,
pointerOffset: -0.36,
),
// Calories Arc
RangePointer(
value: (chartData[2].intake / chartData[2].recommendation) * 100,
width: 0.16,
color: chartData[2].intake < chartData[2].recommendation ? appTheme.blueA400 : Colors.red,
sizeUnit: GaugeSizeUnit.factor,
enableAnimation: true,
cornerStyle: CornerStyle.bothCurve,
pointerOffset: -0.36,
),
RangePointer(
value: 100,
width: 0.16,
animationDuration: 2000,
color: Color(0xFFF6FAFF),
sizeUnit: GaugeSizeUnit.factor,
enableAnimation: true,
cornerStyle: CornerStyle.bothCurve,
pointerOffset: -0.54,
),
RangePointer(
value: (chartData[3].intake / chartData[3].recommendation) * 100,
width: 0.16,
color: chartData[3].intake < chartData[3].recommendation ? chartData[3].color : Colors.red,
color: chartData[3].intake < chartData[3].recommendation ? appTheme.blueA400 : Colors.red,
sizeUnit: GaugeSizeUnit.factor,
enableAnimation: true,
cornerStyle: CornerStyle.bothCurve,
@@ -315,49 +342,57 @@ class _DiaryScreenState extends State<DiaryScreen> {
),
],
annotations: <GaugeAnnotation>[
// Label for Carbohydrates
GaugeAnnotation(
widget: Transform.rotate(
angle: 30.1,
child: Text(
'Углеводы',
style: TextStyle(color: Colors.white, fontSize: 12),
style: TextStyle(
color: Colors.white,
fontSize: 12,
),
),
),
angle: 198,
positionFactor: 0.92,
),
// Label for Fats
GaugeAnnotation(
widget: Transform.rotate(
angle: 30,
child: Text(
'Жиры',
style: TextStyle(color: Colors.white, fontSize: 12),
style: TextStyle(
color: Colors.white,
fontSize: 12,
),
),
),
angle: 190,
positionFactor: 1.1,
),
// Label for Proteins
GaugeAnnotation(
widget: Transform.rotate(
angle: 30,
child: Text(
'Белки',
style: TextStyle(color: Colors.white, fontSize: 12),
style: TextStyle(
color: Colors.white,
fontSize: 12,
),
),
),
angle: 190,
positionFactor: 1.27,
),
// Label for Calories
GaugeAnnotation(
widget: Transform.rotate(
angle: 30,
child: Text(
'Калории',
style: TextStyle(color: Colors.white, fontSize: 12),
style: TextStyle(
color: Colors.white,
fontSize: 12,
),
),
),
angle: 192,
@@ -892,11 +927,9 @@ class _DiaryScreenState extends State<DiaryScreen> {
class ChartData {
final double intake;
final double recommendation;
final Color color;
ChartData(
this.intake,
this.recommendation,
this.color,
);
}