Membuat To Do List Sederhana

 

Membuat To Do List Sederhana di DartPad


🧩 Pengertian

Aplikasi To-Do List adalah aplikasi sederhana yang digunakan untuk mencatat, menandai, dan mengatur daftar tugas yang harus diselesaikan.
Dalam konteks ini, aplikasi dibuat menggunakan Flutter, yaitu framework dari Google yang digunakan untuk membuat aplikasi mobile dengan tampilan menarik dan performa tinggi, hanya dengan satu kode program (Dart).


💡 Pelajaran yang Dapat Diambil

  1. Belajar Logika Pemrograman Dasar Flutter — seperti menambah, menghapus, dan memperbarui data menggunakan setState().

  2. Mengenal Struktur UI Flutter — bagaimana menyusun tampilan dengan layout (Column, Row, Container, dll).

  3. Meningkatkan Kreativitas Desain — membuat tampilan aplikasi yang menarik dengan warna, shadow, dan gradien.

  4. Belajar Interaksi dengan Pengguna — seperti menekan tombol, mencentang tugas, atau mengetik di TextField.

🌱 Manfaat

  1. Membantu Manajemen Waktu — aplikasi ini membantu kita mengatur jadwal dan mencatat hal-hal penting agar tidak lupa.

  2. Melatih Disiplin dan Tanggung Jawab — dengan mencatat dan menandai tugas yang selesai, kita belajar menjadi lebih teratur.

  3. Sebagai Proyek Latihan Pemrograman — cocok untuk pemula yang ingin memahami konsep dasar Flutter.

  4. Bisa Dikembangkan Lebih Lanjut — aplikasi ini bisa diperluas menjadi versi profesional dengan fitur notifikasi, penyimpanan data, atau login.



ini gambarnya :





ini codingannya jika pengen tinggal salin aja :


import 'package:flutter/material.dart';

void main() => runApp(const TodoApp());

class TodoApp extends StatelessWidget {
  const TodoApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Todo List App',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        fontFamily: 'Poppins',
        primaryColor: const Color(0xFF4D9EF6),
      ),
      home: const TodoHomePage(),
    );
  }
}

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

  @override
  State<TodoHomePage> createState() => _TodoHomePageState();
}

class _TodoHomePageState extends State<TodoHomePage> {
  final List<Map<String, dynamic>> _tasks = [];
  final TextEditingController _controller = TextEditingController();

  void _addTask() {
    if (_controller.text.trim().isEmpty) return;
    setState(() {
      _tasks.add({'title': _controller.text.trim(), 'done': false});
      _controller.clear();
    });
  }

  void _toggleTask(int index) {
    setState(() {
      _tasks[index]['done'] = !_tasks[index]['done'];
    });
  }

  void _deleteTask(int index) {
    setState(() {
      _tasks.removeAt(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF2F6FC),
      appBar: AppBar(
        backgroundColor: const Color(0xFF4D9EF6),
        elevation: 0,
        centerTitle: true,
        title: const Text(
          "Todo List App",
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
            letterSpacing: 0.5,
          ),
        ),
      ),

      // Floating Button
      floatingActionButton: FloatingActionButton(
        backgroundColor: const Color(0xFF4D9EF6),
        onPressed: _addTask,
        child: const Icon(Icons.add, size: 28, color: Colors.white),
      ),

      body: Column(
        children: [
          // Header biru seperti gambar
          Container(
            height: 140,
            width: double.infinity,
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                colors: [Color(0xFF4D9EF6), Color(0xFF78C8F9)],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
              ),
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(30),
                bottomRight: Radius.circular(30),
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.all(20),
              child: TextField(
                controller: _controller,
                decoration: InputDecoration(
                  hintText: "Tambah tugas baru...",
                  filled: true,
                  fillColor: Colors.white,
                  suffixIcon: IconButton(
                    icon: const Icon(Icons.send, color: Color(0xFF4D9EF6)),
                    onPressed: _addTask,
                  ),
                  contentPadding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(15),
                    borderSide: BorderSide.none,
                  ),
                ),
                onSubmitted: (_) => _addTask(),
              ),
            ),
          ),

          // Daftar tugas
          Expanded(
            child: _tasks.isEmpty
                ? const Center(
                    child: Text(
                      "Belum ada tugas ✨\nTambahkan tugas baru di atas!",
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Colors.grey, fontSize: 16),
                    ),
                  )
                : ListView.builder(
                    padding: const EdgeInsets.all(20),
                    itemCount: _tasks.length,
                    itemBuilder: (context, index) {
                      final task = _tasks[index];
                      return Container(
                        margin: const EdgeInsets.only(bottom: 15),
                        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(15),
                          boxShadow: [
                            BoxShadow(
                              color: Colors.grey.withOpacity(0.15),
                              blurRadius: 6,
                              offset: const Offset(0, 3),
                            ),
                          ],
                        ),
                        child: Row(
                          children: [
                            GestureDetector(
                              onTap: () => _toggleTask(index),
                              child: Icon(
                                task['done']
                                    ? Icons.check_circle
                                    : Icons.circle_outlined,
                                color: task['done'] ? Colors.green : Colors.grey,
                                size: 28,
                              ),
                            ),
                            const SizedBox(width: 12),
                            Expanded(
                              child: Text(
                                task['title'],
                                style: TextStyle(
                                  fontSize: 16,
                                  fontWeight: FontWeight.w500,
                                  decoration: task['done']
                                      ? TextDecoration.lineThrough
                                      : TextDecoration.none,
                                  color: task['done']
                                      ? Colors.grey
                                      : Colors.black87,
                                ),
                              ),
                            ),
                            IconButton(
                              icon: const Icon(Icons.delete_outline, color: Colors.redAccent),
                              onPressed: () => _deleteTask(index),
                            ),
                          ],
                        ),
                      );
                    },
                  ),
          ),
        ],
      ),
    );
  }
}

Oleh : Rian Rama Romansah

📘 Kesimpulan

Dari pembuatan aplikasi To-Do List di Flutter, dapat disimpulkan bahwa:

  • Flutter memudahkan pengembang untuk membuat tampilan aplikasi yang modern dan responsif dengan sedikit kode.

  • Aplikasi sederhana seperti To-Do List bisa menjadi dasar untuk memahami state management, UI design, dan interaksi pengguna.

  • Penggunaan widget-widget Flutter seperti Scaffold, ListView, TextField, dan Container memungkinkan kita membangun struktur aplikasi dengan mudah dan teratur.

Komentar

Posting Komentar

Postingan populer dari blog ini

Membangun Aplikasi Kuliner Nusantara dengan Login dan Navigasi Multi-Halaman

Gambar
  Membangun Aplikasi Kuliner Nusantara dengan Login dan Navigasi Multi-Halaman Pada pelajaran kali ini, kita belajar bagaimana membuat aplikasi kuliner Nusantara menggunakan Flutter , mulai dari membuat tampilan utama, navigasi antar halaman, hingga implementasi login sederhana di halaman profil. Berikut hal-hal penting yang dipelajari: Struktur Aplikasi Flutter dengan StatefulWidget Kita membuat aplikasi menggunakan StatefulWidget agar aplikasi bisa merespon perubahan data, seperti tema gelap/terang dan daftar favorit kuliner . Navigasi dengan BottomNavigationBar Aplikasi memiliki 5 halaman : Beranda, Kuliner, Pencarian, Favorit, dan Profil. Navigasi dilakukan menggunakan BottomNavigationBar , yang memungkinkan pengguna berpindah antar halaman dengan mudah. Menampilkan Data Kuliner dengan GridView Daftar kuliner ditampilkan menggunakan GridView.builder . Setiap item memiliki gambar dan nama , serta dapat ditandai sebagai favorit . Fitur Favori...
Baca selengkapnya

Materi Widget

Gambar
 Mengenal widget dasar Flutter (Text, Image, Column, Row, Icon, Button) & membuat aplikasi sederhana. 📘 Tugas: Buat aplikasi “Kartu Profil Sederhana – Aku & Hobiku” Syarat: ✅ Minimal 5 widget berbeda ✅ Ada foto/ilustrasi, nama, jurusan ✅ Deskripsi hobi atau cita-cita ✅ Tombol “Hubungi Saya” Hasil :  Kalo kalian pengen tinggal salin codingan ini lalu buka zapp.run import 'package:flutter/material.dart'; void main() => runApp(const MyProfileApp()); class MyProfileApp extends StatelessWidget {   const MyProfileApp({super.key});   @override   Widget build(BuildContext context) {     return MaterialApp(       debugShowCheckedModeBanner: false,       home: Scaffold(         backgroundColor: const Color.fromARGB(255, 149, 155, 160),         appBar: AppBar(           title: const Text('Profil'),           backgroundColor: Color.fr...
Baca selengkapnya