From b07161b41dfc174a30957dee55bc6d47b19c20ee Mon Sep 17 00:00:00 2001 From: mso7nueh Date: Mon, 11 Nov 2024 15:32:14 +0300 Subject: [PATCH] feat(diary): chart update pixel perfect --- .../presentation/pages/diary_screen.dart | 93 +++++++++++++------ 1 file changed, 63 insertions(+), 30 deletions(-) diff --git a/lib/features/diary/presentation/pages/diary_screen.dart b/lib/features/diary/presentation/pages/diary_screen.dart index e9474908..2abdac39 100644 --- a/lib/features/diary/presentation/pages/diary_screen.dart +++ b/lib/features/diary/presentation/pages/diary_screen.dart @@ -214,22 +214,18 @@ class _DiaryScreenState extends State { 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 { showLabels: false, showTicks: false, radiusFactor: 0.7, - axisLineStyle: AxisLineStyle( - thickness: 0.1, - color: Colors.grey[200], - thicknessUnit: GaugeSizeUnit.factor, - ), + showAxisLine: false, pointers: [ - // 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 { ), ], annotations: [ - // 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 { class ChartData { final double intake; final double recommendation; - final Color color; ChartData( this.intake, this.recommendation, - this.color, ); }