Penjelasan Coding Aplikasi To Do List Flutter
(Fokus pada Widget & Fungsinya)
Aplikasi ini dibuat menggunakan Flutter dengan bahasa Dart. Flutter menggunakan konsep widget, yaitu komponen UI yang membentuk tampilan aplikasi. Hampir semua yang terlihat di layar adalah widget.
1️⃣ Fungsi main() dan runApp()
void main() {
runApp(MyApp());
}
main() adalah titik awal aplikasi.
runApp() menjalankan widget utama (MyApp) dan menampilkannya ke layar.
👉 Tanpa runApp, aplikasi tidak akan tampil.
2️⃣ Widget MyApp (Root Aplikasi)
class MyApp extends StatelessWidget {
🔹 Kenapa StatelessWidget?
Karena MyApp tidak berubah-ubah, hanya sebagai pembungkus aplikasi.
Widget penting di dalamnya:
MaterialApp(
title: 'To Do List Sederhana',
debugShowCheckedModeBanner: false,
home: TodoPage(),
)
Penjelasan:
MaterialApp → widget utama untuk aplikasi berbasis Material Design
title → judul aplikasi
debugShowCheckedModeBanner: false → menghilangkan tulisan DEBUG
home → halaman pertama yang dibuka (TodoPage)
3️⃣ Widget TodoPage (StatefulWidget)
class TodoPage extends StatefulWidget
🔹 Kenapa StatefulWidget?
Karena:
Data To Do bisa bertambah
Data To Do bisa dihapus
Tampilan harus berubah sesuai data
👉 Semua perubahan data disimpan di State.
4️⃣ Controller dan List Data
TextEditingController todoController = TextEditingController();
List<String> todoList = [];
Fungsi:
TextEditingController → mengambil teks dari TextField
List<String> → menyimpan daftar tugas (To Do)
5️⃣ Widget Scaffold (Kerangka Halaman)
Scaffold(
appBar: AppBar(...),
body: ...
)
Scaffold adalah kerangka utama halaman, berisi:
AppBar
Body
FloatingButton (jika ada)
dll
6️⃣ Widget AppBar
AppBar(
title: Text('To Do List - Sandi'),
centerTitle: true,
)
Fungsi:
Menampilkan judul aplikasi di bagian atas
centerTitle: true → judul berada di tengah
7️⃣ Widget Container (Background Foto)
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/bg.jpg'),
fit: BoxFit.cover,
),
),
)
Fungsi penting:
Container → pembungkus widget
BoxDecoration → mengatur background
AssetImage → memanggil gambar dari folder assets
BoxFit.cover → gambar menyesuaikan layar
📌 Ini bagian utama widget background foto
8️⃣ Layer Transparan (Agar Teks Terbaca)
Container(
color: Colors.black.withOpacity(0.4),
)
Tujuan:
Memberi lapisan gelap
Supaya teks di atas background tetap jelas
Teknik ini sering dipakai di aplikasi modern
9️⃣ Widget Column (Susunan Vertikal)
Column(
children: [...]
)
Menyusun widget dari atas ke bawah
Digunakan untuk:
Input
Tombol
List To Do
🔟 Widget Row (Input + Tombol)
Row(
children: [
Expanded(TextField),
ElevatedButton
],
)
Penjelasan:
Row → susunan horizontal
Expanded → TextField mengisi sisa ruang
ElevatedButton → tombol tambah data
1️⃣1️⃣ Widget TextField
TextField(
controller: todoController,
)
Fungsi:
Input teks dari user
Terhubung dengan TextEditingController
Data diambil saat tombol "Tambah" ditekan
1️⃣2️⃣ Widget Expanded
Expanded(
child: ListView.builder(...)
)
Membuat widget mengisi sisa ruang layar
Penting agar ListView tidak error overflow
1️⃣3️⃣ Widget ListView.builder
ListView.builder(
itemCount: todoList.length,
itemBuilder: ...
)
Fungsi:
Menampilkan data secara dinamis
Jumlah item menyesuaikan isi list
Lebih efisien daripada ListView biasa
1️⃣4️⃣ Widget Card & ListTile
Card(
child: ListTile(
title: Text(todoList[index]),
trailing: IconButton(...)
),
)
Fungsi:
Card → tampilan rapi & modern
ListTile → template item list
IconButton → tombol hapus
1️⃣5️⃣ Fungsi setState()
setState(() {
todoList.add(todoController.text);
});
Fungsi penting:
Memberi tahu Flutter bahwa data berubah
UI otomatis di-refresh
Tanpa setState, data berubah tapi layar tidak update
ini adalah contoh kode saya:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
// ===================
// ROOT APLIKASI
// ===================
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'To Do List Sederhana',
debugShowCheckedModeBanner: false,
home: TodoPage(),
);
}
}
// ===================
// HALAMAN UTAMA
// ===================
class TodoPage extends StatefulWidget {
@override
_TodoPageState createState() => _TodoPageState();
}
class _TodoPageState extends State<TodoPage> {
TextEditingController todoController = TextEditingController();
List<String> todoList = [];
void tambahTodo() {
if (todoController.text.isNotEmpty) {
setState(() {
todoList.add(todoController.text);
todoController.clear();
});
}
}
void hapusTodo(int index) {
setState(() {
todoList.removeAt(index);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'To Do List - Sandi&abdul',
style: TextStyle(fontWeight: FontWeight.bold),
),
centerTitle: true,
backgroundColor: Colors.black87,
),
// ===================
// BODY DENGAN BACKGROUND FOTO
// ===================
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('lib/anas.jpg'),
fit: BoxFit.cover,
),
),
child: Container(
// layer gelap biar teks kebaca
color: Colors.black.withOpacity(0.4),
child: Padding(
padding: EdgeInsets.all(16),
child: Column(
children: [
// ===================
// INPUT + TOMBOL
// ===================
Row(
children: [
Expanded(
child: TextField(
controller: todoController,
decoration: InputDecoration(
hintText: 'Masukkan tugas...',
filled: true,
fillColor: Colors.white.withOpacity(0.9),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
),
),
),
),
SizedBox(width: 10),
ElevatedButton(
onPressed: tambahTodo,
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blueAccent,
padding: EdgeInsets.symmetric(
horizontal: 16,
vertical: 18,
),
),
child: Text('Tambah'),
),
],
),
SizedBox(height: 20),
// ===================
// LIST TO DO
// ===================
Expanded(
child: todoList.isEmpty
? Center(
child: Text(
'Belum ada catatan',
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
)
: ListView.builder(
itemCount: todoList.length,
itemBuilder: (context, index) {
return Card(
color: Colors.white.withOpacity(0.9),
child: ListTile(
title: Text(todoList[index]),
trailing: IconButton(
icon: Icon(
Icons.delete,
color: Colors.red,
),
onPressed: () => hapusTodo(index),
),
),
);
},
),
),
],
),
),
),
),
);
}
}
di pub.yaml tambahkan
assets:
- lib/anas.jpg
📌 Kesimpulan (Untuk Blogger)
Flutter menggunakan sistem widget untuk membangun UI.
Dengan menggabungkan widget seperti Scaffold, Container, Column, Row, dan ListView, aplikasi dapat dibuat secara terstruktur, dinamis, dan responsif.
Background gambar dapat diterapkan menggunakan Container dan BoxDecoration, sehingga tampilan aplikasi menjadi lebih menarik dan modern.
Komentar
Posting Komentar