feat: Indicator color for Health and Environment tabs (#6715)

* Indicator color for Health and Environment tabs

* One missing file

Author: g123k

packages/smooth_app/lib/knowledge_panel/knowledge_panels_builder.dart

@@ -34,7 +34,12 @@ class KnowledgePanelsBuilder {
         : getKnowledgePanel(product, panelId);
     final List<Widget> children = <Widget>[];
     if (rootPanel != null) {
-      children.add(KnowledgePanelTitle(title: rootPanel.titleElement!.title));
+      children.add(
+        KnowledgePanelTitle(
+          title: rootPanel.titleElement!.title,
+          topics: rootPanel.topics,
+        ),
+      );
       if (rootPanel.elements != null) {
         for (int i = 0; i < rootPanel.elements!.length; i++) {
           final KnowledgePanelElement element = rootPanel.elements![i];
@@ -331,9 +336,10 @@ class KnowledgePanelsBuilder {
 }
 
 class KnowledgePanelTitle extends StatelessWidget {
-  const KnowledgePanelTitle({required this.title, super.key});
+  const KnowledgePanelTitle({required this.title, this.topics, super.key});
 
   final String title;
+  final List<String>? topics;
 
   @override
   Widget build(BuildContext context) {

packages/smooth_app/lib/pages/product/product_page/header/product_page_tabs.dart

@@ -1,13 +1,17 @@
 import 'package:flutter/material.dart';
 import 'package:openfoodfacts/openfoodfacts.dart';
 import 'package:provider/provider.dart';
+import 'package:smooth_app/cards/data_cards/score_card.dart';
 import 'package:smooth_app/data_models/preferences/user_preferences.dart';
+import 'package:smooth_app/helpers/product_cards_helper.dart';
+import 'package:smooth_app/helpers/score_card_helper.dart';
 import 'package:smooth_app/knowledge_panel/knowledge_panels_builder.dart';
 import 'package:smooth_app/l10n/app_localizations.dart';
 import 'package:smooth_app/pages/folksonomy/folksonomy_card.dart';
 import 'package:smooth_app/pages/preferences/user_preferences_dev_mode.dart';
 import 'package:smooth_app/pages/prices/prices_card.dart';
 import 'package:smooth_app/pages/product/website_card.dart';
+import 'package:smooth_app/widgets/smooth_circle.dart';
 import 'package:smooth_app/widgets/smooth_tabbar.dart';
 
 enum ProductPageHarcodedTabs {
@@ -27,11 +31,13 @@ class ProductPageTab {
     required this.id,
     required this.labelBuilder,
     required this.builder,
+    this.prefix,
   });
 
   final String id;
   final String Function(BuildContext) labelBuilder;
   final Widget Function(BuildContext, Product) builder;
+  final Widget? prefix;
 }
 
 class ProductPageTabBar extends StatelessWidget {
@@ -56,6 +62,9 @@ class ProductPageTabBar extends StatelessWidget {
                   );
                 })
                 .toList(growable: false),
+            leadingItems: tabs
+                .map((ProductPageTab tab) => tab.prefix)
+                .toList(growable: false),
             onTabChanged: (_) {},
           ),
         ),
@@ -98,6 +107,7 @@ class ProductPageTabBar extends StatelessWidget {
         ProductPageTab(
           id: id,
           labelBuilder: (_) => knowledgePanelTitle.title,
+          prefix: _extractPrefix(product, knowledgePanelTitle),
           builder: (_, _) => ListView.builder(
             padding: EdgeInsetsDirectional.zero,
             itemCount: children.length - 1,
@@ -189,6 +199,32 @@ class ProductPageTabBar extends StatelessWidget {
 
     return tabs;
   }
+
+  static Widget? _extractPrefix(Product product, KnowledgePanelTitle title) {
+    final String? attribute = switch (title.topics?.firstOrNull) {
+      'health' => Attribute.ATTRIBUTE_NUTRISCORE,
+      'environment' => Attribute.ATTRIBUTE_ECOSCORE,
+      _ => null,
+    };
+
+    if (attribute == null) {
+      return null;
+    }
+
+    final List<Attribute> attributes = getPopulatedAttributes(product, <String>[
+      attribute,
+    ], <String>[]);
+
+    if (attributes.isEmpty) {
+      return null;
+    }
+
+    final CardEvaluation eval = getCardEvaluationFromAttribute(
+      attributes.first,
+    );
+
+    return SmoothCircle.indicator(color: eval.textColor, size: 15.0);
+  }
 }
 
 class _TabBarDelegate extends SliverPersistentHeaderDelegate {

packages/smooth_app/lib/themes/smooth_theme_colors.dart

@@ -9,6 +9,7 @@ class SmoothColorsThemeExtension
     required this.primarySemiDark,
     required this.primaryTone,
     required this.primaryNormal,
+    required this.primaryAccent,
     required this.primaryMedium,
     required this.primaryLight,
     required this.secondaryNormal,
@@ -34,6 +35,7 @@ class SmoothColorsThemeExtension
       primaryDark = const Color(0xFF483527),
       primarySemiDark = const Color(0xFF52443D),
       primaryTone = const Color(0xFF81756C),
+      primaryAccent = const Color(0xFF875737),
       primaryNormal = const Color(0xFFA08D84),
       primaryMedium = const Color(0xFFEDE0DB),
       primaryLight = const Color(0xFFF6F3F0),
@@ -70,6 +72,7 @@ class SmoothColorsThemeExtension
 
   // Macchiato
   final Color primaryNormal;
+  final Color primaryAccent;
 
   // Cappuccino
   final Color primaryMedium;
@@ -103,6 +106,7 @@ class SmoothColorsThemeExtension
     Color? primarySemiDark,
     Color? primaryTone,
     Color? primaryNormal,
+    Color? primaryAccent,
     Color? primaryMedium,
     Color? primaryLight,
     Color? secondaryNormal,
@@ -128,6 +132,7 @@ class SmoothColorsThemeExtension
       primarySemiDark: primarySemiDark ?? this.primarySemiDark,
       primaryTone: primaryTone ?? this.primaryTone,
       primaryNormal: primaryNormal ?? this.primaryNormal,
+      primaryAccent: primaryAccent ?? this.primaryAccent,
       primaryMedium: primaryMedium ?? this.primaryMedium,
       primaryLight: primaryLight ?? this.primaryLight,
       secondaryNormal: secondaryNormal ?? this.secondaryNormal,
@@ -168,6 +173,7 @@ class SmoothColorsThemeExtension
       primarySemiDark: Color.lerp(primarySemiDark, other.primarySemiDark, t)!,
       primaryTone: Color.lerp(primaryTone, other.primaryTone, t)!,
       primaryNormal: Color.lerp(primaryNormal, other.primaryNormal, t)!,
+      primaryAccent: Color.lerp(primaryAccent, other.primaryAccent, t)!,
       primaryMedium: Color.lerp(primaryMedium, other.primaryMedium, t)!,
       primaryLight: Color.lerp(primaryLight, other.primaryLight, t)!,
       secondaryNormal: Color.lerp(secondaryNormal, other.secondaryNormal, t)!,

packages/smooth_app/lib/widgets/smooth_circle.dart

@@ -9,6 +9,13 @@ class SmoothCircle extends StatelessWidget {
     super.key,
   });
 
+  SmoothCircle.indicator({
+    required this.color,
+    required double size,
+    this.padding = EdgeInsetsDirectional.zero,
+  }) : assert(size > 0.0),
+       child = SizedBox.square(dimension: size);
+
   final EdgeInsetsGeometry padding;
   final Color color;
   final Widget child;