forked from eatvio/eatvio_app
feat(diary): chart update pixel perfect
This commit is contained in:
@@ -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,
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user