To do list part 2
link flutter nya : https://dehira.blogspot.com/2026/02/to-do-list.html
Membuat To Do List Flutter dengan Background Pink Pastel
Pada artikel ini kita akan membuat aplikasi **To Do List sederhana menggunakan Flutter**, dengan tampilan yang lebih menarik karena **bagian bawah aplikasi diberi warna background pink pastel**.
Cocok banget buat pemula yang lagi belajar UI Flutter atau tugas kuliah.
---
## 🔧 Kode Lengkap Aplikasi Flutter
```dart
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 - zallea-euis',
style: TextStyle(fontWeight: FontWeight.bold),
),
centerTitle: true,
backgroundColor: Colors.pink[300],
),
body: Padding(
padding: EdgeInsets.all(16),
child: Column(
children: [
// INPUT + BUTTON
Row(
children: [
Expanded(
child: TextField(
controller: todoController,
decoration: InputDecoration(
hintText: 'Masukkan tugas...',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
),
),
),
SizedBox(width: 10),
ElevatedButton(
onPressed: tambahTodo,
style: ElevatedButton.styleFrom(
backgroundColor: Colors.pinkAccent,
),
child: Text('Tambah'),
),
],
),
SizedBox(height: 20),
// BAGIAN BAWAH DENGAN BACKGROUND PINK PASTEL
Expanded(
child: Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.pink.shade50,
borderRadius: BorderRadius.circular(16),
),
child: todoList.isEmpty
? Center(
child: Text(
'Belum ada catatan',
style: TextStyle(
color: Colors.pink[300],
fontSize: 16,
),
),
)
: ListView.builder(
itemCount: todoList.length,
itemBuilder: (context, index) {
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
child: ListTile(
title: Text(todoList[index]),
trailing: IconButton(
icon: Icon(
Icons.delete,
color: Colors.red,
),
onPressed: () => hapusTodo(index),
),
),
);
},
),
),
),
],
),
),
);
}
}
```
---
## 🧩 Penjelasan Widget Flutter yang Digunakan
### 1️⃣ `MaterialApp`
Widget utama yang menjadi kerangka aplikasi Flutter.
Di sini kita mengatur:
* `title` → judul aplikasi
* `debugShowCheckedModeBanner` → menghilangkan tulisan DEBUG
* `home` → halaman pertama yang ditampilkan
---
### 2️⃣ `Scaffold`
Digunakan sebagai struktur dasar layar aplikasi.
Widget ini menyediakan:
* `AppBar`
* `body`
* (bisa juga `floatingActionButton`, `drawer`, dll)
---
### 3️⃣ `AppBar`
Bagian header aplikasi.
Digunakan untuk menampilkan judul aplikasi dengan warna **pink pastel** agar selaras dengan tema.
---
### 4️⃣ `TextField`
Digunakan untuk input tugas.
* `controller` → mengambil teks dari input
* `hintText` → teks petunjuk
* `OutlineInputBorder` → membuat input terlihat rapi dan modern
---
### 5️⃣ `TextEditingController`
Berfungsi untuk:
* Mengambil isi TextField
* Mengosongkan input setelah tombol ditekan
---
### 6️⃣ `Row` dan `Column`
Digunakan untuk menyusun widget:
* `Row` → menyusun input dan tombol secara horizontal
* `Column` → menyusun seluruh konten secara vertikal
---
### 7️⃣ `Expanded`
Membuat widget mengisi sisa ruang layar.
Pada aplikasi ini, `Expanded` dipakai agar **bagian bawah (list tugas)** memenuhi area yang tersedia.
---
### 8️⃣ `Container`
Digunakan untuk:
* Memberi **background pink pastel**
* Padding
* Border radius
Di sinilah nuansa warna pink lembut diterapkan.
---
### 9️⃣ `ListView.builder`
Digunakan untuk menampilkan daftar tugas secara dinamis.
Keuntungannya:
* Lebih hemat memori
* Cocok untuk data yang bisa bertambah
---
### 🔟 `Card` & `ListTile`
Digunakan agar setiap tugas tampil rapi.
* `Card` → tampilan seperti kartu
* `ListTile` → layout cepat untuk teks + ikon
---
## 🎯 Penutup
Dengan kombinasi widget sederhana, kita bisa membuat aplikasi Flutter yang:
* Fungsional
* Rapi
* Estetik dengan nuansa **pink pastel**
Aplikasi ini cocok untuk:
* Pemula Flutter
* Tugas kuliah
* Contoh UI sederhana tapi menarik
Komentar
Posting Komentar