Implementasi Authentication Login di Flutter
Halo sobat medium dimanapun berada kembali lagi dalam sesi sharing programmer, disini saya akan melanjutkan materi sebelumnya tentang flutter, saya akan mencoba membawa ke dalam Flutter lagi yaitu framework untuk membuat multiple platform aplikasi mobile, web dll, saya akan membagikan tips, bagaimana cara membuat Authentication Login di Flutter itu sendiri.
Disini saya akan menjelaskan secara mudah bagaimana Implementasi Authentication Login di Flutter.
1.Permasalahaan
Terkadang kita sebagai programmer bingung, bagaimana sih cara yang baik dalam melalukan authentication login disini saya akan membuat jadi lebih mudah. Saya akan memberikan tutorial Implementasi Authentication Login di Flutter menggunakan depedencies Shared Preferences.
2. Tujuan
Dengan tutorial ini, dapat memudahkan kita melakukan Implemantasi Authentication Login di Flutter, dengan cara yang mudah tanpa harus menggunakan banyak depedencies. Disini kita menggunakan open source API, menggunakan https://reqres.in untuk authentication loginnya
3. Step by Step
a. Teman-teman di pastikan sudah menginisiasi flutter project terlebih dahulu
b. Coba tambahkan 2 dependencies, di dalam pubspec.yaml, yaitu : http dan shared_preferences
c. Tambahkan beberapa folder dan file, didalam lib, buatlah structure folder seperti ini:
d. Tambahkan code ini didalam file api.dart. File ini berfungsi untuk inisiasi awal, saat melakukan fetching API login
import 'dart:math';
import 'package:shared_preferences/shared_preferences.dart';
import 'dart:convert' as convert;
import 'package:http/http.dart' as http;
Future<bool> setLogin(String email, String password) async {
var response = await http.post(Uri.parse('https://reqres.in/api/login'),
body: ({"email": email, "password": password}));
if (response.statusCode == 200) {
SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.setBool("isLoggedIn", true);
return true;
} else {
return false;
}
}e. Tambahkan code ini didalam file main.dart. File ini berfungsi untuk inisiasi awal halaman.
import 'package:auth_login_flutter/pages/home.dart';
import 'package:auth_login_flutter/pages/login.dart';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
SharedPreferences prefs = await SharedPreferences.getInstance();
bool status = prefs.getBool('isLoggedIn') ?? false;
runApp(MyApp(status: status));
}
class MyApp extends StatelessWidget {
const MyApp({Key? key, required this.status}) : super(key: key);
final bool status;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: status ? const Home() : const LoginPage(),
);
}
}f. Tambahkan code ini didalam file login.dart. File ini berfungsi untuk inisiasi awal pada halaman login.
import 'package:auth_login_flutter/helper/api.dart';
import 'package:auth_login_flutter/pages/home.dart';
import 'package:flutter/material.dart';
class LoginPage extends StatefulWidget {
const LoginPage({Key? key}) : super(key: key);
@override
State<LoginPage> createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
var emailController = TextEditingController();
var passwordController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Column(
children: [
const Text(
"Login Page",
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
const SizedBox(
height: 20,
),
TextFormField(
controller: emailController,
decoration: const InputDecoration(
labelText: "Email",
border: const OutlineInputBorder(),
suffixIcon: const Icon(Icons.email)),
),
const SizedBox(
height: 10,
),
TextFormField(
controller: passwordController,
obscureText: true,
decoration: const InputDecoration(
labelText: "Password",
border: OutlineInputBorder(),
suffixIcon: const Icon(Icons.password)),
),
const SizedBox(
height: 20,
),
OutlinedButton.icon(
onPressed: () async {
var login = await setLogin(
emailController.text, passwordController.text);
if (login) {
// ignore: use_build_context_synchronously
Navigator.of(context).pushAndRemoveUntil(
MaterialPageRoute(builder: (context) => const Home()),
(Route route) => false,
);
} else {
// ignore: use_build_context_synchronously
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content:
Text('Email dan Password yang dimasukkan salah!'),
),
);
}
},
icon: const Icon(Icons.login),
label: const Text("Login"),
)
],
),
),
)),
);
}
}g. Tambahkan code ini didalam file home.dart. File ini berfungsi untuk inisiasi awal pada halaman homepage.
import 'package:auth_login_flutter/pages/login.dart';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
@override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
void _logout() async {
SharedPreferences preferences = await SharedPreferences.getInstance();
await preferences.clear();
Navigator.of(context).pushReplacement(
MaterialPageRoute(builder: (context) => const LoginPage()),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Homepage"),
),
body: SafeArea(
child: Padding(
padding: EdgeInsets.all(8.0),
child: Center(
child: Column(
children: [
Text("Welcome Bro"),
OutlinedButton(
onPressed: () {
_logout();
},
child: Text("Logout"))
],
),
),
)),
);
}
}h. Seperti ini tampilan awal ketika running projectnya, akan masuk ke halaman Login. Coba teman-teman melakukan login email dan password.
{
"email": "eve.holt@reqres.in",
"password": "cityslicka"
}
i. Setelah login teman-teman akan masuk ke halaman Home, disini teman-teman bisa melakukan logout juga, dan akan kembali lagi ke halaman Login.
Dari saya mungkin sekian semoga dapat membantu teman-teman. Bisa di follow juga akun medium saya, agar teman-teman mendapat update terbaru
