To Do List Sederhana

🎀 Membuat Aplikasi To Do List Pastel dengan Flutter



Flutter merupakan framework open-source dari Google yang digunakan untuk membangun aplikasi Android, iOS, dan Web dengan satu basis kode.
Pada artikel ini, kita akan membahas pembuatan aplikasi To Do List sederhana dengan tampilan warna pastel yang lembut, serta penjelasan widget-widget Flutter yang digunakan.

Aplikasi ini memiliki fitur:

Menambahkan tugas

Menandai tugas selesai (checkbox)

Menghapus tugas

Tampilan UI yang estetik dan nyaman dilihat

🧱 Struktur Dasar Aplikasi

Aplikasi Flutter dibangun menggunakan konsep widget tree.
Struktur utama aplikasi ini adalah:

MyApp → Root aplikasi

TodoPage → Halaman utama

Scaffold → Kerangka UI

Column & Row → Pengatur layout

TextField, Button, ListView → Interaksi pengguna

🚀 Penjelasan Widget yang Digunakan
1. MaterialApp
MaterialApp(
  debugShowCheckedModeBanner: false,
  home: TodoPage(),
)


Fungsi:

Widget utama yang membungkus seluruh aplikasi

Mengatur navigasi, tema, dan halaman awal

Menghilangkan banner debug agar tampilan lebih bersih

2. StatelessWidget dan StatefulWidget

MyApp menggunakan StatelessWidget
→ karena tampilannya tidak berubah

TodoPage menggunakan StatefulWidget
→ karena data tugas dapat bertambah, diubah, dan dihapus

3. Scaffold
Scaffold(
  backgroundColor: Color(0xFFFFF0F5),
  appBar: AppBar(...),
  body: ...
)


Fungsi:

Menyediakan struktur halaman seperti AppBar dan Body

Mengatur warna latar belakang aplikasi

4. AppBar
AppBar(
  backgroundColor: Color(0xFFFAC5E2),
  title: Text('To Do List tiay en ristyyyy'),
)


Fungsi:

Menampilkan header aplikasi

Biasanya berisi judul halaman

5. Padding
Padding(
  padding: EdgeInsets.all(16),
  child: ...
)


Fungsi:

Memberi jarak antar widget

Membuat UI terlihat lebih rapi dan nyaman

6. Column dan Row

Column
Menyusun widget secara vertikal

Row
Menyusun widget secara horizontal

Digunakan untuk:

Row → Input + tombol tambah

Column → Seluruh konten halaman

7. TextField
TextField(
  controller: _controller,
  decoration: InputDecoration(
    hintText: 'Masukkan tugas...',
  ),
)


Fungsi:

Tempat pengguna memasukkan teks tugas

TextEditingController digunakan untuk mengambil nilai input

8. ElevatedButton
ElevatedButton(
  onPressed: _addTask,
  child: Text('Tambah'),
)


Fungsi:

Tombol untuk menambahkan tugas ke daftar

Saat ditekan akan memanggil fungsi _addTask()

9. ListView.builder
ListView.builder(
  itemCount: _tasks.length,
  itemBuilder: ...
)


Fungsi:

Menampilkan daftar tugas secara dinamis

Efisien untuk data yang dapat berubah

10. Card
Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
  ),
)


Fungsi:

Membungkus item agar terlihat modern dan terpisah

Memberi efek elevasi (bayangan)

11. ListTile
ListTile(
  title: Text(...),
  leading: Checkbox(...),
  trailing: IconButton(...),
)


Fungsi:

Layout siap pakai untuk item list

Memudahkan penempatan teks dan ikon

12. Checkbox
Checkbox(
  value: _tasks[index]['done'],
  onChanged: (_) => _toggleTask(index),
)


Fungsi:

Menandai tugas sudah selesai atau belum

Mengubah tampilan teks menjadi coret saat selesai

13. IconButton
IconButton(
  icon: Icon(Icons.delete),
  onPressed: () => _removeTask(index),
)


Fungsi:

Tombol ikon untuk menghapus tugas

Memberi interaksi langsung pada setiap item

🎨 Desain UI Pastel

Aplikasi ini menggunakan kombinasi warna pastel seperti:

Pink lembut

Ungu muda

Putih

Tujuannya:

Tampilan estetik

Tidak melelahkan mata

Cocok untuk aplikasi produktivitas harian

✅ Kesimpulan

Aplikasi To Do List ini merupakan contoh sederhana penerapan Flutter dengan:

StatefulWidget

Manajemen state sederhana

UI estetik menggunakan widget bawaan Flutter

Aplikasi ini cocok untuk pemula yang ingin memahami dasar Flutter sekaligus membuat tampilan menarik.

Komentar

Posting Komentar

Postingan populer dari blog ini

MERAYAKAN ULANG TAHUN PAK FAJAR

Gambar
  Kebersamaan Hangat dalam Perayaan Ulang Tahun Pak Fajar Suasana kebersamaan dan kehangatan tampak jelas dalam perayaan ulang tahun Pak Fajar yang berlangsung sederhana namun penuh makna. Bertempat di lingkungan sekolah yang asri, Pak Fajar dikelilingi oleh para siswa dan rekan yang turut hadir untuk memberikan kejutan serta doa terbaik. Perayaan ini dilakukan di luar ruangan, di bawah rindangnya pepohonan, menciptakan suasana akrab dan santai. Sebuah kue ulang tahun sederhana menjadi simbol perhatian dan rasa hormat dari para siswa kepada Pak Fajar, yang dikenal sebagai sosok pendidik berdedikasi, ramah, dan inspiratif. Dalam momen tersebut, Pak Fajar menyampaikan rasa terima kasih serta pesan singkat yang memotivasi siswa untuk terus semangat belajar dan menjaga kebersamaan. Kegiatan ini tidak hanya menjadi bentuk perayaan bertambahnya usia, tetapi juga mempererat hubungan antara guru dan siswa. Nilai kebersamaan, rasa kekeluargaan, dan saling menghargai tercermin jelas dalam mo...
Baca selengkapnya

membuat tampilan sederhana

Gambar
  Membuat Tampilan Sederhana dalam Aplikasi Pendahuluan Tampilan (interface) merupakan bagian penting dalam sebuah aplikasi atau website. Tampilan yang sederhana akan memudahkan pengguna dalam memahami dan menggunakan aplikasi tanpa merasa bingung. Oleh karena itu, perancangan tampilan sederhana perlu diperhatikan sejak awal pengembangan. Pengertian Tampilan Sederhana Tampilan sederhana adalah desain antarmuka yang menampilkan elemen seperlunya, tidak berlebihan, mudah dipahami, dan fokus pada fungsi utama. Kesederhanaan bukan berarti tampilan menjadi membosankan, melainkan rapi, jelas, dan nyaman digunakan. Prinsip Membuat Tampilan Sederhana Beberapa prinsip yang perlu diperhatikan dalam membuat tampilan sederhana antara lain: 1. Kejelasan Gunakan teks yang mudah dibaca dan ikon yang jelas agar pengguna langsung memahami fungsi setiap bagian. 2. Konsistensi Gunakan warna, font, dan tata letak yang konsisten di setiap halaman. 3. Warna yang Minimalis Pilih kombinasi warna yang tida...
Baca selengkapnya