Pertama buat projek baru, pada pubspec.yaml tambahkan package shared_preferences
Selanjutnya buat 3 file baru dengan nama myModel.dart, mySharedPref.dart dan SharedActivity.dart
Setelah itu pada file mySharedPref.dart Tambahkan Kode seperti berikut ini
import 'package:shared_preferences7/myModel.dart';
import 'package:shared_preferences/shared_preferences.dart';
class MySharedPref {
static const String keyValue = "value";
static const String keyValue1 = "value";
static const String keyValue2 = "value";
static const String keyMyModel = "MyModel";
Future<SharedPreferences> getPreferences() async =>
await SharedPreferences.getInstance();
setValue(String value, String key) async {
(await getPreferences()).setString(key, value);
}
Future<String?> getValue(key) async =>
(await getPreferences()).getString(key);
setModel(MyModel model) async {
(await getPreferences()).setString(keyMyModel, MyModelToJson(model));
}
Future<MyModel?> getModel() async {
var data = (await getPreferences()).getString(keyMyModel);
if (data != null) return MyModelFromJson(data);
return null;
}
Future<bool> clearAllData() async {
var sharedPref = await SharedPreferences.getInstance();
sharedPref.remove(keyValue);
sharedPref.remove(keyValue1);
sharedPref.remove(keyValue2);
sharedPref.remove(keyMyModel);
return true;
} }
Keterangan ;
- keyValue dan keyExampleModel adalah key yang kita gunakan untuk mengambil nilai dari SharedPreferences
- Method getPreferences() digunakan untuk mendapatkan object SharedPreferences yang digunakan untuk mengelola data lokal
- setValue dan getValue merupakan contoh sederhana dalam menyimpan value dengan tipe data String.
- setModel dan getModel merupakan contoh menyimpan object dengan mengubahnya menjadi string agar bisa disimpan pada SharedPreferences
- Method clearAllData digunakan untuk menghapus semua data lokal pada SharedPreferences
Selanjutnya pada file myModel.dart tambahkan kode seperti dibawah ini
// To Parse this JSON data, do //
// final MyModel = MyModelFromJson(json String);
import 'dart:convert';
MyModel MyModelFromJson(String str) =>
MyModel.fromJson(json.decode(str));
String MyModelToJson(MyModel data) => json.encode(data.toJson());
class MyModel { MyModel({
required this.greeting, required this.instructions, });
String greeting;
List<String> instructions;
factory MyModel.fromJson(Map<String, dynamic> json) => MyModel(
greeting: json["greeting"],
instructions: List<String>.from(json["instructions"].map((x) =>
x)), );
Map<String, dynamic> toJson() => { "greeting": greeting,
"instructions": List<dynamic>.from(instructions.map((x) => x)), };
}
Pada file SharedActivity.dart Tambahkan kode seperti berikut
import 'package:flutter/material.dart';
import 'package:shared_preferences7/mySharedPref.dart';
class SharedActivity extends StatefulWidget { @override
State<SharedActivity> createState() => SharedActivityState();
}
class SharedActivityState extends State<SharedActivity> { MySharedPref _mySharedPref = MySharedPref();
String _value = "kosong";
String _value1 = "kosong";
String _value2 = "kosong";
String _isi = "kosong";
TextEditingController controllerText = TextEditingController();
TextEditingController controllerText1 = TextEditingController();
TextEditingController controllerText2 = TextEditingController();
final _fromkey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) { return Scaffold(
body: Stack(
children: [ Form(
key: _fromkey,
child: Align(
alignment: Alignment.center, child: Column(
mainAxisSize: MainAxisSize.min, children: [
Container(
margin: EdgeInsets.only(left: 24, right: 24, bottom: 8),
child: TextFormField(
controller: controllerText,
keyboardType: TextInputType.text, decoration: InputDecoration(
border: OutlineInputBorder(), labelText: "Masukkan Nilai", ),
validator: ((value) {
if (value == null || value.isEmpty) { return 'Masukkan Nilai';
}
return null;
}), ), ),
Container(
margin: EdgeInsets.only(left: 24, right: 24, bottom: 8),
child: TextFormField(
controller: controllerText1, keyboardType: TextInputType.text, decoration: InputDecoration(
border: OutlineInputBorder(), labelText: "Masukkan Nama", ),
validator: ((isi) {
if (isi == null || isi.isEmpty) { return 'Masukkan Nama';
}
return null;
}), ), ),
Container(
margin: EdgeInsets.only(left: 24, right: 24, bottom: 8),
child: TextFormField(
controller: controllerText2, keyboardType: TextInputType.text, decoration: InputDecoration(
border: OutlineInputBorder(), labelText: "Masukkan NIM", ),
validator: ((value) {
if (value == null || value.isEmpty) { return 'Masukkan NIM';
}
return null;
}), ), ),
ElevatedButton(
onPressed: () {
if (_fromkey.currentState!.validate()) {
_mySharedPref.setValue(controllerText.value.text, 'keyValue');
_mySharedPref.setValue(controllerText1.value.text, 'keyValue1');
_mySharedPref.setValue(controllerText2.value.text, 'keyValue2');
controllerText.text = "";
controllerText1.text = "";
controllerText2.text = "";
} },
child: Text("Simpan Data Anda"),
),
Container(
margin: EdgeInsets.only(top: 12, bottom: 8), child: Text(
"Ambil Nilai",
style: TextStyle(fontWeight: FontWeight.bold), ),
),
Container(
margin: EdgeInsets.only(bottom: 8), child: Column(
children: [
Text("nilai : $_value",), Text("nama : $_value1"), Text("nim : $_value2"), ],
) ),
ElevatedButton(
onPressed: () { setState(() {
_mySharedPref.getValue('keyValue').then((value) {
if (value != null) _value = value;
});
_mySharedPref.getValue('keyValue1').then((value) {
if (value != null) _value1 = value;
});
_mySharedPref.getValue('keyValue2').then((value) {
if (value != null) _value2 = value;
});
});
},
child: Text("Ambil"), ),
], ), ), ) ], ), );
} }
Selanjutnya yang terakhir pada file main.dart tambahkan kode seperti berikut ini
import 'package:flutter/material.dart';
import 'package:shared_preferences7/SharedActivity.dart';
void main() => runApp(SharedApp());
class SharedApp extends StatelessWidget { @override
Widget build(BuildContext context) { return MaterialApp(
title: 'Projek Shared Preferences',
theme: ThemeData(primarySwatch: Colors.pink), home: SharedActivity(),
);}}
Setelah semua dirasa lengkap maka kitab isa langsung menjalankan kode tersebut. Untuk
tampilannya dan cara kerjanya kurang lebih akan seperti ini.
Cara Kerja : Isi angka Kemudian klik Simpan data anda, setelah itu Klik Ambil untuk bisa
mengambil nila seperti tampilan dibawah ini
PERTEMUAN 10-15
10.1 Langkah-langkah pembuatan program :
1. Tambahkan kodingan sqflite di pubsc.yaml seperti dibawah ini:
2. sdk: '>=2.18.5 <3.0.0'
3. Kemudian buat folder database pada folder lib dan buat file db_helper.dart didalamnya. Lalu ketikan kode berikut
import 'package:uas/model/mahasiswa.dart';
import 'package:sqflite/sqflite.dart';
import 'package:sqflite/sqlite_api.dart';
import 'package:path/path.dart';
class DbHelper {
static final DbHelper _instance = DbHelper._internal();
static Database? _database;
//INISIALISASI BEBERAPA VARIABLE YANG DIBUTUHKAN final String tableName = 'tableMhs';
final String columnId = 'id';
final String columnNama = 'nama';
final String columnNim = 'nim';
final String columnEmail = 'email';
final String columnProdi = 'prodi';
DbHelper._internal();
factory DbHelper() => _instance;
//CEK APAKAH DATABASE ADA
Future<Database?> get _db async { if (_database != null){
return _database;
}
_database = await _initDb();
return _database;
}
Future<Database?> _initDb() async {
String databasePath = await getDatabasesPath();
String path = join(databasePath, 'mhs_db');
return await openDatabase(path, version: 1, onCreate: _onCreate);
}
//MEMBUAT TABLE DAN FIELD
Future<void> _onCreate(Database db, int version) async {
var sql = 'CREATE TABLE $tableName($columnId INTEGER PRIMARY KEY,' "$columnNama TEXT,"
"$columnNim TEXT,"
"$columnEmail TEXT,"
"$columnProdi TEXT)";
await db.execute(sql);
}
//INSERT KE DATABASE
Future<int?> saveMhs(Mahasiswa mhs) async{
var dbClient = await _db;
return await dbClient!.insert(tableName, mhs.toMap());
}
//READ DATABASE
Future<List?> getAllMhs() async { var dbClient = await _db;
var result = await dbClient!.query(tableName,
columns: [columnId, columnNama, columnProdi, columnNim, columnEmail]);
return result.toList();
}
Future<List?> getAllMahasiswa() async { var dbClient = await _db;
var result = await dbClient!.query(tableName,
columns: [columnId, columnNama, columnProdi, columnNim, columnEmail]);
return result.toList();
}
//UPDATE DATABASE
Future<int?> updateMhs(Mahasiswa mhs) async { var dbClient = await _db;
return await dbClient!.update(tableName, mhs.toMap(), where: '$columnId = ?', whereArgs: [mhs.id]);
}
//HAPUS DATABASE
Future<int?> deleteMhs(int id) async{
var dbClient = await _db;
return await dbClient!.delete(tableName, where: '$columnId = ?', whereArgs:
[id]);
}
}
Kode diatas berfungsi sebagai menyambungkan table-tabel yang kita buat nanti ke databasenya
4. Kemudian membuat file bernama mahasiswa.dart yang berada di folder model yang berada di folder lib. Berikut kodingannya :
class Mahasiswa{
int? id;
String? nama;
String? nim;
String? email;
String? prodi;
Mahasiswa ({this.id, this.nama, this.nim, this.email, this.prodi});
Map<String, dynamic> toMap(){
var map = Map<String, dynamic>();
if (id != null){
map['id'] = id;
}
map['nama'] = nama;
map['nim'] = nim;
map['email'] = email;
map['prodi'] = prodi;
return map;
}
Mahasiswa.fromMap(Map<String, dynamic> map){
this.id = map['id'];
this.nama = map['nama'];
this.nim = map['nim'];
this.email = map['email'];
this.prodi = map['prodi'];
} }
Isi kodingan dari file tersebut adalah pembuatan class dan tipenya yang kita butuhkan
5. Selanjutnya membuat tampilan awal di (list_mahasiswa.dart) didalam folder lib selanjutnya akan diwariskan ke main.dart, Berikut kodenya
import 'package:flutter/material.dart';
import 'package:uas/database/db_helper.dart';
import 'package:uas/edit_mahasiswa.dart';
import 'package:uas/form_mahasiswa.dart';
import 'package:uas/model/mahasiswa.dart';
import 'package:uas/edit_mahasiswa.dart';
import 'package:uas/tabel_mahasiswa.dart';
class Menu extends StatefulWidget { const Menu({super.key});
@override
_MenuState createState() => _MenuState();
}
class _MenuState extends State<Menu> { List<Mahasiswa> listMhs = [];
DbHelper db = DbHelper();
@override
void initState() {
//Menjalankan fungsi getAllMahasiswa pertama kali dimuat _getAllMhs();
super.initState();
}
@override
Widget build(BuildContext context) { return Scaffold(
appBar: AppBar(
title: Center(
child: Text('Data Mahasiswa'), )),
body: ListView.builder(
itemCount: listMhs.length, itemBuilder: (context, index) { Mahasiswa mhs = listMhs[index];
return Padding(
padding: EdgeInsets.only(top: 20), child: ListTile(
leading: Icon(
Icons.person, size: 50, ),
title: Text('${mhs.nim}'), subtitle: Column(
mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 8), child: Text('Nama: ${mhs.nama}'), ),
Padding(
padding: EdgeInsets.only(top: 8), child: Text('Email: ${mhs.email}'), ),
Padding(
padding: EdgeInsets.only(top: 8), child: Text('Prodi: ${mhs.prodi}'), ),
], ),
trailing: FittedBox(
fit: BoxFit.fill, child: Row(
children: <Widget>[
// button edit IconButton(
onPressed: () {
_openFormEdit(mhs);
},
icon: Icon(Icons.edit), ),
// delete button IconButton(
icon: Icon(Icons.delete), onPressed: () {
// membuat dialog // konfirmasi hapus
AlertDialog hapus = AlertDialog(
title: Text('Information'), content: Container(
height: 100, child: Column(
children: <Widget>[
Text('Yakin ingin menghapus data $ {mhs.nama}')
], ), ),
//terdapat 2 button
//jika ya jalankan _deleteMhs() jika tidak maka tutup dialog
actions: [ TextButton(
onPressed: () {
_deleteMhs(mhs, index);
Navigator.pop(context);
},
child: Text('Ya'), ),
TextButton(
child: Text('Tidak'), onPressed: () {
Navigator.pop(context);
}, ) ], );
showDialog(
context: context, builder: (context) => hapus);
},
) ], ), ), ), );
}, ),
// membuat button mengapung dibagian bawah kanan layar
// BUTTON REKAP
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[
FloatingActionButton(
child: Icon(Icons.add), onPressed: () {
AlertDialog hapus = AlertDialog(
title: Text('Information'), content: Container(
height: 100, child: Column(
children: <Widget>[Text('Tambah Data ?')], ),
),
// Terdapat 2 button actions: [
TextButton(
onPressed: () {
Navigator.pop(context);
_openFormCreate();
},
child: Text('Ya'), ),
TextButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Tidak'), )
], );
showDialog(context: context, builder: (context) => hapus);
}, ),
SizedBox(
height: 10, ),
], ), );
}
//mengambil semua data mahasiswa Future<void> _getAllMhs() async { var list = await db.getAllMhs();
//perubahan state
setState(() {
//hapus data listMhs listMhs.clear();
//perulangan var list list!.forEach((mhs) { //masukan data ke list
listMhs.add(Mahasiswa.fromMap(mhs));
});
});
}
// hapus data mhs
Future<void> _deleteMhs(Mahasiswa mhs, int position) async { await db.deleteMhs(mhs.id!);
setState(() {
listMhs.removeAt(position);
});
}
// halaman tambah mahasiswa
Future<void> _openFormCreate() async { var result = await Navigator.push(
context, MaterialPageRoute(builder: (context) => FormMahasiswa()));
if (result == 'save') { await _getAllMhs();
} }
//membuka halaman edit
Future<void> _openFormEdit(Mahasiswa mhs) async { var result = await Navigator.push(context,
MaterialPageRoute(builder: ((context) => FormMahasiswa(mhs:
mhs))));
if (result == 'update') { await _getAllMhs();
} }
// membuka halaman rekap tabel mahasiswa void _openTabelMahasiswa(){
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => TabelMahasiswa()));
}
// membuat snackbar
void snackBar(String value){
ScaffoldMessenger.of(context)
.showSnackBar(new SnackBar(content: new Text(value)));
} }
6. Selanjutnya membuat tampilan pada form input, buat file form_mahasiswa.dart. Berikut kode nya:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:uas/database/db_helper.dart';
import 'package:uas/model/mahasiswa.dart';
class FormMahasiswa extends StatefulWidget { final Mahasiswa? mhs;
FormMahasiswa({this.mhs});
@override
_FormMahasiswaState createState() => _FormMahasiswaState();
}
class _FormMahasiswaState extends State<FormMahasiswa> { DbHelper db = DbHelper();
TextEditingController? nama;
TextEditingController? namaAkhir;
TextEditingController? nim;
TextEditingController? email;
TextEditingController? prodi;
@override
void initState() { nama =
TextEditingController(text: widget.mhs == null ? '' : widget.mhs!.nama);
nim =
TextEditingController(text: widget.mhs == null ? '' : widget.mhs!.nim);
email = TextEditingController(
text: widget.mhs == null ? '' : widget.mhs!.email);
prodi = TextEditingController(
text: widget.mhs == null ? '' : widget.mhs!.prodi);
super.initState();
}
@override
Widget build(BuildContext context) { return Scaffold(
appBar: AppBar(
title: Text('Form Kontak'), ),
body: ListView(
padding: EdgeInsets.all(16.0), children: [
Padding(
padding: const EdgeInsets.only(
top: 20, ),
child: TextField(
inputFormatters: [
FilteringTextInputFormatter.allow(RegExp(r"^[a-zA-Z]+")) ],
controller: nama,
decoration: InputDecoration(
labelText: 'Nama',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8), )),
), ),
Padding(
padding: const EdgeInsets.only(
top: 20, ),
child: TextField(
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(RegExp("[0-9]")), ],
controller: nim,
decoration: InputDecoration(
labelText: 'NIM',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8), )),
), ),
Padding(
padding: const EdgeInsets.only(
top: 20, ),
child: TextField(
controller: email,
keyboardType: TextInputType.emailAddress, decoration: InputDecoration(
hintText: '[email protected]', labelText: 'Email',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8), )),
), ),
Padding(
padding: const EdgeInsets.only(
top: 20, ),
child: TextField(
controller: prodi,
decoration: InputDecoration(
labelText: 'Prodi',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8), )),
), ),
Padding(
padding: const EdgeInsets.only(top: 20), child: ElevatedButton(
child: (widget.mhs == null) ? Text(
'Add',
style: TextStyle(color: Colors.white), )
: Text(
'Update',
style: TextStyle(color: Colors.white), ),
onPressed: () { upsertMahasiswa();
}, ), ) ], ), );
}
Future<void> upsertMahasiswa() async { if (widget.mhs != null) {
//update
await db.updateMhs(Mahasiswa.fromMap({
'id': widget.mhs!.id, 'nama': nama!.text, 'nim': nim!.text, 'email': email!.text, 'prodi': prodi!.text }));
Navigator.pop(context, 'update');
} else { //insert
await db.saveMhs(Mahasiswa(
nama: nama!.text, nim: nim!.text, email: email!.text, prodi: prodi!.text, ));
Navigator.pop(context, 'save');
} } }
Dalam kode tersebut kita akan membuat beberapa form mahasiswa yang terdiri dari Nana, NIM, Email , dan Prodi dengan menggunakan menu dropdown. Didalam kodingan diatas sudah disetting inputan NIM harus angka dan berjumlah 12. Kemudian jika form tidak diisi maka tidak bisa ditambah.
7. Lalu kita buat file untuk mengedit form yang telah diinputkan. Berikut kodenya
import 'package:flutter/material.dart';
import 'package:uas/database/db_helper.dart';
import 'package:uas/form_mahasiswa.dart';
import 'package:uas/model/mahasiswa.dart';
class ListMahasiswa extends StatefulWidget { const ListMahasiswa({super.key});
@override
_ListMahasiswaState createState() => _ListMahasiswaState();
}
class _ListMahasiswaState extends State<ListMahasiswa> { List<Mahasiswa> listMhs = [];
DbHelper db = DbHelper();
@override
void initState() {
//Menjalankan fungsi getAllMahasiswa pertama kali dimuat _getAllMhs();
super.initState();
}
@override
Widget build(BuildContext context) { return Scaffold(
appBar: AppBar(
title: Center(
child: Text('Data Mahasiswa'), )),
body: ListView.builder(
itemCount: listMhs.length, itemBuilder: (context, index) { Mahasiswa mhs = listMhs[index];
return Padding(
padding: EdgeInsets.only(top: 20), child: ListTile(
leading: Icon(
Icons.person, size: 50, ),
title: Text('${mhs.nim}'), subtitle: Column(
mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 8), child: Text('Nama: ${mhs.nama}'), ),
Padding(
padding: EdgeInsets.only(top: 8), child: Text('Email: ${mhs.email}'), ),
Padding(
padding: EdgeInsets.only(top: 8), child: Text('Prodi: ${mhs.prodi}'), ),
], ),
trailing: FittedBox(
fit: BoxFit.fill, child: Row(
children: <Widget>[
// button edit IconButton(
onPressed: () { _openFormEdit(mhs);
},
icon: Icon(Icons.edit), ),
// delete button IconButton(
icon: Icon(Icons.delete), onPressed: () {
// membuat dialog // konfirmasi hapus
AlertDialog hapus = AlertDialog(
title: Text('Information'), content: Container(
height: 100, child: Column(
children: <Widget>[
Text('Yakin ingin menghapus data ${mhs.nama}') ],
), ),
//terdapat 2 button
//jika ya jalankan _deleteMhs() jika tidak maka tutup dialog
actions: [ TextButton(
onPressed: () {
_deleteMhs(mhs, index);
Navigator.pop(context);
},
child: Text('Ya'), ),
TextButton(
child: Text('Tidak'), onPressed: () {
Navigator.pop(context);
}, ) ], );
showDialog(
context: context, builder: (context) => hapus);
}, ) ], ), ), ), );
}, ),
// membuat button mengapung dibagian bawah kanan layar floatingActionButton: FloatingActionButton(
child: Icon(Icons.add), onPressed: () {
_openFormCreate();
}, ), );
}
//mengambil semua data mahasiswa Future<void> _getAllMhs() async { var list = await db.getAllMhs();
//perubahan state setState(() {
//hapus data listMhs listMhs.clear();
//perulangan var list list!.forEach((mhs) { //masukan data ke list
listMhs.add(Mahasiswa.fromMap(mhs));
});
});
}
// hapus data mhs
Future<void> _deleteMhs(Mahasiswa mhs, int position) async { await db.deleteMhs(mhs.id!);
setState(() {
listMhs.removeAt(position);
});
}
// halaman tambah mahasiswa
Future<void> _openFormCreate() async { var result = await Navigator.push(
context, MaterialPageRoute(builder: (context) => FormMahasiswa()));
if (result == 'save') { await _getAllMhs();
} }
//membuka halaman edit
Future<void> _openFormEdit(Mahasiswa mhs) async { var result = await Navigator.push(context,
MaterialPageRoute(builder: ((context) => FormMahasiswa(mhs: mhs))));
if (result == 'update') { await _getAllMhs();
} } }