https://github.com/hiborn4/resizor_responsive_flutter_ui
This Project showcases the implementation of responsive UI components in Flutter, demonstrating the adaptability of widgets based on screen dimensions.
https://github.com/hiborn4/resizor_responsive_flutter_ui
flutter flutter-app flutter-ui responsive-design responsive-grid responsive-layout
Last synced: about 2 months ago
JSON representation
This Project showcases the implementation of responsive UI components in Flutter, demonstrating the adaptability of widgets based on screen dimensions.
- Host: GitHub
- URL: https://github.com/hiborn4/resizor_responsive_flutter_ui
- Owner: HiBorn4
- Created: 2023-10-24T12:10:01.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-02T21:09:54.000Z (over 2 years ago)
- Last Synced: 2023-11-03T21:25:25.639Z (over 2 years ago)
- Topics: flutter, flutter-app, flutter-ui, responsive-design, responsive-grid, responsive-layout
- Language: Dart
- Homepage:
- Size: 194 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
---
# Flutter Responsive Design
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.
## Screenshots
## Task Description
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.
## Design Details
- The white area represents the screen (mobile, web browser, iPad, etc.).
- The red area represents the card background.
---