Pertemuan 1: Pendahuluan Flutter Advanced & Arsitektur Project

Daftar Isi

• 1. Komparasi Flutter vs Native vs Hybrid
• 2. Arsitektur Aplikasi Modern (Clean Architecture)
• 3. Struktur Folder Modular Berbasis Fitur
• 4. Prinsip SOLID & Dependency Injection

1. Komparasi Flutter vs Native vs Hybrid

Dalam pengembangan skala enterprise, pemilihan arsitektur dan teknologi menentukan aspek perawatannya (maintainability), performa, serta kecepatan rilis (time-to-market).

2. Arsitektur Aplikasi Modern (Clean Architecture)

Clean Architecture memisahkan kode menjadi 3 lapisan independen (decoupled layers):

graph TD
    subgraph Presentation Layer
        UI[UI Widgets]
        State[State Management / Bloc]
    end
    subgraph Domain Layer
        UseCase[Use Cases / Interactors]
        Entity[Domain Entities]
    end
    subgraph Data Layer
        Repo[Repository Implementation]
        DataSource[Local & Remote Data Sources]
    end

    UI --> State
    State --> UseCase
    UseCase --> Entity
    Repo --> UseCase
    DataSource --> Repo

1. Presentation Layer: Berisi UI Widgets dan pengelola state (Bloc/Riverpod). Terikat hanya pada Domain Layer.
2. Domain Layer: Pusat logika bisnis murni (business rules). Bebas dari library Flutter atau dependency luar.
3. Data Layer: Bertanggung jawab mengambil data dari REST API, Database Lokal, atau Cache, lalu mengonversinya menjadi Entity.

3. Struktur Folder Modular Berbasis Fitur

lib/
├── core/
│   ├── constants/
│   ├── network/
│   ├── theme/
│   └── error/
├── features/
│   ├── auth/
│   │   ├── data/
│   │   ├── domain/
│   │   └── presentation/
│   └── profile/
└── main.dart

4. Prinsip SOLID & Dependency Injection

Penggunaan GetIt atau Injectable untuk menerapkan Inversion of Control (IoC):

final getIt = GetIt.instance;

void setupLocator() {
  getIt.registerLazySingleton<AuthRepository>(
    () => AuthRepositoryImpl(remoteDataSource: getIt()),
  );
}

Pertemuan 2: State Management Lanjutan (Provider, Riverpod, Bloc, Cubit)

Daftar Isi

• 1. Taksonomi State Management di Flutter
• 2. Arsitektur BLoC & Cubit
• 3. Memahami Riverpod Modern
• 4. Studi Kasus Implementasi BLoC Pattern

1. Taksonomi State Management di Flutter

Untuk aplikasi skala besar, pemilihan state management berdampak langsung pada pengujian (unit testing) dan pemisahan logika UI.

graph LR
    A[State Management] --> B[Reactive Stream-Based]
    A --> C[Provider / Riverpod]
    B --> D[BLoC / Cubit]
    C --> E[StateNotifier / AsyncNotifier]

2. Arsitektur BLoC & Cubit

• Cubit: Versi sederhana dari BLoC yang menggunakan fungsi (methods) untuk memicu perubahan State.
• BLoC (Business Logic Component): Menggunakan Event berbasis aliran data (streams) untuk mengubah State secara eksplisit.

Komponen BLoC:

1. Event: Input masukan dari pengguna (misal: FetchUserEvent).
2. State: Output kondisi UI saat ini (misal: UserLoading, UserLoaded, UserError).
3. Bloc: Komponen pengolah aliran event menjadi state baru.

// Definisi Event & State
abstract class AuthEvent {}
class LoginRequested extends AuthEvent {
  final String email;
  final String password;
  LoginRequested(this.email, this.password);
}

abstract class AuthState {}
class AuthInitial extends AuthState {}
class AuthLoading extends AuthState {}
class AuthSuccess extends AuthState {}

// Implementasi BLoC
class AuthBloc extends Bloc<AuthEvent, AuthState> {
  AuthBloc() : super(AuthInitial()) {
    on<LoginRequested>((event, emit) async {
      emit(AuthLoading());
      // Logika Autentikasi
      emit(AuthSuccess());
    });
  }
}

3. Memahami Riverpod Modern

Riverpod memperbaiki kelemahan Provider bawaan dengan menghilangkan ketergantungan pada BuildContext dan mendukung penanganan async yang aman.

Pertemuan 3: API Integration (REST API, GraphQL, JSON Parsing)

Daftar Isi

• 1. Penggunaan Library HTTP Advanced (Dio)
• 2. Dio Interceptors untuk Authentication & Logging
• 3. Integrasi GraphQL dengan GraphQL Client
• 4. Code Generation JSON Serialization (Freezed & JsonSerializable)

1. Penggunaan Library HTTP Advanced (Dio)

Paket Dio menawarkan fitur tingkat lanjut dibanding package http biasa, seperti:

• Interceptors untuk request/response/error.
• Global configuration (BaseURL, Timeout).
• Cancel Tokens untuk membatalkan koneksi.
• Automatic FormData & File Upload tracking.

final dio = Dio(BaseOptions(
  baseUrl: 'https://api.example.com/v1/',
  connectTimeout: Duration(seconds: 10),
  receiveTimeout: Duration(seconds: 10),
));

2. Dio Interceptors untuk Authentication & Logging

Interceptors memotong alur Request dan Response sebelum diproses aplikasi:

dio.interceptors.add(InterceptorsWrapper(
  onRequest: (options, handler) {
    options.headers['Authorization'] = 'Bearer MY_SECRET_TOKEN';
    return handler.next(options);
  },
  onError: (DioException e, handler) {
    if (e.response?.statusCode == 401) {
      // Refresh Token Logic
    }
    return handler.next(e);
  },
));

3. Code Generation JSON Serialization (Freezed & JsonSerializable)

Penggunaan freezed dan json_annotation memastikan immutability dan mencegah kesalahan typo saat parsing JSON.

@freezed
class UserModel with _$UserModel {
  factory UserModel({
    required int id,
    required String name,
    required String email,
  }) = _UserModel;

  factory UserModel.fromJson(Map<String, dynamic> json) => _$UserModelFromJson(json);
}