Implementasi Login menggunakan Cubit pada Flutter Bloc

Illustration by Teddy Tri

Pada Bloc versi 5, Bloc menjadi extends terhadap Cubit dan bukan lagi terhadap Stream. Oleh sebab itu, Cubit menjadi subset dari Bloc. bloclibrary.dev telah meninggalkan konsep Event dan menyederhanakan dengan Emit.

Pada kesempatan kali ini saya akan memberikan contoh implementasi login menggunakan flutter_bloc versi 6.0.1 yang sudah menggunakan cubit.

Pertama yang harus kita tambahkan adalah flutter_bloc sebagai dependency untuk project ini. pubspec.yaml harus terlihat seperti ini :

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2
  flutter_bloc: ^6.0.1
  equatable: ^1.2.3
  firebase_auth: ^0.16.1

Di project ini kita akan menggunakan firebase untuk service loginnya

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutterapp/model/user_model.dart';
class FirebaseService {
  static FirebaseAuth _auth = FirebaseAuth.instance;
static Future<User> signInWithEmail({String email, String pass}) async {
    AuthResult result =
        await _auth.signInWithEmailAndPassword(email: email, password: pass);
    return User.fromFirebaseUser(result.user);
  }
}

State
State yang ada pada penerapan ini adalah

• InitialState -> state ketika cubit di create
• LoadingState -> state ketika method dipanggil
• SuccessState -> state ketika proses method berhasil
• FailedState -> state ketika proses method gagal

import 'package:flutter_bloc/flutter_bloc.dart';
import 'auth_state.dart';
import '../model/user_model.dart';
import '../services/firebase_service.dart';
class AuthCubit extends Cubit<AuthState> {
  AuthCubit() : super(InitialState());
void signIn(String email, String password) async {
    try {
      emit(LoadingState());
      User user =
          await FirebaseService.signInWithEmail(email: email, pass: password);
      emit(SuccessState(user));
    } catch (e) {
      emit(FailedState(e.toString()));
    }
  }
}
class SuccessState extends AuthState {
  final User user;
SuccessState(this.user);
@override
  List<Object> get props => [user];
}
class FailedState extends AuthState {
  final String errorMessage;
FailedState(this.errorMessage);
@override
  List<Object> get props => [errorMessage];
}

Tidak seperti bloc, cubit tidak menggunakan event namun langsung menggunakan method. Dan pada cubit untuk merubah statenya menggunakan emit() bukan lagi menggunakan yield()

import 'package:flutter_bloc/flutter_bloc.dart';
import 'auth_state.dart';
import '../model/user_model.dart';
import '../services/firebase_service.dart';
class AuthCubit extends Cubit<AuthState> {
  AuthCubit() : super(InitialState());
void signIn(String email, String password) async {
    try {
      emit(LoadingState());
      User user =
          await FirebaseService.signInWithEmail(email: email, pass: password);
      emit(SuccessState(user));
    } catch (e) {
      emit(FailedState(e.toString()));
    }
  }
}

Pada file main.dart, code nya seperti ini

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'cubit/auth_cubit.dart';
import 'ui/login.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Login Cubit',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BlocProvider(
        create: (context) => AuthCubit(),
        child: LoginPage(),
      ),
    );
  }
}

Kita kenalkan terlebih dahulu AuthCubit dengan menggunakan widget BlockProvider.

Untuk penerapan pada UInya masih sama seperti penerapan bloc

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../cubit/auth_cubit.dart';
import '../cubit/auth_state.dart';
class LoginPage extends StatefulWidget {
  @override
  State<LoginPage> createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
  TextEditingController _email = TextEditingController();
  TextEditingController _password = TextEditingController();
@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: BlocListener<AuthCubit, AuthState>(
        listener: (context, state) {
          if (state is FailedState) {
            showDialog(
              context: context,
              builder: (context) {
                return AlertDialog(
                  title: Text('error'),
                );
              },
            );
          }
        },
        child: BlocBuilder<AuthCubit, AuthState>(
          builder: (context, state) {
            if (state is LoadingState) {
              return Center(
                child: CircularProgressIndicator(),
              );
            }
            if (state is SuccessState) {
              return Center(
                child: Text('${state.user.uid} - ${state.user.email}'),
              );
            }
            return Form(
              child: Column(
                children: [
                  TextFormField(
                    decoration: InputDecoration(labelText: 'username'),
                    controller: _email,
                  ),
                  TextFormField(
                    decoration: InputDecoration(labelText: 'password'),
                    obscureText: true,
                    controller: _password,
                  ),
                  RaisedButton(
                    onPressed: () {
                      context
                          .bloc<AuthCubit>()
                          .signIn(_email.text, _password.text);
                    },
                    child: Text('Login'),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

Semoga artikel ini bisa bermanfaat bagi kalian, sampai jumpa di artikel selanjutnya!

Contributor: Bimo Tri Widodo