Cara Membuat Aplikasi CRUD di Web https://idx.dev/ dengan Dart Futter
___________________________________________________________________________________
Kita mulai dari CRUD untuk data sederhana, misalnya daftar tugas (ToDo List). Nanti bisa kamu kembangkan ke data lain.
1. Struktur Data
Kita pakai List<Map<String, dynamic>> untuk simpan data sementara.
2. Full Source Code (main.dart)
Kamu bisa langsung copy semua ini ke file main.dart di idx.dev:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class Task {
String title;
String description;
Task(this.title, this.description);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'CRUD Flutter Web',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: TaskPage(),
debugShowCheckedModeBanner: false,
);
}
}
class TaskPage extends StatefulWidget {
@override
_TaskPageState createState() => _TaskPageState();
}
class _TaskPageState extends State<TaskPage> {
List<Task> tasks = [];
final _titleController = TextEditingController();
final _descController = TextEditingController();
int? editingIndex;
void _resetForm() {
_titleController.clear();
_descController.clear();
editingIndex = null;
}
void _saveTask() {
final title = _titleController.text.trim();
final desc = _descController.text.trim();
if (title.isEmpty || desc.isEmpty) return;
setState(() {
if (editingIndex != null) {
// Update
tasks[editingIndex!] = Task(title, desc);
} else {
// Create
tasks.add(Task(title, desc));
}
});
_resetForm();
}
void _editTask(int index) {
final task = tasks[index];
_titleController.text = task.title;
_descController.text = task.description;
setState(() {
editingIndex = index;
});
}
void _deleteTask(int index) {
setState(() {
tasks.removeAt(index);
});
_resetForm();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('CRUD ToDo - Flutter Web'),
),
body: Padding(
padding: EdgeInsets.all(16),
child: Column(
children: [
TextField(
controller: _titleController,
decoration: InputDecoration(labelText: 'Judul'),
),
TextField(
controller: _descController,
decoration: InputDecoration(labelText: 'Deskripsi'),
),
SizedBox(height: 10),
ElevatedButton(
onPressed: _saveTask,
child: Text(editingIndex != null ? 'Update' : 'Tambah'),
),
SizedBox(height: 20),
Expanded(
child: ListView.builder(
itemCount: tasks.length,
itemBuilder: (_, index) {
final task = tasks[index];
return Card(
child: ListTile(
title: Text(task.title),
subtitle: Text(task.description),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
onPressed: () => _editTask(index),
icon: Icon(Icons.edit),
),
IconButton(
onPressed: () => _deleteTask(index),
icon: Icon(Icons.delete),
),
],
),
),
);
},
),
),
],
),
),
);
}
}
3. Cara Pakai di idx.dev
1. Buka https://idx.dev.
2. Buat project Flutter baru
3. Ganti isi file lib/main.dart dengan kode di atas
4. Jalankan aplikasi dengan klik tombol (Run).
(sumber:chatgpt)
Komentar
Posting Komentar