Implement Image Display for Dish Recipes and Update Recipe Book UI to Grid View

[pandaxin8]

Overview

The current implementation of the dish selection popup and the recipe book UI uses a simple list to display available dishes. To enhance user engagement and the overall aesthetic of the game, we need to add images for each dish and modify the UI to use a grid view layout.

Current Behavior

• The dish selection popup displays dishes in a simple list without images.
• The recipe book UI also uses a list view which is functional but not visually engaging.

Desired Behavior

• Each available dish should have a corresponding image displayed alongside its name.
• The recipe book UI should be updated to a grid view layout to make it more visually appealing and user-friendly.

Steps to Reproduce

1. Open the game and navigate to the dish selection or recipe book section.
2. Observe the list of dishes without images.

Expected Outcome

• Each dish in the dish selection popup should be represented by a card that includes the dish's image, name, and a brief description.
• The recipe book UI should be a grid of cards for a more modern and engaging user interface.

Possible Implementation

• Update the Dish class to include an imagePath field.
• Modify the _showAvailableDishes method to use a GridView.builder and create a Card widget for each dish that includes an Image widget sourced from the imagePath.
• Ensure that all dish images are correctly added to the assets directory and referenced in the pubspec.yaml file.

[pandaxin8]

Before:

After: