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 _generateVeggieRows(List veggies, Preferences prefs) { + List _generateVeggieRows( + List veggies, + Preferences prefs, + { bool inSeason = true } + ) { final cards = List(); for (Veggie veggie in veggies) { @@ -23,7 +27,7 @@ class ListScreen extends StatelessWidget { future: prefs.preferredCategories, builder: (context, snapshot) { final data = snapshot.data ?? Set(); - 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 { } 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,