From b07161b41dfc174a30957dee55bc6d47b19c20ee Mon Sep 17 00:00:00 2001 From: mso7nueh Date: Mon, 11 Nov 2024 15:32:14 +0300 Subject: [PATCH 1/3] 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, ); } From cbc596cc45a0a168d12f3bb4131ed7de776497a7 Mon Sep 17 00:00:00 2001 From: mso7nueh Date: Mon, 11 Nov 2024 15:45:53 +0300 Subject: [PATCH 2/3] feat(diary): arrow down is work --- .../presentation/pages/diary_screen.dart | 20 +++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/lib/features/diary/presentation/pages/diary_screen.dart b/lib/features/diary/presentation/pages/diary_screen.dart index 2abdac39..6649263e 100644 --- a/lib/features/diary/presentation/pages/diary_screen.dart +++ b/lib/features/diary/presentation/pages/diary_screen.dart @@ -79,12 +79,20 @@ class _DiaryScreenState extends State { } _arrowDown() { - return Container( - padding: const EdgeInsets.only(top: 8, bottom: 16), - width: double.infinity, - child: Icon( - _calendarFormat == CalendarFormat.month ? Icons.keyboard_arrow_up_rounded : Icons.keyboard_arrow_down_rounded, - color: Colors.grey.shade600, + return GestureDetector( + behavior: HitTestBehavior.translucent, + onVerticalDragStart: (_) { + setState(() { + _calendarFormat = CalendarFormat.values[(_calendarFormat.index - 1) % CalendarFormat.values.length]; + }); + }, + child: Container( + width: double.infinity, + padding: const EdgeInsets.only(top: 8, bottom: 16), + child: Icon( + _calendarFormat == CalendarFormat.month ? Icons.keyboard_arrow_up_rounded : Icons.keyboard_arrow_down_rounded, + color: Colors.grey.shade600, + ), ), ); } From 9af7ad09cdbdc20c4df10bdddb32542e6638e461 Mon Sep 17 00:00:00 2001 From: mso7nueh Date: Mon, 11 Nov 2024 17:14:18 +0300 Subject: [PATCH 3/3] feat(diary): timer picker --- .../presentation/pages/diary_screen.dart | 100 ++++++++++++++++-- pubspec.yaml | 2 + 2 files changed, 94 insertions(+), 8 deletions(-) diff --git a/lib/features/diary/presentation/pages/diary_screen.dart b/lib/features/diary/presentation/pages/diary_screen.dart index 6649263e..71376057 100644 --- a/lib/features/diary/presentation/pages/diary_screen.dart +++ b/lib/features/diary/presentation/pages/diary_screen.dart @@ -37,6 +37,59 @@ class _DiaryScreenState extends State { final productNameController = TextEditingController(); final quantityController = TextEditingController(); int currentSelectedPhotoIndex = 0; + String time = "${DateTime.now().hour.toString().padLeft(2, '0')} : ${DateTime.now().minute.toString().padLeft(2, '0')}"; + DateTime _time = DateTime.now(); + + _showDatePicker() { + showModalBottomSheet( + context: context, + useRootNavigator: true, + builder: (context) => SizedBox( + height: MediaQuery.of(context).copyWith().size.height / 3, + child: Column( + children: [ + Expanded( + child: CupertinoDatePicker( + mode: CupertinoDatePickerMode.time, + use24hFormat: true, + initialDateTime: DateTime.now(), + onDateTimeChanged: (newTime) { + setState(() { + _time = newTime; + time = "${_time.hour.toString().padLeft(2, '0')} : ${_time.minute.toString().padLeft(2, '0')}"; + }); + }, + ), + ), + InkWell( + onTap: () { + Navigator.of(context).pop(); + }, + borderRadius: BorderRadius.circular(20), + child: Ink( + width: MediaQuery.of(context).size.width - 16, + height: 52, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(20), + color: appTheme.blueA400, + ), + child: Center( + child: Text( + 'Сохранить', + style: TextStyle( + fontSize: 18, + fontWeight: FontWeight.w600, + color: Colors.white, + ), + ), + ), + ), + ), + ], + ), + ), + ); + } @override Widget build(BuildContext context) { @@ -78,6 +131,31 @@ class _DiaryScreenState extends State { ); } + _timeOfMeal(String time) { + return InkWell( + onTap: () => _showDatePicker(), + borderRadius: BorderRadius.circular(100), + child: Ink( + width: MediaQuery.of(context).size.width / 5, + height: 32, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(100), + color: Color(0xFFF1F2F6), + ), + child: Center( + child: Text( + time, + style: TextStyle( + color: Color(0xFF6D6F71), + fontSize: 17, + fontWeight: FontWeight.w500, + ), + ), + ), + ), + ); + } + _arrowDown() { return GestureDetector( behavior: HitTestBehavior.translucent, @@ -180,13 +258,19 @@ class _DiaryScreenState extends State { const SizedBox(height: 12), _divider(context), const SizedBox(height: 12), - Text( - 'Время приема пищи', - style: TextStyle( - color: Color(0xFF323F4B), - fontSize: 16, - fontWeight: FontWeight.w500, - ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + 'Время приема пищи', + style: TextStyle( + color: Color(0xFF323F4B), + fontSize: 16, + fontWeight: FontWeight.w500, + ), + ), + _timeOfMeal(time), + ], ), const SizedBox(height: 12), _divider(context), @@ -634,7 +718,7 @@ class _DiaryScreenState extends State { child: Text( '$mealNumber', style: TextStyle( - color: isActive ? Colors.white : Colors.black, + color: isActive ? Colors.white : Color(0xFF6D6F71), fontSize: 16, fontWeight: FontWeight.w600, ), diff --git a/pubspec.yaml b/pubspec.yaml index a0ffdb94..de9c3ac0 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -51,6 +51,8 @@ dependencies: rive: ^0.13.15 mask_text_input_formatter: ^2.9.0 lottie: ^3.1.3 + flutter_portal: ^1.1.4 + fluttertoast: ^8.2.8 flutter_rating_bar: ^4.0.1 dev_dependencies: