Halo kali ini saya akan belajar penggunaan Flutter untuk Crud data, kita akan melakukannya scara bertahap
1. Membuat ListView Sederhana :
pada halaman HalListView.dart :
import 'package:flutter/material.dart';
class HalListView extends StatefulWidget {
@override
_HalListView createState() => _HalListView();
}
class _HalListView extends State<HalListView> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: <Widget>[
ListTile(
title: Text('Item 1'),
),
ListTile(
title: Text('Item 2'),
),
// Tambahkan lebih banyak item sesuai kebutuhan
],
),
);
}
}
2. Menambahkan Pencarian di ListView :
import 'package:flutter/material.dart';
class HalListView extends StatefulWidget {
@override
_HalListViewState createState() => _HalListViewState();
}
class _HalListViewState extends State<HalListView> {
TextEditingController _controller = TextEditingController();
//List<String> _data = List.generate(100, (index) => 'Item $index');
List<String> _data = [
'Item 1',
'Item 2',
'Item 3',
];
List<String> _filteredData = [];
@override
void initState() {
super.initState();
_filteredData.addAll(_data);
}
void _filterData(String query) {
_filteredData.clear();
if (query.isNotEmpty) {
_data.forEach((item) {
if (item.toLowerCase().contains(query.toLowerCase())) {
_filteredData.add(item);
}
});
} else {
_filteredData.addAll(_data);
}
setState(() {});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: TextField(
controller: _controller,
onChanged: _filterData,
decoration: InputDecoration(
hintText: 'Search...',
border: InputBorder.none,
),
),
),
body: ListView.builder(
itemCount: _filteredData.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(_filteredData[index]),
);
},
),
);
}
}
pada code di atas, fitur pencarian sudah aktif, selanjutnya kita akan menambahkan fitur tambah data
3. Fitur add data
HalListView.dart :
import 'package:flutter/material.dart';
class HalListView extends StatefulWidget {
@override
_HalListViewState createState() => _HalListViewState();
}
class _HalListViewState extends State<HalListView> {
TextEditingController _controller = TextEditingController();
List<String> _data = [
'Item 1',
'Item 2',
'Item 3',
];
List<String> _filteredData = [];
@override
void initState() {
super.initState();
_filteredData.addAll(_data);
}
void _filterData(String query) {
_filteredData.clear();
if (query.isNotEmpty) {
_data.forEach((item) {
if (item.toLowerCase().contains(query.toLowerCase())) {
_filteredData.add(item);
}
});
} else {
_filteredData.addAll(_data);
}
setState(() {});
}
void _addItem() {
setState(() {
// Cek apakah ada data yang ada di dalam _data
if (_data.isNotEmpty) {
// Tambahkan data yang baru ke dalam _filteredData
_filteredData.add('Item ${_data.length + 1}');
// Update _data dengan menambahkan satu data baru saja
_data.add('Item ${_data.length + 1}');
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: TextField(
controller: _controller,
onChanged: _filterData,
decoration: InputDecoration(
hintText: 'Pencarian..',
border: InputBorder.none,
),
),
actions: [
IconButton(
icon: Icon(Icons.add),
onPressed: _addItem,
),
],
),
body: ListView.builder(
itemCount: _filteredData.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(_filteredData[index]),
);
},
),
);
}
}
Ketika kita menekan tombol Tambah, maka otomatis data dalam listView akan bertambah
4. Menambahkan fitur edit dan hapus,
Maksudnya ketika kita menekan tombol item dari list, maka otomatis data tersebut akan Diedit atau dihapus
HalListView.dart :
import 'package:flutter/material.dart';
class HalListView extends StatefulWidget {
@override
_HalListViewState createState() => _HalListViewState();
}
class _HalListViewState extends State<HalListView> {
TextEditingController _controller = TextEditingController();
List<String> _data = [];
List<String> _filteredData = [];
@override
void initState() {
super.initState();
_filteredData.addAll(_data);
}
void _filterData(String query) {
_filteredData.clear();
if (query.isNotEmpty) {
_data.forEach((item) {
if (item.toLowerCase().contains(query.toLowerCase())) {
_filteredData.add(item);
}
});
} else {
_filteredData.addAll(_data);
}
setState(() {});
}
void _addItem() {
setState(() {
// Cek apakah ada data yang ada di dalam _data
//if (_data.isNotEmpty) {
// Tambahkan data yang baru ke dalam _filteredData
_filteredData.add('Item ${_data.length + 1}');
// Update _data dengan menambahkan satu data baru saja
_data.add('Item ${_data.length + 1}');
//}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: TextField(
controller: _controller,
onChanged: _filterData,
decoration: InputDecoration(
hintText: 'Pencarian..',
border: InputBorder.none,
),
),
actions: [
IconButton(
icon: Icon(Icons.add),
onPressed: _addItem,
),
],
),
body: ListView.builder(
itemCount: _filteredData.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(_filteredData[index]),
onTap: () {
print("data ");
print(index);
print(_data[index]);
/* Untuk menghapus data
setState(() {
_filteredData.removeAt(index);
_data.removeAt(index);
});
*/
//untuk merubah data
setState(() {
_filteredData[2] = "diruaba";
_data[2] = "diruaba";
});
},
);
},
),
);
}
}
5. Membuat CRUD lebih lengkap
Kali ini kita akan membuat code di atas agar lebih mudah digunakan untuk crud
HalListView.dart :
import 'package:flutter/material.dart';
class HalListView extends StatefulWidget {
@override
_HalListViewState createState() => _HalListViewState();
}
class _HalListViewState extends State<HalListView> {
TextEditingController _controller = TextEditingController();
TextEditingController _controllerTambah = TextEditingController();
List<String> _data = [];
List<String> _filteredData = [];
@override
void initState() {
super.initState();
_filteredData.addAll(_data);
}
void _filterData(String query) {
_filteredData.clear();
if (query.isNotEmpty) {
_data.forEach((item) {
if (item.toLowerCase().contains(query.toLowerCase())) {
_filteredData.add(item);
}
});
} else {
_filteredData.addAll(_data);
}
setState(() {});
}
void _addItem() {
showDialog(
context: context,
builder: (BuildContext context) {
String newItem = '';
return AlertDialog(
title: Text('Tambahkan Item'),
content: TextField(
onChanged: (value) {
newItem = value;
},
controller: _controllerTambah,
decoration: InputDecoration(
hintText: 'Masukkan item baru...',
),
),
actions: <Widget>[
GestureDetector(
onTap: () {
Navigator.of(context).pop();
},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
color: Colors.grey[300],
child: Text('Cancel'),
),
),
SizedBox(width: 8),
GestureDetector(
onTap: () {
setState(() {
_filteredData.add(newItem);
_data.add(newItem);
_controllerTambah.text = "";
});
Navigator.of(context).pop();
},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
color: Colors.blue,
child: Text(
'Add',
style: TextStyle(color: Colors.white),
),
),
),
],
);
},
);
}
void _removeItem(int id) {
print("Remove item");
print(id);
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Hapus Item'),
content: Text('Hapus Item'),
actions: <Widget>[
GestureDetector(
onTap: () {
Navigator.of(context).pop();
},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
color: Colors.grey[300],
child: Text('Cancel'),
),
),
SizedBox(width: 8),
GestureDetector(
onTap: () {
setState(() {
_filteredData.removeAt(id);
_data.removeAt(id);
});
Navigator.of(context).pop();
},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
color: Colors.blue,
child: Text(
'Hapus',
style: TextStyle(color: Colors.white),
),
),
),
],
);
},
);
}
void _editItem(int id) {
print("Edit item");
print(id);
showDialog(
context: context,
builder: (BuildContext context) {
String newItem = '';
_controllerTambah.text = _data[id];
return AlertDialog(
title: Text('Edit Item'),
content: TextField(
onChanged: (value) {
newItem = value;
},
controller: _controllerTambah,
decoration: InputDecoration(
hintText: 'Masukkan item edit...',
),
),
actions: <Widget>[
GestureDetector(
onTap: () {
Navigator.of(context).pop();
},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
color: Colors.grey[300],
child: Text('Cancel'),
),
),
SizedBox(width: 8),
GestureDetector(
onTap: () {
setState(() {
//_filteredData.removeAt(id);
//_data.removeAt(id);
_filteredData[id] = _controllerTambah.text;
_data[id] = _controllerTambah.text;
_controllerTambah.text = "";
});
Navigator.of(context).pop();
},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
color: Colors.blue,
child: Text(
'Edit',
style: TextStyle(color: Colors.white),
),
),
),
],
);
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: TextField(
controller: _controller,
onChanged: _filterData,
decoration: InputDecoration(
hintText: 'Pencarian..',
border: InputBorder.none,
),
),
actions: [
IconButton(
icon: Icon(Icons.add),
onPressed: _addItem,
),
],
),
body: ListView.builder(
itemCount: _filteredData.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(_filteredData[index]),
onTap: () {
print("Data: ${_data[index]}");
},
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: Icon(Icons.edit),
onPressed: () {
// Tambahkan logika untuk aksi edit di sini
print("Edit item: ${_data[index]}");
_editItem(index);
},
),
IconButton(
icon: Icon(Icons.delete),
onPressed: () {
// Tambahkan logika untuk aksi hapus di sini
print("Hapus item: ${_data[index]}");
_removeItem(index);
},
),
],
),
);
},
),
);
}
}
