Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan membuat apliaksi kontak dengan menggunakan database local storage pada flutter. Ayo ikuti selengkapnya di bawah ini.
Sebelumnya saya sudah membuat tutorial cara membuat aplikasi catatan pemasukan dan pengeluaran di https://www.sahretech.com/2023/09/membuat-aplikasi-pemasukan-dan.html. Penjelasannya hampir sama, menggunakan local storage tapi berbeda study kasus. Kita akan membuat aplikasi catatan kontak yang menyimpan data nama, nomor telpon, email, nama facebook, dan nama instagram. Pada tampilan depan terdapat avatar, sebagian data dan icon edit dan hapus. Scroll ke bagian bawah untuk melihat hasilnya.
| Baca Artikel Lain ✨ |
| 📰 1. Membuat Aplikasi Berita dari Blogger API di Flutter read more |
| 📰 2. Menampilkan Video Youtube Populer di Aplikasi Flutter dengan Youtube API read more |
|
📰 3.Membuat Aplikasi Berita dengan API Wordpress read more |
|
📰 4. Menggunakan State Management Provider pada Aplikasi Todo List
Flutter read more |
Cara Membuat Aplikasi Kontak dengan Local Storage
2. Buka file pubspec.yaml. Lalu tambahkan shared_preferences: ^2.0.8. Paket shared_preferences adalah paket yang digunakan untuk menyimpan data ke dalam local storage. Ikuti cara pasangnya di bawah ini.
|
| Menambahkan Paket |
3. Buat file baru dengan nama contact_service.dart di dalam folder lib. File ini berfungsi untuk menampung method create, read, update, dan delete. Ikuti scriptnya di bawah ini.
import 'dart:convert';
import 'package:shared_preferences/shared_preferences.dart';
class ContactService {
//method untuk mengambil data dari local storage
getData() async {
//inisiasi class untuk menggunakan paket penyimpanan local storage
SharedPreferences prefs = await SharedPreferences.getInstance();
//mengambil list/array contacts di local storage
List<String> itemStrings = prefs.getStringList('contacts') ?? [];
//mapping data
return itemStrings
.map((item) => json.decode(item) as Map<String, dynamic>)
.toList();
}
//method untuk menyimpan data ke local storage
saveData(
String name,
String gender,
String email,
String phone,
String facebook,
String instagram
) async {
//inisiasi class untuk menggunakan paket penyimpanan local storage
SharedPreferences prefs = await SharedPreferences.getInstance();
//mengambil data dari localstorage dari list contacts
List<String> dataList = prefs.getStringList('contacts') ?? [];
//membuat variabel objek dengan data yang diisi melalui form
Map<String, String> newData = {
'id': DateTime.now().millisecondsSinceEpoch.toString(),
'name': name,
'gender': gender,
'email': email,
'phone': phone,
'facebook': facebook,
'instagram': instagram
};
dataList.add(jsonEncode(newData)); // Menambahkan data baru ke dalam daftar
prefs.setStringList(
'contacts',
dataList,
); // Menyimpan daftar data ke local storage
}
}3. Buat file baru dengan nama add_form.dart di dalam folder lib. Ikuti scriptnya seperti gambar di bawa ini. Script ini akan menampilkan form tambah data.
// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';
import 'package:flutter_local_storage/contact_service.dart';
import 'main.dart';
class AddForm extends StatefulWidget {
const AddForm({super.key});
@override
State<AddForm> createState() => _AddFormState();
}
class _AddFormState extends State<AddForm> {
//inisialisasi variabel
final _formKey = GlobalKey<FormState>();
TextEditingController name = TextEditingController();
TextEditingController email = TextEditingController();
TextEditingController gender = TextEditingController();
TextEditingController phone = TextEditingController();
TextEditingController facebook = TextEditingController();
TextEditingController instagram = TextEditingController();
//inisialisasi class
ContactService contactService = ContactService();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Transaction Form'),
),
body: SingleChildScrollView(
padding: EdgeInsets.all(16),
child: Form(
// key adalah kunci unik untuk mengidentifikasi suatu form
// di bawah key ini tambahkan widget sesuai selera kalian
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TextFormField(
decoration: InputDecoration(labelText: 'Name'),
controller: name,
validator: (value) {
if (value!.isEmpty) {
return 'Enter the name';
}
return null;
},
),
SizedBox(
height: 15,
),
//bentuk dropdown select dengan dua pilihan
DropdownButtonFormField<String>(
items: ['Male', 'Female'].map((String option) {
return DropdownMenuItem<String>(
value: option,
child: Text(option),
);
}).toList(),
onChanged: (String? newValue) {
setState(() {
gender.text = newValue!;
});
},
decoration: InputDecoration(
labelText: 'Gender',
),
),
SizedBox(
height: 15,
),
TextFormField(
decoration: InputDecoration(labelText: 'Email'),
controller: email,
validator: (value) {
if (value!.isEmpty) {
return 'Enter the email';
}
return null;
},
),
SizedBox(
height: 15,
),
TextFormField(
decoration: InputDecoration(labelText: 'Phone'),
controller: phone,
keyboardType: TextInputType.number,
validator: (value) {
if (value!.isEmpty) {
return 'Enter the phone number';
}
return null;
},
),
SizedBox(
height: 15,
),
TextFormField(
decoration: InputDecoration(labelText: 'Facebook'),
controller: facebook,
validator: (value) {
if (value!.isEmpty) {
return 'Enter the email';
}
return null;
},
),
SizedBox(
height: 15,
),
TextFormField(
decoration: InputDecoration(labelText: 'Instagram'),
controller: instagram,
validator: (value) {
if (value!.isEmpty) {
return 'Enter the instagram';
}
return null;
},
),
SizedBox(
height: 15,
),
ElevatedButton(
onPressed: () {
//jika validasi berhasil maka jalankan perintah di bawahnya
//jika tidak maka tampilkan pesan kesalahan di tiap formnya
if (_formKey.currentState!.validate()) {
contactService.saveData(
name.text,
gender.text,
email.text,
phone.text,
facebook.text,
instagram.text,
);
Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(
builder: (context) =>
HomeScreen(), // Gantilah dengan widget MainScreen Anda.
),
(Route<dynamic> route) =>
false, // Ini akan menghapus semua halaman sebelumnya dari tumpukan navigasi.
);
}
},
child: Text('Submit Button'),
)
],
),
),
),
);
}
}4. Buka file main.dart di dalam folder lib. Edit dengan script di bawah ini. File ini akan menampilkan data berbentuk list dengan menggunakan listtile.
// ignore_for_file: prefer_const_constructors, prefer_const_literals_to_create_immutables, sort_child_properties_last
import 'package:flutter/material.dart';
import 'add_form.dart';
import 'contact_service.dart';
import 'edit_form.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: HomeScreen());
}
}
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
//inisialisasi variabel
ContactService contactService =
ContactService(); //inisialisai class transaksi
List data = []; //digunakan untuk menampung data yang diambil
bool isLoading = true;
@override
void initState() {
super.initState();
//menjalankan data pertama kali
getData();
}
//memanggil data
void getData() async {
setState(() {
isLoading = true;
});
//menggunakan method getData pada class transact ion
List getData = await contactService.getData();
setState(() {
data = getData;//reversed.toList() akan mengurutkan data DESC
isLoading = false;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Apps'),
),
body: isLoading
? Center(
child:
CircularProgressIndicator(), // Menampilkan Circular Progress Indicator
)
: ListView.builder(
itemCount: data.length,
itemBuilder: (_, item) {
return Column(
children: [
ListTile(
contentPadding: EdgeInsets.only(
top: 10,
left: 10,
right: 10,
),
leading: Image(
image: NetworkImage(
'https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_1280.png',
),
fit: BoxFit.cover,
),
title: Text(
'${data[item]['name']}',
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
subtitle: Text(
'Phone: ${data[item]['phone']} \n'
'Facebook: ${data[item]['facebook']} \n'
'Instgram: ${data[item]['instagram']} \n',
),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.edit),
SizedBox(
width: 8,
),
Icon(Icons.delete)
],
),
),
Divider()
],
);
},
),
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AddForm(),
),
);
},
child: Icon(Icons.add), // Ikona FAB
backgroundColor: Colors.blue, // Warna latar belakang FAB
),
);
}
}5. Sekarang jalankan aplikasi dengan emulator. Jika berhasil, maka tampilannya akan terlihat seperti gambar di bawah ini.
Saat ini tombol edit dan delete belum menyala. Kalian bisa mengikuti tutorial lengkapnnya di https://sahrebook.com/produk-detail/bikin-aplikasi-android-mudah-tutorial-flutter-5-mini-apps-part-2. Di dalam ebook tersebut kalian juga akan mempelajari dasar-dasar flutter dan study kasus 4 aplikasi lainnya.
 |
| Ebook Flutter |
Sekian tutorial singkat kita kali ini tentang cara membuat aplikasi kontak dengan local storage di flutter. Semoga tutorial singkat ini bermanfaat. Jika ada yang ingin ditanyakan, silahkan tanya langsung di kolom komentar di bawah ini. Sekian dan terima kasih.
No comments
Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik
Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi