FLUTTER FIREBASE

A. Kompetensi Dasar
 Mahasiswa mampu membuat aplikasi Mobile berbasis Flutter menggunakan
Firebase Authentication

B. Alokasi Waktu
2 jam

C. Prasyarat
Di dalam VS Code sudah terinstal ekstensi berikut:
- Flutter Snippet
- Dart Code
D. Menggunakan Firebase
1) ListView merupakan fitur di Flutter untuk menampilkan item yang disusun
berurutan satu sama lain sesuai scrolling yang umumnya dari atas ke bawah
2) Untuk memulai membuat sebuah ListView, masuk ke menu View  Command
Pallete atau Ctrl + Shift + P
3) Ketikkan “Flutter” dan pilih “Flutter: New Project”

4) Ketikkan nama project “f4_firebase_form” dan tekan Enter

5) Tentukan nama folder tempat program Flutter akan disimpan
6) Tunggu VS Code melakukan persiapan selesai sampai anda melihat pesan:

1
7) Sebelum kita mulai menulis program, kita akan melakukan setup Firebase
terlebih dahulu. Firebase adalah sebuah platform berbasis cloud yang dapat
digunakan untuk membantu dalam pembuatan aplikasi mobile maupun web.
Langkah awal, akses URL: https://firebase.google.com
8) Setelah itu, login dengan menggunakan akun Gmail anda

9) Setelah berhasil login, klik menu “Go to console” dan anda akan dihadapkan
pada tampilan berikut:

10) Klik pada tombol “Create a project” untuk membuat project baru. Beri nama
“FlutterDemo” atau nama pilihan anda

2
11) Klik tombol “Continue” sampai pada pilihan membuat sebuah Google Analytics
account. Masukkan nama “flutter-demo” dan klik “Save”

12) Setelah itu, “accept” semua opsi dan klik tombol “Create project”

3
13) Langkah selanjutnya, karena kita akan membuat aplikasi yang berjalan di
Android mobile, klik pada tombol Android untuk menambahkan sebuah “app”

4
14) Selanjutnya isikan detail dari aplikasi yang kita inginkan:

15) Untuk App Nickname bisa dikosongkan. Begitu juga dengan bagian “Debug
signing certificate”, namun di sini kita akan coba buatkan certificate nya dengan
mengikuti panduannya:

5
 Pada panduannya, pilih sesuai OS yang digunakan:

16) Jalankan perintah tersebut pada terminal VS Code, dang anti

%USERPROFILE% dengan nama komputer anda. Masukkan password default:
“android” ketika diminta:

17) Setelah itu, copykan text SHA1 berikut ke dalam Firebase:

6
 Kemudian klik pada tombol “Register app”
18) Selanjutnya downloadkan file konfigurasi sesuai instruksi:

7
 Copykan ke dalam “app” folder.

Selanjutnya klik tombol “Next”

19) Tambahkan instruksi pada file “build.gradle” yang ada pada level di bawah
project langsung:

8
20) Selanjutnya sesuai instruksi Firebase, tambahkan dependencies pada file
“build.gradle” yang ada pada level di bawah “app” folder:

9
Selain itu, ubah “applicationID” sesuai dengan package yang ditambahkan pada
Firebase:

10
21) Kemudian tekan tombol “Sync” pada IDE jika ada:

Karena kita menggunakan VS Code, cukup simpan saja perubahannya.

22) Compile dan jalankan aplikasi anda

23) Selanjutnya, kita akan melakukan setup untuk Authentication. Klik menu
“Authentication” dan lanjutkan klik tombol “Set up sign-in method” sebagai
berikut:

11
24) Selanjutnya klik Google untuk mengijinkan pengguna login menggunakan akun
Gmail:

25) Lengkapi form yang ditampilkan dan klik tombol “Save”

12
26) Selanjutnya, pada VS Code, update file “pubspec.yaml” dengan menambahkan
dependencies Firebase sebagai berikut:

Pastikan koneksi internet anda berjalan baik karena VS Code akan mendownload
dependencies yang diperlukan setelah perubahannya disimpan.
27) Sebelum kita menggunakan Firebase yang telah kita setup pada aplikasi kita,
ganti kode default yang ada menggunakan kode “main.dart” berikut ini:
import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: 'Flutter Login',

13
 home: new LoginPage(),
));
}

class LoginPage extends StatefulWidget {

@override
_LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {

@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Container(
color: Colors.white,
child: new Center(
child: new Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlutterLogo(size: 150,),
SizedBox(height: 50,),
_signInButton(),
],
),
),
),
);
}

Widget _signInButton() {}
}
28) Selanjutnya, lengkapi isian dari method “_signInButton()” seperti berikut:
Widget _signInButton() {
return new OutlineButton(
onPressed: () {},
splashColor: Colors.grey,
shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(4
5)),
child: new Padding(
padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
child: new Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,

14
 children: <Widget>[
Image(image: AssetImage("img/google.png"), height: 35.0),
Padding(
padding: const EdgeInsets.only(left: 10),
child: Text(
'Sign in with Google',
style: TextStyle(
fontSize: 20,
color: Colors.grey,
),
),
)
],
),
),
);
}
Jika dijalankan, tampilannya adalah sebagai berikut:

Namun tombol sign in belum berfungsi karena onPressed() dari tombol masih
kosong:
return new OutlineButton(
onPressed: () {},

15
 splashColor: Colors.grey,
shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(4
)),

29) Selanjutnya, kita akan menggunakan Firebase untuk authentication-nya. Untuk

itu, buat sebuah file baru bernama “signin.dart” di folder yang sama dengan
lokasi “main.dart”:

30) Isikan kode “signin.dart” sebagai berikut:

import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';

final FirebaseAuth _auth = FirebaseAuth.instance;

final GoogleSignIn googleSignIn = GoogleSignIn();

Future<FirebaseUser> signInWithGoogle() async {

final GoogleSignInAccount googleSignInAccount = await googleSignIn.signIn()
;
final GoogleSignInAuthentication googleSignInAuthentication =
await googleSignInAccount.authentication;

final AuthCredential credential = GoogleAuthProvider.getCredential(

accessToken: googleSignInAuthentication.accessToken,
idToken: googleSignInAuthentication.idToken,
);

final AuthResult authResult = await _auth.signInWithCredential(credential);

final FirebaseUser user = authResult.user;

assert(!user.isAnonymous);
assert(await user.getIdToken() != null);

final FirebaseUser currentUser = await _auth.currentUser();

16
 assert(user.uid == currentUser.uid);

return currentUser;
}

void signOutGoogle() async{

await googleSignIn.signOut();

print("User Sign Out");

}

31) Selanjutnya, tambahkan kode pada Onpressed() yang sebelumnya kosong

dengan kode berikut:
Widget _signInButton() {
return new OutlineButton(
onPressed: () {
signInWithGoogle().whenComplete(() {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return UserHomepage();
},
),
);
});
},

32) Buatkan tampilan UserHomepage agar ketika login sukses, pengguna dapat
melihat tampilan beranda:

17
18