myaasiinh / Mobile-Programming-2024-2025

Repository untuk mata kuliah mobile programming dan praktikum bertanya materi dan fixing bug
0 stars 0 forks source link

Nicho Aditya Yudhistira - Real Estate - 32602200112 - Kelas Reguler #112

Open Niotya opened 2 weeks ago

Niotya commented 2 weeks ago

https://dribbble.com/shots/25131414-Real-Estate-Mobile-App-Exploration

original-c3047c1f307a2e6928305f9ac833c075

lib:

core
│
├── components
│   ├── Typography.dart 
│   ├── ButtonComponent.dart 
│   ├── ProgressBarComponent.dart 
│   ├── AvatarComponent.dart 
│   ├── NetworkImageLoader.dart 
│
├── config
│   └── main_app.dart
│
└── utils
    ├── route_utils.dart
    └── constants
        ├── string_constants.dart
        ├── color_constants.dart
        └── image_constants.dart

data
│
└── home
    ├── modelresponses
    │   └── HomeResponse.dart
    └── dummy
        └── DummyHomeData.dart

features
│
├── onboarding
│   ├── screen
│   │   └── WelcomeScreen.dart
│   ├── widgets
│   │   ├── WelcomeIllustrationWidget.dart
│   │   └── GetStartedButtonWidget.dart
│   └── controller
│       └── WelcomeController.dart
│
└── home_interface
    ├── screen
    │   └── HomeScreen.dart
    ├── widgets
    │   ├── FeatureCardWidget.dart       # Widget untuk menampilkan fitur (Lighting, Electricity, Gas)
    │   ├── CategoryCardWidget.dart      # Widget untuk menampilkan kategori (Hut, Palace)
    │   └── VoucherBannerWidget.dart     # Widget untuk banner voucher
    └── controller
        └── HomeController.dart

main.dart
Buatlah aplikasi mobile dengan Flutter yang memiliki struktur file sebagai berikut. Aplikasi ini harus memiliki tampilan layar onboarding dan layar utama seperti yang terlihat pada contoh gambar:

1. **Folder `core`:** 
   - **components:**
     - `Typography.dart`: Komponen untuk mengatur gaya teks secara konsisten di seluruh aplikasi.
     - `ButtonComponent.dart`: Komponen tombol umum yang digunakan di berbagai layar, termasuk tombol "Skip" dan "Continue" pada layar onboarding.
     - `ProgressBarComponent.dart`: Komponen untuk menampilkan progress bar saat ada proses loading.
     - `AvatarComponent.dart`: Komponen avatar untuk menampilkan profil pengguna di layar utama.
     - `NetworkImageLoader.dart`: Komponen untuk memuat gambar dari URL, seperti ilustrasi rumah di layar onboarding atau ikon di layar utama.
   - **config:**
     - `main_app.dart`: File konfigurasi utama untuk pengaturan aplikasi, termasuk tema dan rute navigasi utama.
   - **utils:**
     - **route_utils.dart**: Pengaturan navigasi antar layar.
     - **constants:**
       - `string_constants.dart`: Berisi semua teks statis yang digunakan di aplikasi, seperti "Perfect Choice for Your Future Living" di layar onboarding.
       - `color_constants.dart`: Warna-warna konsisten yang digunakan di aplikasi.
       - `image_constants.dart`: Rujukan ke gambar-gambar statis atau ikon yang digunakan di aplikasi.

2. **Folder `data`:**
   - **home:**
     - **modelresponses:**
       - `HomeResponse.dart`: Model data untuk menampung respons data layar home, seperti informasi tentang fitur dan kategori properti.
     - **dummy:**
       - `DummyHomeData.dart`: Data dummy yang digunakan untuk menampilkan fitur dan kategori properti di layar utama.

3. **Folder `features`:**
   - **onboarding:**
     - **screen:**
       - `WelcomeScreen.dart`: Layar onboarding awal yang memperkenalkan aplikasi kepada pengguna dengan ilustrasi dan tombol untuk melanjutkan.
     - **widgets:**
       - `WelcomeIllustrationWidget.dart`: Widget untuk menampilkan ilustrasi rumah di layar onboarding.
       - `GetStartedButtonWidget.dart`: Tombol untuk memulai aplikasi atau melanjutkan ke layar utama.
     - **controller:**
       - `WelcomeController.dart`: Kontroler yang mengatur logika onboarding, termasuk perpindahan layar setelah tombol ditekan.
   - **home_interface:**
     - **screen:**
       - `HomeScreen.dart`: Layar utama yang menampilkan fitur-fitur seperti "Lighting", "Electricity", dan "Gas", serta kategori properti seperti "Adam Hut" dan "ST Palace."
     - **widgets:**
       - `FeatureCardWidget.dart`: Widget untuk menampilkan fitur individual (seperti Lighting, Electricity, Gas) di layar utama.
       - `CategoryCardWidget.dart`: Widget untuk menampilkan kategori properti (seperti Hut, Palace) dengan gambar dan harga.
       - `VoucherBannerWidget.dart`: Widget untuk menampilkan banner promosi seperti "Get voucher, be a member."
     - **controller:**
       - `HomeController.dart`: Kontroler untuk mengelola data dan logika di layar utama, seperti memuat data dummy dari `DummyHomeData.dart`.

4. **`main.dart`:** 
   - File utama yang menjalankan aplikasi dengan `runApp` dan mengatur navigasi antar layar.

**Spesifikasi tambahan:**
- **Onboarding Screen**: Layar onboarding menyambut pengguna dengan ilustrasi rumah dan teks "Perfect Choice for Your Future Living" serta tombol "Skip" dan "Continue."
- **Home Screen**: Layar utama menampilkan:
   - **Voucher Banner** di bagian atas untuk promosi atau keanggotaan.
   - **Fitur-fitur** seperti "Lighting," "Electricity," dan "Gas" yang dapat dipilih.
   - **Kategori Properti** seperti "Adam Hut" dan "ST Palace" yang dilengkapi dengan gambar dan harga.
- **Data Dummy**: Gunakan data dari `DummyHomeData.dart` untuk mengisi bagian fitur dan kategori properti jika tidak ada data asli.

Pastikan aplikasi ini mengikuti desain antarmuka dan struktur file di atas dengan ketepatan visual sesuai contoh gambar.