State Management di Flutter dengan Riverpod: Pola Clean Architecture untuk Aplikasi Skala Menengah

State management merupakan aspek fundamental dalam pengembangan Flutter yang sering kali menjadi bottleneck ketika aplikasi mulai bertumbuh. Riverpod hadir sebagai solusi modern yang mengatasi keterbatasan Provider konvensional dengan type safety yang lebih baik dan kemampuan testing yang superior. Ketika dikombinasikan dengan Clean Architecture, Riverpod membentuk fondasi yang kokoh untuk aplikasi skala menengah ke atas.

Mengapa Riverpod daripada Provider?

Provider telah lama menjadi rekomendasi default dari Flutter team, namun Riverpod mengatasi beberapa pain point yang fundamental. Riverpod tidak bergantung pada widget tree untuk menyediakan state, sehingga eliminasi masalah "Provider not found" yang sering menghantui developer. Type safety bawaan Riverpod memastikan error terdeteksi saat compile time, bukan runtime.

Riverpod menggunakan konsep code generation melalui riverpod_generator yang mengurangi boilerplate secara signifikan. Setiap provider didefinisikan sebagai global variable yang tetap maintainable karena framework mengelola dependency graph secara otomatis. Auto-dispose juga bekerja lebih reliable dibanding Provider.

Dari sisi developer experience, Riverpod menyediakan extension ref.watch() yang secara reactive mendengarkan perubahan state. Berbeda dengan Provider tradisional yang memerlukan context untuk mengakses state, ref dapat digunakan di luar widget tree. Kemampuan ini membuka kemungkinan untuk mengelola state di repository, use case, maupun service layer tanpa coupling ke Flutter framework.

Struktur Clean Architecture dengan Riverpod

Clean Architecture memisahkan aplikasi menjadi tiga layer utama: Presentation, Domain, dan Data. Riverpod berperan sebagai penghubung antar layer dengan dependency injection yang clean.

Domain Layer berisi entity dan use case. Entity adalah model data murni tanpa dependency eksternal. Use case merepresentasikan operasi bisnis individual yang dapat di-compose.

Data Layer menangani data source, baik dari API, local database, maupun cache. Repository pattern diimplementasikan di layer ini untuk abstract data source dari domain.

Presentation Layer berisi UI dan state management. Riverpod provider di layer ini mengonsumsi use case dan mengexpose state ke widget.

Setiap layer hanya bergantung pada layer di bawahnya, memastikan dependency rule tetap terjaga. Domain layer tidak mengetahui keberadaan Flutter maupun Riverpod, sehingga business logic tetap pure dan testable secara independent. Data layer mengimplementasikan interface yang didefinisikan di domain, sementara presentation layer mengorkestrasi keduanya melalui Riverpod provider.

Implementasi Provider Pattern

Riverpod menyediakan beberapa jenis provider untuk kebutuhan berbeda. Provider paling sederhana untuk value yang tidak berubah. StateProvider untuk state sederhana yang dapat di-update. StateNotifierProvider dan AsyncNotifierProvider untuk state kompleks dengan business logic.

Berikut struktur dasar aplikasi todo dengan Clean Architecture:

// Domain Layer - Entity
class Todo {
  final String id;
  final String title;
  final bool isCompleted;

  Todo({
    required this.id,
    required this.title,
    this.isCompleted = false,
  });

  Todo copyWith({String? title, bool? isCompleted}) {
    return Todo(
      id: id,
      title: title ?? this.title,
      isCompleted: isCompleted ?? this.isCompleted,
    );
  }
}

// Domain Layer - Use Case
class GetTodosUseCase {
  final TodoRepository repository;

  GetTodosUseCase(this.repository);

  Future<List<Todo>> execute() async {
    return await repository.getTodos();
  }
}

Repository pattern memastikan domain layer tidak tahu detail implementasi data source. Interface repository didefinisikan di domain, implementasi di data layer. Pola ini memungkinkan penggantian implementasi data source tanpa mengubah business logic — misalnya, beralih dari REST API ke GraphQL cukup dengan membuat class implementasi baru yang mengikuti interface TodoRepository yang sama.

// Domain Layer - Repository Interface
abstract class TodoRepository {
  Future<List<Todo>> getTodos();
  Future<void> addTodo(Todo todo);
  Future<void> updateTodo(Todo todo);
  Future<void> deleteTodo(String id);
}

// Data Layer - Repository Implementation
class TodoRepositoryImpl implements TodoRepository {
  final TodoRemoteDataSource remoteDataSource;
  final TodoLocalDataSource localDataSource;

  TodoRepositoryImpl({
    required this.remoteDataSource,
    required this.localDataSource,
  });

  @override
  Future<List<Todo>> getTodos() async {
    try {
      final remoteTodos = await remoteDataSource.getTodos();
      await localDataSource.cacheTodos(remoteTodos);
      return remoteTodos;
    } catch (e) {
      return await localDataSource.getCachedTodos();
    }
  }
  
  // ... other implementations
}

StateNotifier dan AsyncNotifier

StateNotifier adalah class yang mengelola state mutable dengan cara immutable. Setiap perubahan state membuat instance baru, memastikan UI hanya rebuild ketika ada perubahan meaningful.

// Presentation Layer - Notifier
class TodoNotifier extends StateNotifier<List<Todo>> {
  final GetTodosUseCase getTodosUseCase;
  final AddTodoUseCase addTodoUseCase;

  TodoNotifier({
    required this.getTodosUseCase,
    required this.addTodoUseCase,
  }) : super([]);

  Future<void> loadTodos() async {
    final todos = await getTodosUseCase.execute();
    state = todos;
  }

