feat(diary): chart update

2024-11-11 13:29:05 +03:00
parent d824cbc58e
commit bc8cff2a55
12 changed files with 760 additions and 82 deletions
--- a/lib/features/diary/presentation/bloc/diary_cubit.dart
+++ b/lib/features/diary/presentation/bloc/diary_cubit.dart
@@ -1,6 +1,7 @@
 import 'dart:io';

 import 'package:eatvio_app/features/diary/models/diary_day_model.dart';
+import 'package:eatvio_app/features/diary/models/nutrition_model.dart';
 import 'package:eatvio_app/features/diary/presentation/bloc/diary_state.dart';
 import 'package:eatvio_app/features/diary/repositories/diary_repository.dart';
 import 'package:eatvio_app/features/glossary/models/glossary_model.dart';
@@ -23,6 +24,7 @@ class DiaryCubit extends Cubit<DiaryState> {
      emit(
        DiaryState.loaded(
          diary: await diaryRepository.getDiaryByDate(date),
+          nutrition: await getNutrition(await diaryRepository.getDiaryIndexByDate(date)),
          currentSelectedSatietyRating: currentSelectedSatietyRating,
        ),
      );
@@ -32,6 +34,10 @@ class DiaryCubit extends Cubit<DiaryState> {
    }
  }

