Folio Mobile

Aplikasi CMS Mobile menggunakan Flutter dengan arsitektur MVVM yang terkoneksi dengan Laravel API.

📱 Fitur

• ✅ List Posts dengan filter status (published/draft)
• ✅ List Categories dengan grid view
• ✅ Detail Post lengkap
• ✅ Filter Posts by Category
• ✅ Pull to refresh
• ✅ Infinite scroll / Load more
• ✅ State management dengan Provider
• ✅ Routing system dengan named routes
• ✅ Reusable widgets & animations
• ✅ AutomaticKeepAlive untuk tab persistence

🏗️ Struktur Folder

lib/
├── main.dart                    # Entry point
├── core/                        # Core functionality
│   ├── config/                  # API configuration
│   └── routes/                  # Routing & navigation
├── data/                        # Data layer
│   ├── models/                  # Data models (Category, Post, User, Pagination)
│   ├── services/                # API services
│   └── viewmodels/              # State management (Business logic)
└── ui/                          # UI layer
    ├── pages/                   # Screens/Pages
    ├── widgets/                 # Reusable components
    └── animations/              # Animation widgets

🚀 Getting Started

Prerequisites

• Flutter SDK 3.8.1 atau lebih baru
• Dart 3.0+
• Laravel API backend (endpoint: /api/v1)

Installation

1. Clone repository

git clone <repository-url>
cd folio_mobile

2. Install dependencies

flutter pub get

3. Konfigurasi API URL

Edit file lib/core/config/api_config.dart:

class ApiConfig {
  // Ganti dengan IP address komputer/server Anda
  static const String baseUrl = 'http://192.168.0.3:8000/api/v1';
  static const String healthUrl = 'http://192.168.0.3:8000/api/health';
}

Tips mengatur URL:

• Android Emulator: Gunakan IP komputer Anda (cek dengan ipconfig di Windows)
• iOS Simulator: Gunakan IP komputer Anda
• Real Device: Pastikan device dan komputer di WiFi yang sama, gunakan IP komputer

4. Run aplikasi

flutter run

📦 Dependencies

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0          # HTTP client untuk API calls
  provider: ^6.1.1       # State management
  intl: ^0.19.0         # Date formatting

🎨 Arsitektur

Aplikasi ini menggunakan MVVM (Model-View-ViewModel) pattern:

• Model (data/models/): Data structures & serialization
• View (ui/pages/, ui/widgets/): UI components
• ViewModel (data/viewmodels/): Business logic & state management
• Service (data/services/): Data source (API calls)

State Management

Menggunakan Provider dengan ChangeNotifier:

• PostViewModel - Mengelola state posts
• CategoryViewModel - Mengelola state categories

Routing

Named routes dengan helper methods di AppRoutes:

AppRoutes.navigateToPostDetail(context, post);
AppRoutes.navigateToCategoryPosts(context, category);

📱 Halaman

1. HomePage - Bottom navigation dengan 2 tab (Posts & Categories)
2. PostsPage - List posts dengan filter status dan infinite scroll
3. CategoriesPage - Grid categories dengan post count
4. CategoryPostsPage - Posts filtered by category
5. PostDetailPage - Detail lengkap post dengan meta information

🔧 Development

Import Patterns

// From main.dart
import 'data/viewmodels/post_viewmodel.dart';
import 'core/routes/app_routes.dart';

// From pages (ui/pages/)
import '../../data/viewmodels/post_viewmodel.dart';
import '../widgets/post_list_item.dart';

// From widgets (ui/widgets/)
import '../../data/models/post.dart';

Menambah Halaman Baru

1. Buat file di lib/ui/pages/
2. Tambahkan route di lib/core/routes/app_routes.dart
3. Tambahkan navigation helper method

Menambah Widget Reusable

1. Buat file di lib/ui/widgets/
2. Import di halaman yang membutuhkan

🧪 Testing

# Run tests
flutter test

# Run with coverage
flutter test --coverage

📦 Build

# Build APK (Android)
flutter build apk --release

# Build App Bundle (Android)
flutter build appbundle --release

# Build IPA (iOS)
flutter build ipa --release

🐛 Troubleshooting

API tidak bisa diakses dari device

• Pastikan device dan komputer di network yang sama
• Cek IP address dengan ipconfig (Windows) atau ifconfig (Mac/Linux)
• Pastikan firewall tidak memblok koneksi
• Test API dengan browser di device: http://IP_ADDRESS:8000/api/health

Categories refresh terus saat pindah tab

• Sudah diatasi dengan AutomaticKeepAliveClientMixin
• Pastikan super.build(context) ada di build method
• Gunakan conditional loading: if (categories.isEmpty && !isLoading)

Overflow errors

• Gunakan Expanded atau Flexible untuk flexible sizing
• Wrap text dengan Flexible dan set overflow: TextOverflow.ellipsis
• Set mainAxisSize: MainAxisSize.min untuk Column/Row dalam constraint

📄 License

This project is licensed under the MIT License.

👨‍💻 Author

Your Name / Team Name