  Future<void> addTodo(String title) async {
    final todo = Todo(
      id: DateTime.now().toString(),
      title: title,
    );
    await addTodoUseCase.execute(todo);
    state = [...state, todo];
  }

  void toggleTodo(String id) {
    state = state.map((todo) {
      if (todo.id == id) {
        return todo.copyWith(isCompleted: !todo.isCompleted);
      }
      return todo;
    }).toList();
  }
}

Untuk operasi async yang kompleks dengan loading dan error state, gunakan AsyncNotifier. Class ini mengelola state dalam bentuk AsyncValue<T> yang secara native mendukung state loading, data, dan error.

class TodoAsyncNotifier extends AsyncNotifier<List<Todo>> {
  late final GetTodosUseCase _getTodosUseCase;

  @override
  Future<List<Todo>> build() async {
    _getTodosUseCase = ref.read(getTodosUseCaseProvider);
    return await _getTodosUseCase.execute();
  }

  Future<void> refresh() async {
    state = const AsyncLoading();
    state = await AsyncValue.guard(() async {
      return await _getTodosUseCase.execute();
    });
  }
}

Dependency Injection dengan Riverpod

Riverpod mengatasi dependency injection dengan provider yang dapat saling mereferensi. ref.read() untuk akses one-time, ref.watch() untuk reactive dependency.

// Provider definitions
final todoRemoteDataSourceProvider = Provider<TodoRemoteDataSource>((ref) {
  return TodoRemoteDataSourceImpl(
    client: ref.read(httpClientProvider),
  );
});

final todoLocalDataSourceProvider = Provider<TodoLocalDataSource>((ref) {
  return TodoLocalDataSourceImpl(
    database: ref.read(databaseProvider),
  );
});

final todoRepositoryProvider = Provider<TodoRepository>((ref) {
  return TodoRepositoryImpl(
    remoteDataSource: ref.read(todoRemoteDataSourceProvider),
    localDataSource: ref.read(todoLocalDataSourceProvider),
  );
});

final getTodosUseCaseProvider = Provider<GetTodosUseCase>((ref) {
  return GetTodosUseCase(ref.read(todoRepositoryProvider));
});

final todoNotifierProvider = StateNotifierProvider<TodoNotifier, List<Todo>>((ref) {
  return TodoNotifier(
    getTodosUseCase: ref.read(getTodosUseCaseProvider),
    addTodoUseCase: ref.read(addTodoUseCaseProvider),
  );
});

Integrasi dengan UI Layer

Widget mengonsumsi provider menggunakan ConsumerWidget atau ConsumerStatefulWidget. Method ref.watch() di dalam build method memastikan widget rebuild ketika state berubah.

class TodoListScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final todos = ref.watch(todoNotifierProvider);

    return Scaffold(
      appBar: AppBar(title: Text('Todos')),
      body: ListView.builder(
        itemCount: todos.length,
        itemBuilder: (context, index) {
          final todo = todos[index];
          return ListTile(
            title: Text(todo.title),
            leading: Checkbox(
              value: todo.isCompleted,
              onChanged: (_) {
                ref.read(todoNotifierProvider.notifier).toggleTodo(todo.id);
              },
            ),
          );
        },
      ),
    );
  }
}

Untuk async state dengan AsyncNotifier, gunakan pattern when() untuk handle loading, error, dan data states:

class TodoAsyncScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final asyncTodos = ref.watch(todoAsyncNotifierProvider);

    return Scaffold(
      body: asyncTodos.when(
        loading: () => Center(child: CircularProgressIndicator()),
        error: (error, stack) => Center(child: Text('Error: $error')),
        data: (todos) => ListView.builder(
          itemCount: todos.length,
          itemBuilder: (context, index) {
            return ListTile(title: Text(todos[index].title));
          },
        ),
      ),
    );
  }
}

Testing dengan Riverpod

Testability adalah keunggulan utama Riverpod. Provider dapat di-override dalam test untuk mock dependency.

void main() {
  test('TodoNotifier adds todo correctly', () async {
    final container = ProviderContainer(overrides: [
      todoRepositoryProvider.overrideWithValue(MockTodoRepository()),
    ]);

    final notifier = container.read(todoNotifierProvider.notifier);
    
    await notifier.addTodo('Test Todo');
    
    expect(
      container.read(todoNotifierProvider).length,
      equals(1),
    );
  });
}

Best Practices

Beberapa prinsip penting dalam implementasi: selalu definisikan provider di file terpisah berdasarkan layer, gunakan autoDispose untuk provider yang tidak perlu persist, dan hindari business logic di UI layer. Family modifier berguna untuk parameterized provider seperti detail view dengan ID dinamis.

Struktur folder yang direkomendasikan mengikuti konvensi feature-first, di mana setiap feature memiliki folder domain, data, dan presentation. Pendekatan ini memudahkan navigasi dan memastikan boundary antar layer tetap jelas. Provider yang didefinisikan di tiap feature hanya mengexpose use case dan state yang relevan, menyembunyikan detail implementasi dari konsumen.

Riverpod dengan Clean Architecture memang memerlukan setup awal yang lebih kompleks, namun return-nya sangat signifikan dalam jangka panjang. Codebase menjadi predictable, testable, dan scalable seiring bertumbuhnya aplikasi.

Mau memperdalam skill Flutter dan mobile development secara sistematis? Bergabunglah dengan Mobile Development Bootcamp di Rumah Coding. Kurikulum praktis dengan proyek real-world menggunakan Flutter, Riverpod, dan arsitektur modern lainnya.