+  Future<NutritionDataModel> getNutrition(int index) async {
+    return (await diaryRepository.getNutritionData(index));
+  }
+
  addProductToMeal({
    required int diaryId,
    required int mealId,
--- a/lib/features/diary/presentation/bloc/diary_state.dart
+++ b/lib/features/diary/presentation/bloc/diary_state.dart
@@ -1,4 +1,5 @@
 import 'package:eatvio_app/features/diary/models/diary_day_model.dart';
+import 'package:eatvio_app/features/diary/models/nutrition_model.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';

 part 'diary_state.freezed.dart';
@@ -15,6 +16,7 @@ class DiaryState with _$DiaryState {

  const factory DiaryState.loaded({
    required DiaryDayModel diary,
+    required NutritionDataModel nutrition,
    required double currentSelectedSatietyRating,
  }) = DiaryStateLoaded;
 }
--- a/lib/features/diary/presentation/bloc/diary_state.freezed.dart
+++ b/lib/features/diary/presentation/bloc/diary_state.freezed.dart
@@ -21,8 +21,8 @@ mixin _$DiaryState {
    TResult Function() $default, {
    required TResult Function() loading,
    required TResult Function(String errorMessage) error,
-    required TResult Function(
-            DiaryDayModel diary, double currentSelectedSatietyRating)
+    required TResult Function(DiaryDayModel diary, NutritionDataModel nutrition,
+            double currentSelectedSatietyRating)
        loaded,
  }) =>
      throw _privateConstructorUsedError;
@@ -31,7 +31,8 @@ mixin _$DiaryState {
    TResult? Function()? $default, {
    TResult? Function()? loading,
    TResult? Function(String errorMessage)? error,
-    TResult? Function(DiaryDayModel diary, double currentSelectedSatietyRating)?
+    TResult? Function(DiaryDayModel diary, NutritionDataModel nutrition,
+            double currentSelectedSatietyRating)?
        loaded,
  }) =>
      throw _privateConstructorUsedError;
@@ -40,7 +41,8 @@ mixin _$DiaryState {
    TResult Function()? $default, {
    TResult Function()? loading,
    TResult Function(String errorMessage)? error,
-    TResult Function(DiaryDayModel diary, double currentSelectedSatietyRating)?
+    TResult Function(DiaryDayModel diary, NutritionDataModel nutrition,
+            double currentSelectedSatietyRating)?
        loaded,
    required TResult orElse(),
  }) =>
@@ -137,8 +139,8 @@ class _$DiaryStateImpl implements _DiaryState {
    TResult Function() $default, {
    required TResult Function() loading,
    required TResult Function(String errorMessage) error,
-    required TResult Function(
-            DiaryDayModel diary, double currentSelectedSatietyRating)
+    required TResult Function(DiaryDayModel diary, NutritionDataModel nutrition,
+            double currentSelectedSatietyRating)
        loaded,
  }) {
    return $default();
@@ -150,7 +152,8 @@ class _$DiaryStateImpl implements _DiaryState {
    TResult? Function()? $default, {
    TResult? Function()? loading,
    TResult? Function(String errorMessage)? error,
-    TResult? Function(DiaryDayModel diary, double currentSelectedSatietyRating)?
+    TResult? Function(DiaryDayModel diary, NutritionDataModel nutrition,
+            double currentSelectedSatietyRating)?
        loaded,
  }) {
    return $default?.call();
@@ -162,7 +165,8 @@ class _$DiaryStateImpl implements _DiaryState {
    TResult Function()? $default, {
    TResult Function()? loading,
    TResult Function(String errorMessage)? error,
-    TResult Function(DiaryDayModel diary, double currentSelectedSatietyRating)?
+    TResult Function(DiaryDayModel diary, NutritionDataModel nutrition,
+            double currentSelectedSatietyRating)?
        loaded,
    required TResult orElse(),
  }) {
@@ -258,8 +262,8 @@ class _$DiaryStateLoadingImpl implements DiaryStateLoading {
    TResult Function() $default, {
    required TResult Function() loading,
    required TResult Function(String errorMessage) error,
-    required TResult Function(
-            DiaryDayModel diary, double currentSelectedSatietyRating)
+    required TResult Function(DiaryDayModel diary, NutritionDataModel nutrition,
+            double currentSelectedSatietyRating)
        loaded,
  }) {
    return loading();
@@ -271,7 +275,8 @@ class _$DiaryStateLoadingImpl implements DiaryStateLoading {
    TResult? Function()? $default, {
    TResult? Function()? loading,
    TResult? Function(String errorMessage)? error,
-    TResult? Function(DiaryDayModel diary, double currentSelectedSatietyRating)?
+    TResult? Function(DiaryDayModel diary, NutritionDataModel nutrition,
+            double currentSelectedSatietyRating)?
        loaded,
  }) {
    return loading?.call();
@@ -283,7 +288,8 @@ class _$DiaryStateLoadingImpl implements DiaryStateLoading {
    TResult Function()? $default, {
    TResult Function()? loading,
    TResult Function(String errorMessage)? error,
-    TResult Function(DiaryDayModel diary, double currentSelectedSatietyRating)?
+    TResult Function(DiaryDayModel diary, NutritionDataModel nutrition,
+            double currentSelectedSatietyRating)?
        loaded,
    required TResult orElse(),
  }) {
@@ -408,8 +414,8 @@ class _$DiaryStateErrorImpl implements DiaryStateError {
    TResult Function() $default, {
    required TResult Function() loading,
    required TResult Function(String errorMessage) error,
-    required TResult Function(
-            DiaryDayModel diary, double currentSelectedSatietyRating)
+    required TResult Function(DiaryDayModel diary, NutritionDataModel nutrition,
+            double currentSelectedSatietyRating)
        loaded,
  }) {
    return error(errorMessage);
@@ -421,7 +427,8 @@ class _$DiaryStateErrorImpl implements DiaryStateError {
    TResult? Function()? $default, {
    TResult? Function()? loading,
    TResult? Function(String errorMessage)? error,
-    TResult? Function(DiaryDayModel diary, double currentSelectedSatietyRating)?
+    TResult? Function(DiaryDayModel diary, NutritionDataModel nutrition,
+            double currentSelectedSatietyRating)?
        loaded,
  }) {
    return error?.call(errorMessage);
@@ -433,7 +440,8 @@ class _$DiaryStateErrorImpl implements DiaryStateError {
    TResult Function()? $default, {
    TResult Function()? loading,
    TResult Function(String errorMessage)? error,
-    TResult Function(DiaryDayModel diary, double currentSelectedSatietyRating)?
+    TResult Function(DiaryDayModel diary, NutritionDataModel nutrition,
+            double currentSelectedSatietyRating)?
        loaded,
    required TResult orElse(),
  }) {
@@ -500,9 +508,13 @@ abstract class _$$DiaryStateLoadedImplCopyWith<$Res> {
          $Res Function(_$DiaryStateLoadedImpl) then) =
      __$$DiaryStateLoadedImplCopyWithImpl<$Res>;
  @useResult
-  $Res call({DiaryDayModel diary, double currentSelectedSatietyRating});
+  $Res call(
+      {DiaryDayModel diary,
+      NutritionDataModel nutrition,
+      double currentSelectedSatietyRating});

  $DiaryDayModelCopyWith<$Res> get diary;
+  $NutritionDataModelCopyWith<$Res> get nutrition;
 }

 /// @nodoc
@@ -519,6 +531,7 @@ class __$$DiaryStateLoadedImplCopyWithImpl<$Res>
  @override
  $Res call({
    Object? diary = null,
+    Object? nutrition = null,
    Object? currentSelectedSatietyRating = null,
  }) {
    return _then(_$DiaryStateLoadedImpl(
@@ -526,6 +539,10 @@ class __$$DiaryStateLoadedImplCopyWithImpl<$Res>
          ? _value.diary
          : diary // ignore: cast_nullable_to_non_nullable
              as DiaryDayModel,
+      nutrition: null == nutrition
+          ? _value.nutrition
+          : nutrition // ignore: cast_nullable_to_non_nullable
+              as NutritionDataModel,
      currentSelectedSatietyRating: null == currentSelectedSatietyRating
          ? _value.currentSelectedSatietyRating
          : currentSelectedSatietyRating // ignore: cast_nullable_to_non_nullable
@@ -542,22 +559,36 @@ class __$$DiaryStateLoadedImplCopyWithImpl<$Res>
      return _then(_value.copyWith(diary: value));
    });
  }
+
+  /// Create a copy of DiaryState
+  /// with the given fields replaced by the non-null parameter values.
+  @override
+  @pragma('vm:prefer-inline')
+  $NutritionDataModelCopyWith<$Res> get nutrition {
+    return $NutritionDataModelCopyWith<$Res>(_value.nutrition, (value) {
+      return _then(_value.copyWith(nutrition: value));
+    });
+  }
 }

 /// @nodoc

 class _$DiaryStateLoadedImpl implements DiaryStateLoaded {
  const _$DiaryStateLoadedImpl(
-      {required this.diary, required this.currentSelectedSatietyRating});
+      {required this.diary,
+      required this.nutrition,
+      required this.currentSelectedSatietyRating});

  @override
  final DiaryDayModel diary;
  @override
+  final NutritionDataModel nutrition;
+  @override
  final double currentSelectedSatietyRating;

  @override
  String toString() {
-    return 'DiaryState.loaded(diary: $diary, currentSelectedSatietyRating: $currentSelectedSatietyRating)';
+    return 'DiaryState.loaded(diary: $diary, nutrition: $nutrition, currentSelectedSatietyRating: $currentSelectedSatietyRating)';
  }

  @override
@@ -566,6 +597,8 @@ class _$DiaryStateLoadedImpl implements DiaryStateLoaded {
        (other.runtimeType == runtimeType &&
            other is _$DiaryStateLoadedImpl &&
            (identical(other.diary, diary) || other.diary == diary) &&
+            (identical(other.nutrition, nutrition) ||
+                other.nutrition == nutrition) &&
            (identical(other.currentSelectedSatietyRating,
                    currentSelectedSatietyRating) ||
                other.currentSelectedSatietyRating ==
@@ -574,7 +607,7 @@ class _$DiaryStateLoadedImpl implements DiaryStateLoaded {

  @override
  int get hashCode =>
-      Object.hash(runtimeType, diary, currentSelectedSatietyRating);
+      Object.hash(runtimeType, diary, nutrition, currentSelectedSatietyRating);

  /// Create a copy of DiaryState
  /// with the given fields replaced by the non-null parameter values.
@@ -591,11 +624,11 @@ class _$DiaryStateLoadedImpl implements DiaryStateLoaded {
    TResult Function() $default, {
    required TResult Function() loading,
    required TResult Function(String errorMessage) error,
-    required TResult Function(
-            DiaryDayModel diary, double currentSelectedSatietyRating)
+    required TResult Function(DiaryDayModel diary, NutritionDataModel nutrition,
+            double currentSelectedSatietyRating)
        loaded,
  }) {
-    return loaded(diary, currentSelectedSatietyRating);
+    return loaded(diary, nutrition, currentSelectedSatietyRating);
  }

  @override
@@ -604,10 +637,11 @@ class _$DiaryStateLoadedImpl implements DiaryStateLoaded {
    TResult? Function()? $default, {
    TResult? Function()? loading,
    TResult? Function(String errorMessage)? error,
-    TResult? Function(DiaryDayModel diary, double currentSelectedSatietyRating)?
+    TResult? Function(DiaryDayModel diary, NutritionDataModel nutrition,
+            double currentSelectedSatietyRating)?
        loaded,
  }) {
-    return loaded?.call(diary, currentSelectedSatietyRating);
+    return loaded?.call(diary, nutrition, currentSelectedSatietyRating);
  }

  @override
@@ -616,12 +650,13 @@ class _$DiaryStateLoadedImpl implements DiaryStateLoaded {
    TResult Function()? $default, {
    TResult Function()? loading,
    TResult Function(String errorMessage)? error,
-    TResult Function(DiaryDayModel diary, double currentSelectedSatietyRating)?
+    TResult Function(DiaryDayModel diary, NutritionDataModel nutrition,
+            double currentSelectedSatietyRating)?
        loaded,
    required TResult orElse(),
  }) {
    if (loaded != null) {
-      return loaded(diary, currentSelectedSatietyRating);
+      return loaded(diary, nutrition, currentSelectedSatietyRating);
    }
    return orElse();
  }
@@ -667,10 +702,12 @@ class _$DiaryStateLoadedImpl implements DiaryStateLoaded {
 abstract class DiaryStateLoaded implements DiaryState {
  const factory DiaryStateLoaded(
          {required final DiaryDayModel diary,
+          required final NutritionDataModel nutrition,
          required final double currentSelectedSatietyRating}) =
      _$DiaryStateLoadedImpl;

  DiaryDayModel get diary;
+  NutritionDataModel get nutrition;
  double get currentSelectedSatietyRating;

  /// Create a copy of DiaryState
--- a/lib/features/diary/presentation/pages/diary_screen.dart
+++ b/lib/features/diary/presentation/pages/diary_screen.dart
@@ -2,6 +2,7 @@ import 'dart:io';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:eatvio_app/core/const.dart';
 import 'package:eatvio_app/features/diary/models/diary_day_model.dart';
+import 'package:eatvio_app/features/diary/models/nutrition_model.dart';
 import 'package:eatvio_app/features/diary/presentation/bloc/diary_cubit.dart';
 import 'package:eatvio_app/features/diary/presentation/bloc/diary_state.dart';
 import 'package:eatvio_app/features/diary/presentation/widgets/satiety_rating_widget.dart';
@@ -16,7 +17,7 @@ import 'package:flutter_svg/flutter_svg.dart';
 import 'package:flutter_typeahead/flutter_typeahead.dart';
 import 'package:image_picker/image_picker.dart';
 import 'package:rive/rive.dart';
-import 'package:syncfusion_flutter_charts/charts.dart';
+import 'package:syncfusion_flutter_gauges/gauges.dart';
 import 'package:table_calendar/table_calendar.dart';

 class DiaryScreen extends StatefulWidget {
@@ -66,7 +67,7 @@ class _DiaryScreenState extends State<DiaryScreen> {
                      state.diary,
                      state.currentSelectedSatietyRating,
                    ),
-                  if (state is DiaryStateLoaded) _chart(),
+                  if (state is DiaryStateLoaded) _chart(state.nutrition),
                  const SizedBox(height: 32),
                ],
              ),
@@ -208,30 +209,26 @@ class _DiaryScreenState extends State<DiaryScreen> {
    );
  }

-  _chart() {
+  _chart(NutritionDataModel nutrition) {
    final List<ChartData> chartData = [
      ChartData(
-        1924,
-        200,
-        '100%',
+        nutrition.dailyNutritionIntake.carbohydrates,
+        nutrition.dailyNutritionRecommendation.carbohydrates,
        Color(0xFFFF9500),
      ),
      ChartData(
-        1925,
-        50,
-        '100%',
+        nutrition.dailyNutritionIntake.fats,
+        nutrition.dailyNutritionRecommendation.fats,
        Color(0xFFFF3B30),
      ),
      ChartData(
-        1926,
-        70,
-        '100%',
+        nutrition.dailyNutritionIntake.proteins,
+        nutrition.dailyNutritionRecommendation.proteins,
        Color(0xFF4CD964),
      ),
      ChartData(
-        1926,
-        70,
-        '100%',
+        nutrition.dailyNutritionIntake.energy,
+        nutrition.dailyNutritionRecommendation.energy,
        Color(0xFF007AFF),
      ),
    ];
@@ -257,38 +254,126 @@ class _DiaryScreenState extends State<DiaryScreen> {
              height: 1,
            ),
          ),
-          Transform.rotate(
-            angle: -1.5708,
-            child: ClipRect(
-              child: Align(
-                alignment: Alignment.centerRight,
-                widthFactor: 0.5,
-                child: SfCircularChart(
-                  series: <CircularSeries>[
-                    RadialBarSeries<ChartData, int>(
-                      dataSource: chartData,
-                      xValueMapper: (ChartData data, _) => data.x,
-                      yValueMapper: (ChartData data, _) => data.y,
-                      pointColorMapper: (ChartData data, _) => data.color,
-                      trackColor: Color.fromRGBO(59, 130, 246, 1),
-                      trackOpacity: 0.1,
-                      gap: "8%",
-                      radius: "110%",
-                      innerRadius: '20%',
-                      cornerStyle: CornerStyle.bothCurve,
-                    ),
-                  ],
+          SfRadialGauge(
+            axes: <RadialAxis>[
+              RadialAxis(
+                startAngle: 180,
+                endAngle: 0,
+                minimum: 0,
+                maximum: 100,
+                showLabels: false,
+                showTicks: false,
+                radiusFactor: 0.8,
+                axisLineStyle: AxisLineStyle(
+                  thickness: 0.1,
+                  color: Colors.grey[200],
+                  thicknessUnit: GaugeSizeUnit.factor,
                ),
+                pointers: <GaugePointer>[
+                  // Carbohydrates Arc
+                  RangePointer(
+                    value: (chartData[0].intake / chartData[0].recommendation) * 100,
+                    width: 0.1,
+                    color: chartData[0].color,
+                    sizeUnit: GaugeSizeUnit.factor,
+                    enableAnimation: true,
+                    cornerStyle: CornerStyle.bothCurve, // Rounded ends
+                  ),
+                  // Fats Arc
+                  RangePointer(
+                    value: (chartData[1].intake / chartData[1].recommendation) * 100,
+                    width: 0.1,
+                    color: chartData[1].color,
+                    sizeUnit: GaugeSizeUnit.factor,
+                    enableAnimation: true,
+                    cornerStyle: CornerStyle.bothCurve,
+                    pointerOffset: -0.12,
+                  ),
+                  // Proteins Arc
+                  RangePointer(
+                    value: (chartData[2].intake / chartData[2].recommendation) * 100,
+                    width: 0.1,
+                    color: chartData[2].color,
+                    sizeUnit: GaugeSizeUnit.factor,
+                    enableAnimation: true,
+                    cornerStyle: CornerStyle.bothCurve,
+                    pointerOffset: -0.24,
+                  ),
+                  // Calories Arc
+                  RangePointer(
+                    value: (chartData[3].intake / chartData[3].recommendation) * 100,
+                    width: 0.1,
+                    color: chartData[3].color,
+                    sizeUnit: GaugeSizeUnit.factor,
+                    enableAnimation: true,
+                    cornerStyle: CornerStyle.bothCurve,
+                    pointerOffset: -0.36,
+                  ),
+                ],
+                annotations: <GaugeAnnotation>[
+                  // Label for Carbohydrates
+                  GaugeAnnotation(
+                    widget: Transform.rotate(
+                      angle: 30,
+                      child: Text(
+                        'Углеводы',
+                        style: TextStyle(color: Colors.white, fontSize: 12),
+                      ),
+                    ),
+                    angle: 194,
+                    positionFactor: 1,
+                  ),
+                  // Label for Fats
+                  GaugeAnnotation(
+                    widget: Transform.rotate(
+                      angle: 30,
+                      child: Text(
+                        'Жиры',
+                        style: TextStyle(color: Colors.white, fontSize: 12),
+                      ),
+                    ),
+                    angle: 190,
+                    positionFactor: 1.07,
+                  ),
+                  // Label for Proteins
+                  GaugeAnnotation(
+                    widget: Transform.rotate(
+                      angle: 30,
+                      child: Text(
+                        'Белки',
+                        style: TextStyle(color: Colors.white, fontSize: 12),
+                      ),
+                    ),
+                    angle: 190,
+                    positionFactor: 1.19,
+                  ),
+                  // Label for Calories
+                  GaugeAnnotation(
+                    widget: Transform.rotate(
+                      angle: 30,
+                      child: Text(
+                        'Калории',
+                        style: TextStyle(color: Colors.white, fontSize: 12),
+                      ),
+                    ),
+                    angle: 192,
+                    positionFactor: 1.31,
+                  ),
+                ],
              ),
-            ),
+            ],
          ),
-          _chartData('Калории', '0 ккал'),
+          _chartData('Калории',
+              '${nutrition.dailyNutritionIntake.energy.toStringAsFixed(0)} из ${nutrition.dailyNutritionRecommendation.energy.toStringAsFixed(0)} ккал'),
          const SizedBox(height: 8),
-          _chartData('Белки', '0 грамм'),
+          _chartData('Белки',
+              '${nutrition.dailyNutritionIntake.proteins.toStringAsFixed(0)} из ${nutrition.dailyNutritionRecommendation.proteins.toStringAsFixed(0)} грамм'),
          const SizedBox(height: 8),
-          _chartData('Жиры', '0 грамм'),
+          _chartData(
+              'Жиры', '${nutrition.dailyNutritionIntake.fats.toStringAsFixed(0)} из ${nutrition.dailyNutritionRecommendation.fats.toStringAsFixed(0)} грамм'),
          const SizedBox(height: 8),
-          _chartData('Углеводы', '0 грамм'),
+          _chartData('Углеводы',
+              '${nutrition.dailyNutritionIntake.carbohydrates.toStringAsFixed(0)} из ${nutrition.dailyNutritionRecommendation.carbohydrates.toStringAsFixed(0)} грамм'),
        ],
      ),
    );
@@ -795,14 +880,13 @@ class _DiaryScreenState extends State<DiaryScreen> {
 }

 class ChartData {
-  int x, y;
-  String text;
-  Color color;
+  final double intake;
+  final double recommendation;
+  final Color color;

  ChartData(
-    this.x,
-    this.y,
-    this.text,
+    this.intake,
+    this.recommendation,
    this.color,
  );
 }
--- a/lib/features/diary/presentation/widgets/satiety_rating_widget.dart
+++ b/lib/features/diary/presentation/widgets/satiety_rating_widget.dart
@@ -47,7 +47,7 @@ class _SatietyRatingWidgetState extends State<SatietyRatingWidget> {
                    case 0:
                      return Container(
                        width: MediaQuery.of(context).size.width / 6,
-                        height: 16,
+                        height: 24,
                        margin: widget.currentSelectedSatietyRating == 1 ? EdgeInsets.symmetric(horizontal: 2) : null,
                        decoration: BoxDecoration(
                          color: Color(0xFFC82222),
@@ -71,7 +71,7 @@ class _SatietyRatingWidgetState extends State<SatietyRatingWidget> {
                    case 1:
                      return Container(
                        width: MediaQuery.of(context).size.width / 6,
-                        height: 16,
+                        height: 24,
                        margin: widget.currentSelectedSatietyRating == 2 ? EdgeInsets.symmetric(horizontal: 2) : null,
                        decoration: BoxDecoration(
                          color: Color(0xFFFF3E3E),
@@ -88,7 +88,7 @@ class _SatietyRatingWidgetState extends State<SatietyRatingWidget> {
                    case 2:
                      return Container(
                        width: MediaQuery.of(context).size.width / 6,
-                        height: 16,
+                        height: 24,
                        margin: widget.currentSelectedSatietyRating == 3 ? EdgeInsets.symmetric(horizontal: 2) : null,
                        decoration: BoxDecoration(
                          color: Color(0xFFF8C926),
@@ -105,7 +105,7 @@ class _SatietyRatingWidgetState extends State<SatietyRatingWidget> {
                    case 3:
                      return Container(
                        width: MediaQuery.of(context).size.width / 6,
-                        height: 16,
+                        height: 24,
                        margin: widget.currentSelectedSatietyRating == 4 ? EdgeInsets.symmetric(horizontal: 2) : null,
                        decoration: BoxDecoration(
                          color: Color(0xFFFFF3BF),
@@ -122,7 +122,7 @@ class _SatietyRatingWidgetState extends State<SatietyRatingWidget> {
                    case 4:
                      return Container(
                        width: MediaQuery.of(context).size.width / 6,
-                        height: 16,
+                        height: 24,
                        margin: widget.currentSelectedSatietyRating == 5 ? EdgeInsets.symmetric(horizontal: 2) : null,
                        decoration: BoxDecoration(
                          color: Color(0xFF62E833),
@@ -139,7 +139,7 @@ class _SatietyRatingWidgetState extends State<SatietyRatingWidget> {
                    default:
                      return Container(
                        width: MediaQuery.of(context).size.width / 6,
-                        height: 16,
+                        height: 24,
                        margin: widget.currentSelectedSatietyRating == 6 ? EdgeInsets.symmetric(horizontal: 2) : null,
                        decoration: BoxDecoration(
                          color: Color(0xFF4DCE20),