Set Dan Get Data Dengan Shared Preferences Pada Flutter
Halo sobat gutsy, kali ini saya akan berbagi tentang cara Set dan Get Data dengan Shared Preferences pada Flutter. Shared Preferences biasanya digunakan untuk menyimpan konfigurasi aplikasi tanpa harus menggunakan database. Pada blog kali ini kita akan membahas tentang cara menggunakan dependency shared_preferences.
Penggunaan dependency SharedPreferences ini sangatlah mudah, hanya dengan contoh seperti di bawah :
Inisialisasi objek SharedPreferences:
SharedPreferences prefs = await SharedPreferences.getInstance();
Memasaukkan data ke dalam SharedPreferences :
await prefs.setInt(String key, String value);
Mengambil data dari SharedPreferences :
prefs.getInt(String key);
Beberapa method set yang dapat digunakan dari SharedPreferences untuk memasukkan data adalah :
- setInt(String key, int value)
- setString(String key, String value)
- setBool(String key, bool value)
- setDouble(String key, double value)
- setStringList(String key, List
value)
Beberapa method get yang dapat digunakan dari SharedPreferences untuk mengambil data adalah :
- get(String key) -> return dynamic value
- getBool(String key) -> return bool value
- getString(String key) -> return String value
- getStringList(String key) -> return List
value - getInt(String key) -> return int value
- getDouble(String key) -> return double value
Langsung saja kita masuk ke cara penggunaan Set dan Get Data dengan Shared Preferences pada Flutter dengan mengikuti panduan di bawah :
Install Flutter
Sebelum kita mulai masuk ke cara pembuatan aplikasi flutter, pastikan laptop atau komputer sobat telah terinstall Flutter. Jika belum, sobat bisa mengunjungi halaman resmi Flutter untuk melihat cara melakukan instalasi Flutter.
Membuat Project Baru
Pertama kita buat dulu project baru, jika sobat menggunakan Visual Studio Code, maka sobat silahkan buka aplikasi Visual Studio Code kemudian ikuti langkah berikut :
- tekan ctrl + shift + p kemudian plih Flutter : New Project
- masukkan nama project flutter_shared_preferences
- Pilih folder dimana project akan disimpan dan tunggu sampai proses pembuatan projek baru selesai
Tambahkan dependency
Buka file pubspec.yaml kemudian tambahkan device_info: ^0.4.1+4 pada bagian dependencies, seperti di bawah ini :
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
shared_preferences: ^0.5.6+1
Kemudian jalakan perintah flutter pub get untuk mendapatkan package code shared_preferences
Menerapkan Kode Program
Buka file lib/main.dart kemudian tambahkan script untuk import package shared_preferenced setelah code import 'package:flutter/material.dart'; perhatikan code di bawah :
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
pada class MyApp ubahlah menjadi seperti code berikut :
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Shared Preferences',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
Pada class _MyHomePageState ubahlah menjadi seperti code berikut :
class _MyHomePageState extends State{
String email = "";
String password = "";
TextEditingController emailController = TextEditingController();
TextEditingController passwordController = TextEditingController();
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title: Text('Flutter Shared Preferences')
),
body: ListView(
padding: EdgeInsets.all(8.0),
children: [
// input email
TextField(
controller: emailController,
decoration: InputDecoration(
labelText: "Email",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0)
)
)
),
Padding(padding: EdgeInsets.only(top:4)),
// input password
TextField(
controller: passwordController,
decoration: InputDecoration(
labelText: "Password",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0)
)
)
),
// button untuk menyimpan email dan password ke dalam Shared Preferences melalui method
// setIntoSharedPreferences()
RaisedButton(
child: Text("Set"),
onPressed: (){
setIntoSharedPreferences();
},
),
Padding(padding: EdgeInsets.only(top: 8)),
// Menampilkan Email pada Text Widget
Text("Your Email : $email",
style: TextStyle(fontSize: 20),
),
// Menampilkan password pada Text Widget
Text("Your Password : $password",
style: TextStyle(fontSize: 20),
),
// Button yang berfungsi memanggil method getFromSharedPreferences() untuk menampilkan
// Email dan Password pada Text Widget
RaisedButton(
child: Text("Get"),
onPressed: (){
getFromSharedPreferences();
},
),
],
),
);
}
// method ini berfungsi untuk memasukkan data ke dalam SharedPreferences
void setIntoSharedPreferences() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
await prefs.setString("email", emailController.text);
await prefs.setString("password", passwordController.text);
}
// Method ini berfungsi untuk mengambil data Email dan Password dari SharedPreferences
// kemudian dimasukkan ke variable email dan password
void getFromSharedPreferences() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
setState(() {
email = prefs.getString("email");
password = prefs.getString("password");
});
}
}
berikut ini adalah code lengkap dari lib/main.dart
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Shared Preferences',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget{
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State{
String email = "";
String password = "";
TextEditingController emailController = TextEditingController();
TextEditingController passwordController = TextEditingController();
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title: Text('Flutter Shared Preferences')
),
body: ListView(
padding: EdgeInsets.all(8.0),
children: [
// input email
TextField(
controller: emailController,
decoration: InputDecoration(
labelText: "Email",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0)
)
)
),
Padding(padding: EdgeInsets.only(top:4)),
// input password
TextField(
controller: passwordController,
decoration: InputDecoration(
labelText: "Password",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0)
)
)
),
// button untuk menyimpan email dan password ke dalam Shared Preferences melalui method
// setIntoSharedPreferences()
RaisedButton(
child: Text("Set"),
onPressed: (){
setIntoSharedPreferences();
},
),
Padding(padding: EdgeInsets.only(top: 8)),
// Menampilkan Email pada Text Widget
Text("Your Email : $email",
style: TextStyle(fontSize: 20),
),
// Menampilkan password pada Text Widget
Text("Your Password : $password",
style: TextStyle(fontSize: 20),
),
// Button yang berfungsi memanggil method getFromSharedPreferences() untuk menampilkan
// Email dan Password pada Text Widget
RaisedButton(
child: Text("Get"),
onPressed: (){
getFromSharedPreferences();
},
),
],
),
);
}
// method ini berfungsi untuk memasukkan data ke dalam SharedPreferences
void setIntoSharedPreferences() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
await prefs.setString("email", emailController.text);
await prefs.setString("password", passwordController.text);
}
// Method ini berfungsi untuk mengambil data Email dan Password dari SharedPreferences
// kemudian dimasukkan ke variable email dan password
void getFromSharedPreferences() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
setState(() {
email = prefs.getString("email");
password = prefs.getString("password");
});
}
}
Menjalankan Aplikasi
Jalankan emlulator atau hubungkan Device Android sobat dengan laptop atau komputer yang sobat gunakan, kemudian tekan tombol F5 pada keyboard untuk memulai menjalankan aplikasi Flutter. Jika tidak ada error yang terjadi, maka pada device android atau emulator sobat akan tampak seperti gambar di bawah :
Masukkan email dan Password pada masing-masing Input TextField Widget, kemudian tekan tombol Set untuk menyimpan ke dalam SharedPreferences
Selanjutnya klik tombol Get untuk mengambil data dari Shared Preferences dan menampilkan pada masing-masing Text Widget
Demikian tadi adalah panduan yang bisa saya bagikan kepada sobat Gutsy, jangan lupa untuk bagikan artikel ini kepada teman-teman sobat, mungkin saja ada dari mereka yang memerlukan artikel ini.
Salam keren dari kami, sobat Gutsy 
