Sync rendering of KnowledgePanels with the latest API changes.

packages/smooth_app/lib/cards/product_cards/knowledge_panels/knowledge_panel_card.dart

@@ -16,9 +16,10 @@ class KnowledgePanelCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    // If [expanded] = true, renders all panel elements, otherwise just renders panel summary.
+    // If [expanded] = true, render all panel elements (including summary), otherwise just renders panel summary.
     if (panel.expanded ?? false) {
       final List<Widget> elementWidgets = <Widget>[];
+      elementWidgets.add(KnowledgePanelSummaryCard(panel));
       for (final KnowledgePanelElement element in panel.elements!) {
         elementWidgets.add(
           KnowledgePanelElementCard(

packages/smooth_app/lib/cards/product_cards/knowledge_panels/knowledge_panel_group_card.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:openfoodfacts/model/KnowledgePanelElement.dart';
 import 'package:openfoodfacts/model/KnowledgePanels.dart';
-import 'package:smooth_app/cards/product_cards/knowledge_panels/knowledge_panel_summary_card.dart';
+import 'package:smooth_app/cards/product_cards/knowledge_panels/knowledge_panel_card.dart';
 import 'package:smooth_ui_library/util/ui_helpers.dart';
 
 class KnowledgePanelGroupCard extends StatelessWidget {
@@ -26,7 +26,10 @@ class KnowledgePanelGroupCard extends StatelessWidget {
             style: themeData.textTheme.subtitle2!.apply(color: Colors.grey),
           ),
           for (String panelId in groupElement.panelIds)
-            KnowledgePanelSummaryCard(allPanels.panelIdToPanelMap[panelId]!)
+            KnowledgePanelCard(
+              panel: allPanels.panelIdToPanelMap[panelId]!,
+              allPanels: allPanels,
+            )
         ],
       ),
     );

packages/smooth_app/lib/cards/product_cards/knowledge_panels/knowledge_panel_summary_card.dart

@@ -4,23 +4,33 @@ import 'package:smooth_app/cards/data_cards/score_card.dart';
 import 'package:smooth_app/cards/product_cards/knowledge_panels/knowledge_panel_title_card.dart';
 import 'package:smooth_app/helpers/score_card_helper.dart';
 
+import 'package:smooth_ui_library/util/ui_helpers.dart';
+
 class KnowledgePanelSummaryCard extends StatelessWidget {
   const KnowledgePanelSummaryCard(this.knowledgePanel);
 
   final KnowledgePanel knowledgePanel;
 
   @override
   Widget build(BuildContext context) {
-    if (knowledgePanel.type == KnowledgePanelType.SCORE) {
-      return ScoreCard(
-        iconUrl: knowledgePanel.titleElement.iconUrl!,
-        description: knowledgePanel.titleElement.title,
-        cardEvaluation: getCardEvaluationFromKnowledgePanel(knowledgePanel),
-      );
+    if (knowledgePanel.titleElement == null) {
+      return EMPTY_WIDGET;
+    }
+    switch (knowledgePanel.titleElement!.type) {
+      case TitleElementType.GRADE:
+        return ScoreCard(
+          iconUrl: knowledgePanel.titleElement!.iconUrl!,
+          description: knowledgePanel.titleElement!.title,
+          cardEvaluation: getCardEvaluationFromKnowledgePanelTitleElement(
+            knowledgePanel.titleElement!,
+          ),
+        );
+      case null:
+      case TitleElementType.UNKNOWN:
+        return KnowledgePanelTitleCard(
+          knowledgePanelTitleElement: knowledgePanel.titleElement!,
+          evaluation: knowledgePanel.evaluation,
+        );
     }
-    return KnowledgePanelTitleCard(
-      knowledgePanelTitleElement: knowledgePanel.titleElement,
-      evaluation: knowledgePanel.evaluation,
-    );
   }
 }

packages/smooth_app/lib/cards/product_cards/knowledge_panels/knowledge_panel_table_card.dart

@@ -14,20 +14,35 @@ class KnowledgePanelTableCard extends StatelessWidget {
   Widget build(BuildContext context) {
     final List<List<Widget>> columnCells = <List<Widget>>[];
     for (final KnowledgePanelTableColumn column in tableElement.columns) {
-      if (column.type == 'text') {
-        columnCells.add(
-          <Widget>[
-            _buildTableCell(
-              context: context,
-              text: column.text,
-              textColor: Colors.grey,
-              isFirstCell: column == tableElement.columns.first,
-              isHeader: true,
-            )
-          ],
-        );
-      } else {
-        throw UnsupportedError('Unsupported columnType: ${column.type}');
+      switch (column.type) {
+        case null:
+        case KnowledgePanelColumnType.TEXT:
+          columnCells.add(
+            <Widget>[
+              _buildTableCell(
+                context: context,
+                text: column.text,
+                textColor: Colors.grey,
+                isFirstCell: column == tableElement.columns.first,
+                isHeader: true,
+              )
+            ],
+          );
+          break;
+        case KnowledgePanelColumnType.PERCENT:
+          // TODO(jasmeet): Implement percent knowledge panels.
+          columnCells.add(
+            <Widget>[
+              _buildTableCell(
+                context: context,
+                text: column.text,
+                textColor: Colors.grey,
+                isFirstCell: column == tableElement.columns.first,
+                isHeader: true,
+              )
+            ],
+          );
+          break;
       }
     }
     for (final KnowledgePanelTableRowElement row in tableElement.rows) {

packages/smooth_app/lib/cards/product_cards/knowledge_panels/knowledge_panel_title_card.dart

@@ -70,7 +70,9 @@ class KnowledgePanelTitleCard extends StatelessWidget {
       case Evaluation.BAD:
         return Colors.red;
       case Evaluation.NEUTRAL:
-        return Colors.yellow;
+        return Colors.grey;
+      case Evaluation.AVERAGE:
+        return Colors.orange;
       case Evaluation.GOOD:
         return Colors.green;
       case Evaluation.UNKNOWN:

packages/smooth_app/lib/cards/product_cards/knowledge_panels/knowledge_panels_builder.dart

@@ -8,20 +8,18 @@ class KnowledgePanelsBuilder {
   const KnowledgePanelsBuilder();
 
   List<Widget> build(KnowledgePanels knowledgePanels) {
-    final List<KnowledgePanel> rootKnowledgePanels = <KnowledgePanel>[];
-    for (final KnowledgePanel knowledgePanel
-        in knowledgePanels.panelIdToPanelMap.values) {
-      if (knowledgePanel.parentPanelId == 'root') {
-        rootKnowledgePanels.add(knowledgePanel);
-      }
-    }
-
     final List<Widget> rootPanelWidgets = <Widget>[];
-    for (final KnowledgePanel rootKnowledgePanel in rootKnowledgePanels) {
+    for (final KnowledgePanelElement panelElement
+        in knowledgePanels.panelIdToPanelMap['root']!.elements!) {
+      if (panelElement.elementType != KnowledgePanelElementType.PANEL) {
+        continue;
+      }
+      final KnowledgePanel rootPanel = knowledgePanels
+          .panelIdToPanelMap[panelElement.panelElement!.panelId]!;
       // [knowledgePanelElementWidgets] are a set of widgets inside the root panel.
       final List<Widget> knowledgePanelElementWidgets = <Widget>[];
       for (final KnowledgePanelElement knowledgePanelElement
-          in rootKnowledgePanel.elements ?? <KnowledgePanelElement>[]) {
+          in rootPanel.elements ?? <KnowledgePanelElement>[]) {
         knowledgePanelElementWidgets.add(KnowledgePanelElementCard(
           knowledgePanelElement: knowledgePanelElement,
           allPanels: knowledgePanels,

packages/smooth_app/lib/helpers/score_card_helper.dart

@@ -60,11 +60,9 @@ CardEvaluation getCardEvaluationFromAttribute(Attribute attribute) {
   }
 }
 
-CardEvaluation getCardEvaluationFromKnowledgePanel(KnowledgePanel panel) {
-  if (panel.grade == null) {
-    return CardEvaluation.UNKNOWN;
-  }
-  switch (panel.grade!) {
+CardEvaluation getCardEvaluationFromKnowledgePanelTitleElement(
+    TitleElement titleElement) {
+  switch (titleElement.grade) {
     case Grade.E:
       return CardEvaluation.VERY_BAD;
     case Grade.D:
@@ -75,6 +73,7 @@ CardEvaluation getCardEvaluationFromKnowledgePanel(KnowledgePanel panel) {
       return CardEvaluation.GOOD;
     case Grade.A:
       return CardEvaluation.VERY_GOOD;
+    case null:
     case Grade.UNKNOWN:
       return CardEvaluation.UNKNOWN;
   }

packages/smooth_app/pubspec.yaml

@@ -24,10 +24,10 @@ dependencies:
   image_picker: ^0.8.4+4
   matomo: ^1.1.0
   modal_bottom_sheet: ^2.0.0
-  openfoodfacts: 1.3.8
+  openfoodfacts: ^1.3.9
   # Uncomment those lines if you want to use a local version of the openfoodfacts package
-  #  openfoodfacts:
-  #    path: ../../../openfoodfacts-dart
+#  openfoodfacts:
+#    path: ../../../openfoodfacts-dart
   package_info_plus: ^1.3.0
   photo_view: ^0.13.0
   provider: ^6.0.1

packages/smooth_ui_library/lib/util/ui_helpers.dart

@@ -33,9 +33,12 @@ class IconWidgetSizer {
 Color? getTextColorFromKnowledgePanelElementEvaluation(Evaluation evaluation) {
   switch (evaluation) {
     case Evaluation.UNKNOWN:
-    case Evaluation.NEUTRAL:
-      // Use default color for neutral and unknown.
+      // Use default color for unknown.
       return null;
+    case Evaluation.AVERAGE:
+      return Colors.grey;
+    case Evaluation.NEUTRAL:
+      return Colors.orange;
     case Evaluation.BAD:
       return Colors.red;
     case Evaluation.GOOD:

packages/smooth_ui_library/pubspec.yaml

@@ -10,10 +10,10 @@ dependencies:
   flutter:
     sdk: flutter
   flutter_svg: ^0.23.0+1
-  openfoodfacts: 1.3.8
+  openfoodfacts: ^1.3.9
   # Uncomment those lines if you want to use a local version of the openfoodfacts package
-  #  openfoodfacts:
-  #    path: ../../../openfoodfacts-dart
+#  openfoodfacts:
+#    path: ../../../openfoodfacts-dart
   percent_indicator: ^3.4.0
 
 dev_dependencies: