feat(diary):

2024-11-11 04:57:41 +03:00
parent e3fc4811b8
commit 9b7e972268
5 changed files with 264 additions and 190 deletions
--- a/lib/features/diary/presentation/bloc/diary_cubit.dart
+++ b/lib/features/diary/presentation/bloc/diary_cubit.dart
@@ -10,6 +10,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 class DiaryCubit extends Cubit<DiaryState> {
  final DiaryRepository diaryRepository;
  final GlossaryRepository glossaryRepository;
+  double currentSelectedSatietyRating = 3;

  DiaryCubit({
    required this.diaryRepository,
@@ -19,7 +20,12 @@ class DiaryCubit extends Cubit<DiaryState> {
  getDiaryDay(String date, [bool needLoading = true]) async {
    if (needLoading) emit(const DiaryState.loading());
    try {
-      emit(DiaryState.loaded(diary: await diaryRepository.getDiaryByDate(date)));
+      emit(
+        DiaryState.loaded(
+          diary: await diaryRepository.getDiaryByDate(date),
+          currentSelectedSatietyRating: currentSelectedSatietyRating,
+        ),
+      );
    } catch (e) {
      emit(DiaryState.error(errorMessage: e.toString()));
      throw e;
@@ -109,4 +115,9 @@ class DiaryCubit extends Cubit<DiaryState> {
    );
    await getDiaryDay(date, false);
  }
+
+  updateCurrentSelectedSatietyRating(double value) {
+    currentSelectedSatietyRating = value;
+    emit((state as DiaryStateLoaded).copyWith(currentSelectedSatietyRating: currentSelectedSatietyRating));
+  }
 }
--- a/lib/features/diary/presentation/bloc/diary_state.dart
+++ b/lib/features/diary/presentation/bloc/diary_state.dart
@@ -15,5 +15,6 @@ class DiaryState with _$DiaryState {

  const factory DiaryState.loaded({
    required DiaryDayModel diary,
+    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,7 +21,9 @@ mixin _$DiaryState {
    TResult Function() $default, {
    required TResult Function() loading,
    required TResult Function(String errorMessage) error,
-    required TResult Function(DiaryDayModel diary) loaded,
+    required TResult Function(
+            DiaryDayModel diary, double currentSelectedSatietyRating)
+        loaded,
  }) =>
      throw _privateConstructorUsedError;
  @optionalTypeArgs
@@ -29,7 +31,8 @@ mixin _$DiaryState {
    TResult? Function()? $default, {
    TResult? Function()? loading,
    TResult? Function(String errorMessage)? error,
-    TResult? Function(DiaryDayModel diary)? loaded,
+    TResult? Function(DiaryDayModel diary, double currentSelectedSatietyRating)?
+        loaded,
  }) =>
      throw _privateConstructorUsedError;
  @optionalTypeArgs
@@ -37,7 +40,8 @@ mixin _$DiaryState {
    TResult Function()? $default, {
    TResult Function()? loading,
    TResult Function(String errorMessage)? error,
-    TResult Function(DiaryDayModel diary)? loaded,
+    TResult Function(DiaryDayModel diary, double currentSelectedSatietyRating)?
+        loaded,
    required TResult orElse(),
  }) =>
      throw _privateConstructorUsedError;
@@ -133,7 +137,9 @@ class _$DiaryStateImpl implements _DiaryState {
    TResult Function() $default, {
    required TResult Function() loading,
    required TResult Function(String errorMessage) error,
-    required TResult Function(DiaryDayModel diary) loaded,
+    required TResult Function(
+            DiaryDayModel diary, double currentSelectedSatietyRating)
+        loaded,
  }) {
    return $default();
  }
@@ -144,7 +150,8 @@ class _$DiaryStateImpl implements _DiaryState {
    TResult? Function()? $default, {
    TResult? Function()? loading,
    TResult? Function(String errorMessage)? error,
-    TResult? Function(DiaryDayModel diary)? loaded,
+    TResult? Function(DiaryDayModel diary, double currentSelectedSatietyRating)?
+        loaded,
  }) {
    return $default?.call();
  }
@@ -155,7 +162,8 @@ class _$DiaryStateImpl implements _DiaryState {
    TResult Function()? $default, {
    TResult Function()? loading,
    TResult Function(String errorMessage)? error,
-    TResult Function(DiaryDayModel diary)? loaded,
+    TResult Function(DiaryDayModel diary, double currentSelectedSatietyRating)?
+        loaded,
    required TResult orElse(),
  }) {
    if ($default != null) {
@@ -250,7 +258,9 @@ class _$DiaryStateLoadingImpl implements DiaryStateLoading {
    TResult Function() $default, {
    required TResult Function() loading,
    required TResult Function(String errorMessage) error,
-    required TResult Function(DiaryDayModel diary) loaded,
+    required TResult Function(
+            DiaryDayModel diary, double currentSelectedSatietyRating)
+        loaded,
  }) {
    return loading();
  }
@@ -261,7 +271,8 @@ class _$DiaryStateLoadingImpl implements DiaryStateLoading {
    TResult? Function()? $default, {
    TResult? Function()? loading,
    TResult? Function(String errorMessage)? error,
-    TResult? Function(DiaryDayModel diary)? loaded,
+    TResult? Function(DiaryDayModel diary, double currentSelectedSatietyRating)?
+        loaded,
  }) {
    return loading?.call();
  }
@@ -272,7 +283,8 @@ class _$DiaryStateLoadingImpl implements DiaryStateLoading {
    TResult Function()? $default, {
    TResult Function()? loading,
    TResult Function(String errorMessage)? error,
-    TResult Function(DiaryDayModel diary)? loaded,
+    TResult Function(DiaryDayModel diary, double currentSelectedSatietyRating)?
+        loaded,
    required TResult orElse(),
  }) {
    if (loading != null) {
@@ -396,7 +408,9 @@ class _$DiaryStateErrorImpl implements DiaryStateError {
    TResult Function() $default, {
    required TResult Function() loading,
    required TResult Function(String errorMessage) error,
-    required TResult Function(DiaryDayModel diary) loaded,
+    required TResult Function(
+            DiaryDayModel diary, double currentSelectedSatietyRating)
+        loaded,
  }) {
    return error(errorMessage);
  }
@@ -407,7 +421,8 @@ class _$DiaryStateErrorImpl implements DiaryStateError {
    TResult? Function()? $default, {
    TResult? Function()? loading,
    TResult? Function(String errorMessage)? error,
-    TResult? Function(DiaryDayModel diary)? loaded,
+    TResult? Function(DiaryDayModel diary, double currentSelectedSatietyRating)?
+        loaded,
  }) {
    return error?.call(errorMessage);
  }
@@ -418,7 +433,8 @@ class _$DiaryStateErrorImpl implements DiaryStateError {
    TResult Function()? $default, {
    TResult Function()? loading,
    TResult Function(String errorMessage)? error,
-    TResult Function(DiaryDayModel diary)? loaded,
+    TResult Function(DiaryDayModel diary, double currentSelectedSatietyRating)?
+        loaded,
    required TResult orElse(),
  }) {
    if (error != null) {
@@ -484,7 +500,7 @@ abstract class _$$DiaryStateLoadedImplCopyWith<$Res> {
          $Res Function(_$DiaryStateLoadedImpl) then) =
      __$$DiaryStateLoadedImplCopyWithImpl<$Res>;
  @useResult
-  $Res call({DiaryDayModel diary});
+  $Res call({DiaryDayModel diary, double currentSelectedSatietyRating});

  $DiaryDayModelCopyWith<$Res> get diary;
 }
@@ -503,12 +519,17 @@ class __$$DiaryStateLoadedImplCopyWithImpl<$Res>
  @override
  $Res call({
    Object? diary = null,
+    Object? currentSelectedSatietyRating = null,
  }) {
    return _then(_$DiaryStateLoadedImpl(
      diary: null == diary
          ? _value.diary
          : diary // ignore: cast_nullable_to_non_nullable
              as DiaryDayModel,
+      currentSelectedSatietyRating: null == currentSelectedSatietyRating
+          ? _value.currentSelectedSatietyRating
+          : currentSelectedSatietyRating // ignore: cast_nullable_to_non_nullable
+              as double,
    ));
  }

@@ -526,14 +547,17 @@ class __$$DiaryStateLoadedImplCopyWithImpl<$Res>
 /// @nodoc

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

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

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

  @override
@@ -541,11 +565,16 @@ class _$DiaryStateLoadedImpl implements DiaryStateLoaded {
    return identical(this, other) ||
        (other.runtimeType == runtimeType &&
            other is _$DiaryStateLoadedImpl &&
-            (identical(other.diary, diary) || other.diary == diary));
+            (identical(other.diary, diary) || other.diary == diary) &&
+            (identical(other.currentSelectedSatietyRating,
+                    currentSelectedSatietyRating) ||
+                other.currentSelectedSatietyRating ==
+                    currentSelectedSatietyRating));
  }

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

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

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

  @override
@@ -584,11 +616,12 @@ class _$DiaryStateLoadedImpl implements DiaryStateLoaded {
    TResult Function()? $default, {
    TResult Function()? loading,
    TResult Function(String errorMessage)? error,
-    TResult Function(DiaryDayModel diary)? loaded,
+    TResult Function(DiaryDayModel diary, double currentSelectedSatietyRating)?
+        loaded,
    required TResult orElse(),
  }) {
    if (loaded != null) {
-      return loaded(diary);
+      return loaded(diary, currentSelectedSatietyRating);
    }
    return orElse();
  }
@@ -632,10 +665,13 @@ class _$DiaryStateLoadedImpl implements DiaryStateLoaded {
 }

 abstract class DiaryStateLoaded implements DiaryState {
-  const factory DiaryStateLoaded({required final DiaryDayModel diary}) =
+  const factory DiaryStateLoaded(
+          {required final DiaryDayModel diary,
+          required final double currentSelectedSatietyRating}) =
      _$DiaryStateLoadedImpl;

  DiaryDayModel get diary;
+  double get currentSelectedSatietyRating;

  /// Create a copy of DiaryState
  /// with the given fields replaced by the non-null parameter values.
--- a/lib/features/diary/presentation/pages/diary_screen.dart
+++ b/lib/features/diary/presentation/pages/diary_screen.dart
@@ -4,6 +4,7 @@ import 'package:eatvio_app/core/const.dart';
 import 'package:eatvio_app/features/diary/models/diary_day_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';
 import 'package:eatvio_app/features/glossary/models/glossary_model.dart';
 import 'package:eatvio_app/locator_service.dart';
 import 'package:eatvio_app/theme/theme_helper.dart';
@@ -11,7 +12,6 @@ import 'package:eatvio_app/widgets/custom_text_form_field.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:flutter_rating_bar/flutter_rating_bar.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:flutter_typeahead/flutter_typeahead.dart';
 import 'package:image_picker/image_picker.dart';
@@ -36,7 +36,6 @@ class _DiaryScreenState extends State<DiaryScreen> {
  final productNameController = TextEditingController();
  final quantityController = TextEditingController();
  int currentSelectedPhotoIndex = 0;
-  double currentSelectedSatietyRating = 3;

  @override
  Widget build(BuildContext context) {
@@ -62,7 +61,11 @@ class _DiaryScreenState extends State<DiaryScreen> {
                children: [
                  _calendar(state),
                  if (state is DiaryStateLoading) _loader(),
-                  if (state is DiaryStateLoaded) _meals(state.diary),
+                  if (state is DiaryStateLoaded)
+                    _meals(
+                      state.diary,
+                      state.currentSelectedSatietyRating,
+                    ),
                  if (state is DiaryStateLoaded) _chart(),
                  const SizedBox(height: 32),
                ],
@@ -74,166 +77,6 @@ class _DiaryScreenState extends State<DiaryScreen> {
    );
  }

-  _satietyRating() {
-    return Padding(
-      padding: const EdgeInsets.only(top: 24),
-      child: Column(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          Text(
-            'Ваша сытость после приёма пищи',
-            style: TextStyle(
-              fontSize: 16,
-            ),
-          ),
-          Row(
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-            children: [
-              SvgPicture.asset(
-                'assets/icons/satiety_emoji_left.svg',
-                height: 32,
-                width: 32,
-              ),
-              RatingBar.builder(
-                initialRating: 3,
-                itemCount: 6,
-                itemSize: MediaQuery.of(context).size.width / 6 - (124 / 6),
-                itemBuilder: (context, index) {
-                  switch (index) {
-                    case 0:
-                      return Container(
-                        width: MediaQuery.of(context).size.width / 6,
-                        height: 16,
-                        margin: currentSelectedSatietyRating == 1 ? EdgeInsets.symmetric(horizontal: 2) : null,
-                        decoration: BoxDecoration(
-                          color: Color(0xFFC82222),
-                          border: currentSelectedSatietyRating == 1
-                              ? Border.all(
-                                  width: 2,
-                                  color: Color(0xFFAA3333),
-                                  strokeAlign: BorderSide.strokeAlignOutside,
-                                )
-                              : null,
-                          borderRadius: currentSelectedSatietyRating == 1
-                              ? BorderRadius.horizontal(
-                                  left: Radius.circular(8),
-                                  right: Radius.circular(2),
-                                )
-                              : BorderRadius.horizontal(
-                                  left: Radius.circular(8),
-                                ),
-                        ),
-                      );
-                    case 1:
-                      return Container(
-                        width: MediaQuery.of(context).size.width / 6,
-                        height: 16,
-                        margin: currentSelectedSatietyRating == 2 ? EdgeInsets.symmetric(horizontal: 2) : null,
-                        decoration: BoxDecoration(
-                          color: Color(0xFFFF3E3E),
-                          border: currentSelectedSatietyRating == 2
-                              ? Border.all(
-                                  width: 2,
-                                  color: Color(0xFF550000),
-                                  strokeAlign: BorderSide.strokeAlignOutside,
-                                )
-                              : null,
-                          borderRadius: currentSelectedSatietyRating == 2 ? BorderRadius.circular(2) : null,
-                        ),
-                      );
-                    case 2:
-                      return Container(
-                        width: MediaQuery.of(context).size.width / 6,
-                        height: 16,
-                        margin: currentSelectedSatietyRating == 3 ? EdgeInsets.symmetric(horizontal: 2) : null,
-                        decoration: BoxDecoration(
-                          color: Color(0xFFF8C926),
-                          border: currentSelectedSatietyRating == 3
-                              ? Border.all(
-                                  width: 2,
-                                  color: Color(0xFF8C5D00),
-                                  strokeAlign: BorderSide.strokeAlignOutside,
-                                )
-                              : null,
-                          borderRadius: currentSelectedSatietyRating == 3 ? BorderRadius.circular(2) : null,
-                        ),
-                      );
-                    case 3:
-                      return Container(
-                        width: MediaQuery.of(context).size.width / 6,
-                        height: 16,
-                        margin: currentSelectedSatietyRating == 4 ? EdgeInsets.symmetric(horizontal: 2) : null,
-                        decoration: BoxDecoration(
-                          color: Color(0xFFFFF3BF),
-                          border: currentSelectedSatietyRating == 4
-                              ? Border.all(
-                                  width: 2,
-                                  color: Color(0xFFB5911B),
-                                  strokeAlign: BorderSide.strokeAlignOutside,
-                                )
-                              : null,
-                          borderRadius: currentSelectedSatietyRating == 4 ? BorderRadius.circular(2) : null,
-                        ),
-                      );
-                    case 4:
-                      return Container(
-                        width: MediaQuery.of(context).size.width / 6,
-                        height: 16,
-                        margin: currentSelectedSatietyRating == 5 ? EdgeInsets.symmetric(horizontal: 2) : null,
-                        decoration: BoxDecoration(
-                          color: Color(0xFF62E833),
-                          border: currentSelectedSatietyRating == 5
-                              ? Border.all(
-                                  width: 2,
-                                  color: Color(0xFF276918),
-                                  strokeAlign: BorderSide.strokeAlignOutside,
-                                )
-                              : null,
-                          borderRadius: currentSelectedSatietyRating == 5 ? BorderRadius.circular(2) : null,
-                        ),
-                      );
-                    default:
-                      return Container(
-                        width: MediaQuery.of(context).size.width / 6,
-                        height: 16,
-                        margin: currentSelectedSatietyRating == 6 ? EdgeInsets.symmetric(horizontal: 2) : null,
-                        decoration: BoxDecoration(
-                          color: Color(0xFF4DCE20),
-                          border: currentSelectedSatietyRating == 6
-                              ? Border.all(
-                                  width: 2,
-                                  color: Color(0xFF184D12),
-                                  strokeAlign: BorderSide.strokeAlignOutside,
-                                )
-                              : null,
-                          borderRadius: currentSelectedSatietyRating == 6
-                              ? BorderRadius.horizontal(
-                                  left: Radius.circular(2),
-                                  right: Radius.circular(8),
-                                )
-                              : BorderRadius.horizontal(
-                                  right: Radius.circular(8),
-                                ),
-                        ),
-                      );
-                  }
-                },
-                onRatingUpdate: (value) => setState(() {
-                  currentSelectedSatietyRating = value;
-                }),
-              ),
-              SvgPicture.asset(
-                'assets/icons/satiety_emoji_right.svg',
-                height: 32,
-                width: 32,
-              ),
-            ],
-          ),
-        ],
-      ),
-    );
-  }
-
  _arrowDown() {
    return Container(
      padding: const EdgeInsets.only(top: 8, bottom: 16),
@@ -294,7 +137,10 @@ class _DiaryScreenState extends State<DiaryScreen> {
    );
  }

-  _meals(DiaryDayModel diaryDay) {
+  _meals(
+    DiaryDayModel diaryDay,
+    double currentSelectedSatietyRating,
+  ) {
    return Material(
      borderRadius: BorderRadius.circular(20),
      color: Colors.white,
@@ -353,7 +199,9 @@ class _DiaryScreenState extends State<DiaryScreen> {
                diaryDay.meals[currentSelectedMealNumber - 1].photos,
                diaryDay,
              ),
-            _satietyRating(),
+            SatietyRatingWidget(
+              currentSelectedSatietyRating: currentSelectedSatietyRating,
+            ),
          ],
        ),
      ),
--- a/lib/features/diary/presentation/widgets/satiety_rating_widget.dart
+++ b/lib/features/diary/presentation/widgets/satiety_rating_widget.dart
@@ -0,0 +1,178 @@
+import 'package:eatvio_app/features/diary/presentation/bloc/diary_cubit.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_rating_bar/flutter_rating_bar.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+class SatietyRatingWidget extends StatefulWidget {
+  final double currentSelectedSatietyRating;
+
+  const SatietyRatingWidget({
+    super.key,
+    required this.currentSelectedSatietyRating,
+  });
+
+  @override
+  State<SatietyRatingWidget> createState() => _SatietyRatingWidgetState();
+}
+
+class _SatietyRatingWidgetState extends State<SatietyRatingWidget> {
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(top: 24),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Text(
+            'Ваша сытость после приёма пищи',
+            style: TextStyle(
+              fontSize: 16,
+            ),
+          ),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              SvgPicture.asset(
+                'assets/icons/satiety_emoji_left.svg',
+                height: 32,
+                width: 32,
+              ),
+              RatingBar.builder(
+                initialRating: 3,
+                itemCount: 6,
+                itemSize: MediaQuery.of(context).size.width / 6 - (124 / 6),
+                itemBuilder: (context, index) {
+                  switch (index) {
+                    case 0:
+                      return Container(
+                        width: MediaQuery.of(context).size.width / 6,
+                        height: 16,
+                        margin: widget.currentSelectedSatietyRating == 1 ? EdgeInsets.symmetric(horizontal: 2) : null,
+                        decoration: BoxDecoration(
+                          color: Color(0xFFC82222),
+                          border: widget.currentSelectedSatietyRating == 1
+                              ? Border.all(
+                                  width: 2,
+                                  color: Color(0xFFAA3333),
+                                  strokeAlign: BorderSide.strokeAlignOutside,
+                                )
+                              : null,
+                          borderRadius: widget.currentSelectedSatietyRating == 1
+                              ? BorderRadius.horizontal(
+                                  left: Radius.circular(8),
+                                  right: Radius.circular(2),
+                                )
+                              : BorderRadius.horizontal(
+                                  left: Radius.circular(8),
+                                ),
+                        ),
+                      );
+                    case 1:
+                      return Container(
+                        width: MediaQuery.of(context).size.width / 6,
+                        height: 16,
+                        margin: widget.currentSelectedSatietyRating == 2 ? EdgeInsets.symmetric(horizontal: 2) : null,
+                        decoration: BoxDecoration(
+                          color: Color(0xFFFF3E3E),
+                          border: widget.currentSelectedSatietyRating == 2
+                              ? Border.all(
+                                  width: 2,
+                                  color: Color(0xFF550000),
+                                  strokeAlign: BorderSide.strokeAlignOutside,
+                                )
+                              : null,
+                          borderRadius: widget.currentSelectedSatietyRating == 2 ? BorderRadius.circular(2) : null,
+                        ),
+                      );
+                    case 2:
+                      return Container(
+                        width: MediaQuery.of(context).size.width / 6,
+                        height: 16,
+                        margin: widget.currentSelectedSatietyRating == 3 ? EdgeInsets.symmetric(horizontal: 2) : null,
+                        decoration: BoxDecoration(
+                          color: Color(0xFFF8C926),
+                          border: widget.currentSelectedSatietyRating == 3
+                              ? Border.all(
+                                  width: 2,
+                                  color: Color(0xFF8C5D00),
+                                  strokeAlign: BorderSide.strokeAlignOutside,
+                                )
+                              : null,
+                          borderRadius: widget.currentSelectedSatietyRating == 3 ? BorderRadius.circular(2) : null,
+                        ),
+                      );
+                    case 3:
+                      return Container(
+                        width: MediaQuery.of(context).size.width / 6,
+                        height: 16,
+                        margin: widget.currentSelectedSatietyRating == 4 ? EdgeInsets.symmetric(horizontal: 2) : null,
+                        decoration: BoxDecoration(
+                          color: Color(0xFFFFF3BF),
+                          border: widget.currentSelectedSatietyRating == 4
+                              ? Border.all(
+                                  width: 2,
+                                  color: Color(0xFFB5911B),
+                                  strokeAlign: BorderSide.strokeAlignOutside,
+                                )
+                              : null,
+                          borderRadius: widget.currentSelectedSatietyRating == 4 ? BorderRadius.circular(2) : null,
+                        ),
+                      );
+                    case 4:
+                      return Container(
+                        width: MediaQuery.of(context).size.width / 6,
+                        height: 16,
+                        margin: widget.currentSelectedSatietyRating == 5 ? EdgeInsets.symmetric(horizontal: 2) : null,
+                        decoration: BoxDecoration(
+                          color: Color(0xFF62E833),
+                          border: widget.currentSelectedSatietyRating == 5
+                              ? Border.all(
+                                  width: 2,
+                                  color: Color(0xFF276918),
+                                  strokeAlign: BorderSide.strokeAlignOutside,
+                                )
+                              : null,
+                          borderRadius: widget.currentSelectedSatietyRating == 5 ? BorderRadius.circular(2) : null,
+                        ),
+                      );
+                    default:
+                      return Container(
+                        width: MediaQuery.of(context).size.width / 6,
+                        height: 16,
+                        margin: widget.currentSelectedSatietyRating == 6 ? EdgeInsets.symmetric(horizontal: 2) : null,
+                        decoration: BoxDecoration(
+                          color: Color(0xFF4DCE20),
+                          border: widget.currentSelectedSatietyRating == 6
+                              ? Border.all(
+                                  width: 2,
+                                  color: Color(0xFF184D12),
+                                  strokeAlign: BorderSide.strokeAlignOutside,
+                                )
+                              : null,
+                          borderRadius: widget.currentSelectedSatietyRating == 6
+                              ? BorderRadius.horizontal(
+                                  left: Radius.circular(2),
+                                  right: Radius.circular(8),
+                                )
+                              : BorderRadius.horizontal(
+                                  right: Radius.circular(8),
+                                ),
+                        ),
+                      );
+                  }
+                },
+                onRatingUpdate: (value) => context.read<DiaryCubit>().updateCurrentSelectedSatietyRating(value),
+              ),
+              SvgPicture.asset(
+                'assets/icons/satiety_emoji_right.svg',
+                height: 32,
+                width: 32,
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}