Create a Flutter app with responsive components that adapt their sizes based on the screen dimensions. This project aims to demonstrate your understanding of responsive UI development in Flutter.
Objective is to create two different cards on the same screen with the following characteristics:
Card 1 (Top Card):
- As the screen size grows or shrinks, the width of the card changes to occupy the same proportion of the screen.
- The green area inside the card also grows to maintain the same proportion of the screen.
Card 2 (Bottom Card):
- As the screen size grows or shrinks, the width of the card changes to occupy the same proportion of the screen.
- The green area inside the card also changes its size.
- Despite the changes in the card's size, the grey area within it remains the same size and remains positioned at the top-center of the card.
- The white area represents the screen (mobile, web browser, iPad, etc.).
- The red area represents the card background.