Panduan praktis dan terstruktur mengenai panduan to-do list dengan flutter dan supabase: membuat fungsi insert data ke database (part 7) berstandar enterprise. Pelajari konsep, implementasi kode modern, dan tips arsitektur enterprise siap produksi.
Selamat datang di seri tutorial engineering SiHubung! Pada artikel ini, kita akan membedah secara komprehensif implementasi Panduan To-Do List Dengan Flutter Dan Supabase: Membuat Fungsi Insert Data Ke Database (Part 7) Berstandar Enterprise dengan standar kode bersih (clean code), performa tinggi, dan arsitektur siap produksi.

Membangun aplikasi web di era modern memerlukan pondasi yang kokoh. Framework modern memberikan fleksibilitas luar biasa bagi developer untuk menghadirkan fitur kompleks secara cepat tanpa mengabaikan aspek keamanan dan keandalan sistem.

Tahapan Implementasi & Walkthrough Kode

Berikut adalah langkah demi langkah teknis yang dapat Anda ikuti langsung pada codebase Anda:

Tahap 1: Penulisan Kode & Konfigurasi

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:todo_list_supabase/cubit/todo_cubit.dart';
import 'package:todo_list_supabase/model/todo_model.dart';

class TodoScreen extends StatefulWidget {
  const TodoScreen({super.key});

  @override
  State<TodoScreen> createState() => _TodoScreenState();
}

class _TodoScreenState extends State<TodoScreen> {
  final TextEditingController titleController = TextEditingController();
  @override
  void initState() {
    context.read<TodoCubit>().fetchTodos(); // Fetch todos on init
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Todo List')),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: titleController,
                    decoration: const InputDecoration(
                      hintText: 'Tambahkan tugas baru',
                      border: OutlineInputBorder(),
                    ),
                    onSubmitted: (value) {
                      _addTodo(); // Call the method to add todo
                    },
                  ),
                ),
                const SizedBox(width: 8),
                ElevatedButton(
                  onPressed: () {
                    _addTodo(); // Call the method to add todo
                  },
                  child: const Text('Tambah'),
                ),
              ],
            ),
          ),
          Expanded(
            child: RefreshIndicator(
              onRefresh: () async {
                // TODO: Refresh Data Todo List
              },
              child: BlocBuilder<TodoCubit, List<TodoModel>>(
                builder: (context, state) {
                  final todos = state;
                  if (todos.isEmpty) {
                    return const Center(
                      child: Text(
                        'Belum ada tugas',
                        style: TextStyle(fontSize: 18),
                      ),
                    );
                  }
                  return ListView.builder(
                    itemCount: todos.length, // TODO: Ganti dengan jumlah todo
                    itemBuilder: (context, index) {
                      final todo = todos[index];
                      return ListTile(
                        title: Text(
                          todo.title,
                          style: TextStyle(
                            decoration: todo.isDone
                                ? TextDecoration.lineThrough
                                : null,
                          ),
                        ), // TODO: Ganti dengan data todo
                        leading: Checkbox(
                          value: todo.isDone,
                          onChanged: (_) {
                            // TODO: Update status todo
                          },
                        ),
                        trailing: IconButton(
                          icon: const Icon(Icons.delete, color: Colors.red),
                          onPressed: () {
                            // TODO: Hapus data todo
                          },
                        ),
                      );
                    },
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }

  void _addTodo() {
    if (titleController.text.trim().isNotEmpty) {
      context.read<TodoCubit>().addTodo(titleController.text.trim());
      titleController.clear();
      FocusScope.of(context).unfocus();
    }
  }
}

Tahap 2: Penulisan Kode & Konfigurasi

final TextEditingController titleController = TextEditingController();

Tahap 3: Penulisan Kode & Konfigurasi

void _addTodo() {
    if (titleController.text.trim().isNotEmpty) {
      context.read<TodoCubit>().addTodo(titleController.text.trim());
      titleController.clear();
      FocusScope.of(context).unfocus();
    }
  }

Tahap 4: Penulisan Kode & Konfigurasi

Padding(
	padding: const EdgeInsets.all(16),
  child: Row(
  children: [
  	Expanded(
  		child: TextField(
  			controller: titleController,
  			decoration: const InputDecoration(
  			hintText: 'Tambahkan tugas baru',
  			border: OutlineInputBorder(),
  			),
  			onSubmitted: (value) {
  				_addTodo(); // Call the method to add todo
  			},
  		),
  	),
  	const SizedBox(width: 8),
  	ElevatedButton(
  		onPressed: () {
  			_addTodo(); // Call the method to add todo
  		},
  		child: const Text('Tambah'),
			),
		],
	),
),
💡 Tips Rekayasa Perangkat Lunak (SiHubung Engineering Best Practice)

Selalu gunakan pendekatan deklaratif, validasi input seawal mungkin di boundary layer, dan lakukan logging terstruktur untuk memudahkan observability ketika sistem dijalankan di lingkungan cloud produksi.

Kesimpulan

Dengan mengikuti langkah-langkah terstruktur di atas, implementasi modul Anda akan jauh lebih rapi, aman dari bug umum, serta siap diskalakan ke lingkungan produksi.

Nantikan artikel tutorial praktis lainnya seputar fullstack development, microservices, dan otomasi AI di Blog Engineering SiHubung. Selamat mencoba!