Membangun Aplikasi Flutter Dengan Cubit

Anda developer berpengalaman, atau sedang membuat aplikasi Flutter pertama? Berikut ini beberapa materi yang mungkin berguna untuk membantu Anda memulai. Buat para suhu flutter mohon bantuannya jika newbee ini salah menjelaskan.

Pada artikel ini saya tidak berusaha membuat sebuah tutorial flutter dengan cubit, karna dengan bantuan om google kamu mudah mencarinya. Nah.. sebagai seorang developer tentunya kita Ingin membuat aplikasi kita lebih dinamis, dan mudah di perbaiki dan dikembangkan bukan ?

Solusinya kita harus bangun pondasi aplikasi kita jadi lebih kuat, terus bagaimana membangun sebuah pondasi pada sebuah aplikasi ?(ceritanya kita bangun aplikasi flutter ya). Jawaban nya cukup dengan architecture kode yang cukup baik dan mudah di maintance.

Kalau sudah berada di posisi tersebut otomatis kita sudah mulai berani melirik teknologi atau plugin State Management yang lebih kompleks agar aplikasi kita jadi lebih kuat. Sampai saat ini yang saya ketahui ada beberapa plugin State Management. Yaitu sebagai berikut:

• Provider
• BLoC & Cubit
• Redux & Fish Redux
• MobX
• GetX

Kebetulan pertama saya mengenal flutter, om google rekomendasin saya pake bloc. Setelah menikmatinya saya kemudian di kenalkan dengan cubit. Setelah mengenal cubit agar lebih gampang belajarnya maka kemudian saya membangun aplikasi flutter dengan plugin State Management cubit. Aplikasi ini adalah aplikasi proses utang piutang dengan nama Bayar utang bos. Sudah ada di playstore.

Cubit itu adalah salah satu state management yang konsepnya hampir mirip seperti BLoC namun, cara kerjanya tidak menggunakan konsep Event State melainkan menggunakan konsep Function State. Bisa dikatakan konsep Cubit lebih sederhana dan mudah dipahami ketimbang konsep BLoC. Pada artikel sebelumnya saya sedikit menjelaskan tentang bloc. Jika kita tidak menggunakan cubit maka kita butuh event seperti gambar dibawah.

Agar Lebih gampang lihat perbedaannya saya kasih contoh sebagai berikut.

• Untuk statenya di sisi bloc atau (bloc & cubit) sama aja.

import 'package:equatable/equatable.dart';

abstract class LoginState extends Equatable {
  @override
  List<Object> get props => [];
}

class InitialLoginState extends LoginState {}

class LoadingLoginState extends LoginState {}

class FailureLoginState extends LoginState {
  final String errorMessage;

  FailureLoginState(this.errorMessage);

  @override
  List<Object> get props => [errorMessage];

  @override
  String toString() {
    return 'FailureLoginState{errorMessage: $errorMessage}';
  }
}

class SuccessLoginState extends LoginState {}

• untuk event hanya ada di bloc ada sementara di cubit tidak diperlukan

abstract class LoginEvent extends Equatable {}

class SubmitLoginEvent extends LoginEvent {
  final String username;
  final String password;

  SubmitLoginEvent(this.username, this.password);

  @override
  List<Object> get props => [username, password];

  @override
  String toString() {
    return 'SubmitLoginEvent{username: $username, password: $password}';
  }
}

• Nah.. kalau cuma menggunakan bloc implementasinya sebagai berikut. butuh class event yang diatas.

class LoginBloc extends Bloc<LoginEvent, LoginState> {
  LoginBloc() : super(InitialLoginState());

  @override
  Stream<LoginState> mapEventToState(LoginEvent event) async* {
    if (event is SubmitLoginEvent) {
      yield LoadingLoginState();
      await Future.delayed(Duration(seconds: 3));
      if (event.username == 'admin' && event.password == 'admin') {
        yield SuccessLoginState();
      } else {
        yield FailureLoginState('Login failure');
      }
    }
  }
}

• Kemudian kalau kita menggunakan cubit maka pengimplementasiannya adalah sebagai berikut

class LoginCubit extends Cubit<LoginState> {
  LoginCubit() : super(InitialLoginState());

  void login(String username, String password) async {
    emit(LoadingLoginState());
    await Future.delayed(Duration(seconds: 3));
    if (username == 'admin' && password == 'admin') {
      emit(SuccessLoginState());
    } else {
      emit(FailureLoginState('Login failure'));
    }
  }
}

Jika melihat kedua class LoginBloc(Event State) dan LoginCubit(Function State) kelihatan perbedaannya bukan. Menurut saya pribadi dengan adanya cubit sangat membantu developer.

Oh iya ada satu materi lagi. untuk state di bloc ada saya modifikasi, agar lebih gampang maintancenya ini opini saya ya. Jadi saya hanya buat satu class namun untuk instansiasinya saya buat sesuai dengan state yang saya butuhkan. Contohnya sebagai berikut :

class LoginState {

  final String state;
  final String errorMessage;
  const CardState({this.state, this.errorMessage});

  CardState.initial() :
        state = _initial,
        errorMessage = '';

  CardState.loading() :
        state = _loading,
        errorMessage = '';

  CardState.error(String _message) :
        state = _error,
        errorMessage = _message;

  CardState.success() :
        state = _success,
        errorMessage = '';

  bool isInitial() {
    return state == _initial;
  }

  bool isLoading() {
    return state == _loading;
  }

  bool isError() {
    return state == _error;
  }

  bool isSuccess() {
    return state == _success;
  }

  static String _initial = "initial";
  static String _loading = "loading";
  static String _error = "error";
  static String _success = "success";

}