Flutter Super App untuk Portal & Learning Management System
Portfolio

Flutter Super App untuk Portal & Learning Management System

07 Mar 2026Khaidir Fahram

Overview

Fahram Mobile App adalah aplikasi mobile berbasis Flutter yang mengintegrasikan dua platform web utama:

  • Portal Fahram – portal publik berisi artikel, galeri, dokumen, dan katalog kursus.

  • Fahram LMS – sistem pembelajaran online untuk kursus, modul pembelajaran, dan ujian.

Aplikasi ini dirancang sebagai all-in-one mobile platform sehingga pengguna dapat mengakses konten publik tanpa login serta mengikuti kursus dan ujian setelah melakukan autentikasi.

Aplikasi ini mengadopsi arsitektur modern Flutter dengan pendekatan Clean Architecture, Riverpod State Management, dan Modular Feature Structure sehingga scalable dan maintainable untuk jangka panjang.


Tujuan Pengembangan

Tujuan utama aplikasi ini adalah:

  • Menggabungkan portal konten dan platform pembelajaran dalam satu aplikasi mobile.

  • Menyediakan pengalaman belajar yang lebih nyaman melalui perangkat mobile.

  • Mendukung akses cepat terhadap artikel, kursus, modul pembelajaran, dan ujian.

  • Meningkatkan engagement pengguna melalui fitur mobile seperti notifikasi, offline caching, dan deep linking.


Teknologi yang Digunakan

Mobile Framework

  • Flutter 3.29+

  • Dart 3.7+

State Management

  • Riverpod

  • Riverpod Generator

  • Freezed

Networking

  • Dio HTTP Client

  • Retrofit API Generator

  • Flutter Secure Storage

UI & Design

  • Flutter Material 3

  • Google Fonts

  • Cached Network Image

  • Flutter HTML Renderer

  • Carousel Slider

  • Shimmer Loading

  • Photo View

Navigation

  • GoRouter (Declarative Routing)

Storage & Cache

  • Hive Local Database

  • Shared Preferences

  • Secure Token Storage

Authentication

  • Email & Password Login

  • Google Sign In

  • Apple Sign In

  • OAuth Login


Arsitektur Aplikasi

Aplikasi menggunakan pendekatan Clean Architecture dengan struktur feature-first.

Struktur ini memisahkan setiap fitur menjadi tiga layer utama:

  • Data Layer
    Berisi API service, data source, dan model.

  • Domain Layer
    Berisi entity dan repository interface.

  • Presentation Layer
    Berisi UI, state management, dan widgets.

Contoh struktur project:

lib/
 ├── core
 │   ├── config
 │   ├── network
 │   ├── router
 │   ├── theme
 │   └── widgets
 │
 ├── features
 │   ├── auth
 │   ├── portal
 │   │   ├── home
 │   │   ├── articles
 │   │   ├── gallery
 │   │   ├── documents
 │   │   └── courses_catalog
 │   │
 │   ├── lms
 │   │   ├── dashboard
 │   │   ├── courses
 │   │   ├── modules
 │   │   ├── exams
 │   │   └── profile
 │   │
 │   └── settings

Pendekatan ini membuat aplikasi lebih mudah dikembangkan oleh tim dan mempermudah maintenance.


Fitur Utama Aplikasi

1. Portal Publik

Pengguna dapat mengakses konten tanpa login.

Fitur yang tersedia:

  • Artikel dan berita

  • Galeri foto

  • Dokumen publik

  • Katalog kursus

  • Halaman kontak

  • Informasi perusahaan

Fitur Artikel

  • Infinite scrolling

  • Kategori dan tag

  • HTML rendering

  • Syntax highlighting

  • Share ke media sosial

  • Related articles

Galeri

  • Album foto

  • Fullscreen viewer

  • Swipe navigation

  • Zoom image

Katalog Kursus

  • Pencarian kursus

  • Filter level

  • Preview modul

  • Informasi mentor

  • CTA untuk mengikuti kursus


2. Authentication System

Aplikasi menyediakan sistem autentikasi lengkap.

Fitur login:

  • Email dan password

  • Google Sign In

  • Apple Sign In

  • OAuth login

Fitur akun:

  • Registrasi

  • Verifikasi email

  • Reset password

  • Logout

Token autentikasi disimpan secara aman menggunakan Flutter Secure Storage.


3. Learning Management System (LMS)

Setelah login, pengguna dapat mengakses fitur LMS.

Dashboard

Menampilkan ringkasan aktivitas pengguna:

  • Kursus yang diikuti

  • Modul yang telah diselesaikan

  • Statistik ujian

  • Kursus terbaru

My Courses

Menampilkan semua kursus yang diikuti oleh pengguna.

Status kursus:

  • Active

  • Pending

  • Completed

  • Rejected

Setiap kursus memiliki progress indicator untuk memantau perkembangan belajar.


4. Modul Pembelajaran

Modul pembelajaran dapat diakses langsung dari aplikasi.

Fitur modul:

  • HTML content rendering

  • Navigation antar modul

  • Progress tracking

  • Sidebar modul

  • Auto tracking progress ke server


5. Sistem Ujian

Aplikasi menyediakan sistem ujian online.

Fitur ujian:

  • Timer countdown

  • Question navigator

  • Multiple choice questions

  • Auto-save jawaban

  • Local backup jawaban

  • Prevent back navigation

Saat ujian berlangsung, layar akan tetap aktif menggunakan WakeLock.


6. Hasil Ujian

Setelah ujian selesai, pengguna dapat melihat hasilnya.

Informasi yang ditampilkan:

  • Skor akhir

  • Jumlah jawaban benar dan salah

  • Review jawaban

  • Highlight jawaban benar dan salah


7. Profile Management

Pengguna dapat mengelola akun mereka melalui halaman profil.

Fitur profil:

  • Edit data profil

  • Update password

  • Statistik belajar

  • Logout


8. Settings

Pengaturan aplikasi meliputi:

  • Dark mode

  • Notifikasi

  • Bahasa

  • Cache management

  • Informasi aplikasi


Desain UI & Tema

Aplikasi menggunakan Material 3 Design System dengan warna utama biru.

Fitur desain:

  • Light & Dark Mode

  • Responsive layout

  • Smooth animations

  • Shimmer loading states

Typography menggunakan Google Sans untuk tampilan modern dan konsisten.


Optimasi Performa

Untuk memastikan performa optimal di perangkat mobile, beberapa teknik yang digunakan:

  • Image caching

  • Lazy loading pagination

  • Offline caching dengan Hive

  • Riverpod autoDispose

  • Debounce search


Keamanan Aplikasi

Keamanan menjadi fokus utama dalam pengembangan aplikasi.

Beberapa mekanisme yang diterapkan:

  • Secure token storage

  • HTTPS API communication

  • Laravel Sanctum authentication

  • Obfuscated release build

  • Sensitive data protection