From 46a62e252bc839fafc82a824445e4a3a3576a552 Mon Sep 17 00:00:00 2001
From: xster <xiao@xster.net>
Date: Wed, 10 Apr 2019 01:23:57 -0700
Subject: [PATCH] Make in-season and not-in-season cards different (#67)

---
 veggieseasons/lib/screens/list.dart        | 10 ++++++---
 veggieseasons/lib/styles.dart              |  5 +++++
 veggieseasons/lib/widgets/veggie_card.dart | 26 +++++++++++++++++-----
 3 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/veggieseasons/lib/screens/list.dart b/veggieseasons/lib/screens/list.dart
index 8fda02916..709ac3cb3 100644
--- a/veggieseasons/lib/screens/list.dart
+++ b/veggieseasons/lib/screens/list.dart
@@ -13,7 +13,11 @@ import 'package:veggieseasons/styles.dart';
 import 'package:veggieseasons/widgets/veggie_card.dart';
 
 class ListScreen extends StatelessWidget {
-  List<Widget> _generateVeggieRows(List<Veggie> veggies, Preferences prefs) {
+  List<Widget> _generateVeggieRows(
+    List<Veggie> veggies,
+    Preferences prefs,
+    { bool inSeason = true }
+  ) {
     final cards = List<Widget>();
 
     for (Veggie veggie in veggies) {
@@ -23,7 +27,7 @@ class ListScreen extends StatelessWidget {
             future: prefs.preferredCategories,
             builder: (context, snapshot) {
               final data = snapshot.data ?? Set<VeggieCategory>();
-              return VeggieCard(veggie, data.contains(veggie.category));
+              return VeggieCard(veggie, inSeason, data.contains(veggie.category));
             }),
       ));
     }
@@ -65,7 +69,7 @@ class ListScreen extends StatelessWidget {
           ),
         );
 
-        rows.addAll(_generateVeggieRows(appState.unavailableVeggies, prefs));
+        rows.addAll(_generateVeggieRows(appState.unavailableVeggies, prefs, inSeason: false));
 
         return DecoratedBox(
           decoration: BoxDecoration(color: Color(0xffffffff)),
diff --git a/veggieseasons/lib/styles.dart b/veggieseasons/lib/styles.dart
index e2017f066..83f0084b7 100644
--- a/veggieseasons/lib/styles.dart
+++ b/veggieseasons/lib/styles.dart
@@ -269,4 +269,9 @@ abstract class Styles {
   );
 
   static const servingInfoBorderColor = Color(0xffb0b0b0);
+
+    static const ColorFilter desaturatedColorFilter =
+      // 222222 is a random color that has low color saturation.
+      ColorFilter.mode(Color(0xFF222222), BlendMode.saturation);
+ 
 }
diff --git a/veggieseasons/lib/widgets/veggie_card.dart b/veggieseasons/lib/widgets/veggie_card.dart
index 418eb17c2..5686edd36 100644
--- a/veggieseasons/lib/widgets/veggie_card.dart
+++ b/veggieseasons/lib/widgets/veggie_card.dart
@@ -76,11 +76,15 @@ class _PressableCardState extends State<PressableCard> {
 }
 
 class VeggieCard extends StatelessWidget {
-  VeggieCard(this.veggie, this.isPreferredCategory);
+  VeggieCard(this.veggie, this.isInSeason, this.isPreferredCategory);
 
   /// Veggie to be displayed by the card.
   final Veggie veggie;
 
+  /// If the veggie is in season, it's displayed more prominently and the
+  /// image is fully saturated. Otherwise, it's reduced and de-saturated.
+  final bool isInSeason;
+
   /// Whether [veggie] falls into one of user's preferred [VeggieCategory]s
   final bool isPreferredCategory;
 
@@ -119,10 +123,22 @@ class VeggieCard extends StatelessWidget {
       },
       child: Stack(
         children: [
-          Image.asset(
-            veggie.imageAssetPath,
-            fit: BoxFit.cover,
-            semanticLabel: 'A card background featuring ${veggie.name}',
+          Semantics(
+            label: 'A card background featuring ${veggie.name}',
+            child: Container(
+              height: isInSeason ? 350 : 150,
+              decoration: BoxDecoration(
+                image: DecorationImage(
+                  fit: BoxFit.cover,
+                  colorFilter: isInSeason
+                      ? null
+                      : Styles.desaturatedColorFilter,
+                  image: AssetImage(
+                    veggie.imageAssetPath,
+                  ),
+                ),
+              ),
+            ),
           ),
           Positioned(
             bottom: 0.0,