Panduan praktis dan terstruktur mengenai panduan to-do list dengan flutter dan supabase: menampilkan data todo list (part 6) 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: Menampilkan Data Todo List (Part 6) 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';
class TodoScreen extends StatefulWidget {
const TodoScreen({super.key});
@override
State<TodoScreen> createState() => _TodoScreenState();
}
class _TodoScreenState extends State<TodoScreen> {
@override
void initState() {
// TODO: Load Data Todo List
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(
decoration: const InputDecoration(
hintText: 'Tambahkan tugas baru',
border: OutlineInputBorder(),
),
onSubmitted: (value) {},
),
),
const SizedBox(width: 8),
ElevatedButton(
onPressed: () {
// TODO: Tambah Data Todo List
},
child: const Text('Tambah'),
),
],
),
),
Expanded(
child: RefreshIndicator(
onRefresh: () async {
// TODO: Refresh Data Todo List
},
child: ListView.builder(
itemCount: 0, // TODO: Ganti dengan jumlah todo
itemBuilder: (context, index) {
return ListTile(
title: Text(
'Todo Item $index',
), // TODO: Ganti dengan data todo
trailing: Checkbox(
value: false, // TODO: Ganti dengan status isDone
onChanged: (value) {
// TODO: Update Data Todo List
},
),
);
},
),
),
),
],
),
);
}
}Tahap 2: Penulisan Kode & Konfigurasi
import 'package:flutter/material.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:supabase_flutter/supabase_flutter.dart';
import 'package:todo_list_supabase/screen/todo_screen.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await dotenv.load(fileName: ".env");
final String supabaseUrl = dotenv.env['SUPABASE_URL'] ?? '';
final String supabaseAnonKey = dotenv.env['ANON_KEY'] ?? '';
await Supabase.initialize(url: supabaseUrl, anonKey: supabaseAnonKey);
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
),
home: const TodoScreen(),
);
}
}Tahap 3: Penulisan Kode & Konfigurasi
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:supabase_flutter/supabase_flutter.dart';
import 'package:todo_list_supabase/cubit/todo_cubit.dart';
import 'package:todo_list_supabase/screen/todo_screen.dart';
import 'package:todo_list_supabase/service/todo_service.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await dotenv.load(fileName: ".env");
final String supabaseUrl = dotenv.env['SUPABASE_URL'] ?? '';
final String supabaseAnonKey = dotenv.env['ANON_KEY'] ?? '';
await Supabase.initialize(url: supabaseUrl, anonKey: supabaseAnonKey);
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final TodoService service = TodoService();
MyApp({super.key});
@override
Widget build(BuildContext context) {
return BlocProvider(
create: (context) => TodoCubit([], service),
child: MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
),
home: const TodoScreen(),
),
);
}
}Tahap 4: Penulisan Kode & Konfigurasi
class MyApp extends StatelessWidget {
final TodoService service = TodoService();
MyApp({super.key});
@override
Widget build(BuildContext context) {
return BlocProvider(
create: (context) => TodoCubit([], service),
child: MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
),
home: const TodoScreen(),
),
);
}
}Tahap 5: 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> {
@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(
decoration: const InputDecoration(
hintText: 'Tambahkan tugas baru',
border: OutlineInputBorder(),
),
onSubmitted: (value) {},
),
),
const SizedBox(width: 8),
ElevatedButton(
onPressed: () {
// TODO: Tambah Data Todo List
},
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
},
),
);
},
);
},
),
),
),
],
),
);
}
}Tahap 6: Penulisan Kode & Konfigurasi
@override
void initState() {
context.read<TodoCubit>().fetchTodos(); // Fetch todos on init
super.initState();
}Tahap 7: Penulisan Kode & Konfigurasi
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
},
),
);
},
);
},
),
💡 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!
