Membuat Aplikasi To Do List Sederhana Menggunakan Flutter

Januari 30, 2026

Membuat Aplikasi To Do List Sederhana Menggunakan Flutter

Flutter adalah framework dari Google yang digunakan untuk membangun aplikasi Android, iOS, dan Web menggunakan satu basis kode. Pada artikel ini, kita akan membahas tampilan aplikasi To Do List sederhana sekaligus pengertian widget-widget Flutter yang digunakan di dalamnya.

✨ Tampilan Aplikasi

Aplikasi To Do List ini memiliki:

AppBar berwarna hijau
Judul aplikasi “To Do List-Evan”
Kolom input untuk memasukkan tugas
Tombol tambah (+)

Desain ini sederhana dan cocok untuk pemula yang sedang belajar Flutter UI.

Gambar To do List

🧩 Source Code Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'To Do List',
      home: const TodoPage(),
    );
  }
}

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

  @override
  State<TodoPage> createState() => _TodoPageState();
}

class _TodoPageState extends State<TodoPage> {
  final TextEditingController _controller = TextEditingController();
  final List<String> _tasks = [];

  void _addTask() {
    if (_controller.text.isNotEmpty) {
      setState(() {
        _tasks.add(_controller.text);
        _controller.clear();
      });
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: const Text(
          'To Do List-Evan',
          style: TextStyle(color: Colors.white),
        ),
        centerTitle: true,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // Input + Button
            Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(
                      hintText: 'Masukkan tugas...',
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(6),
                      ),
                    ),
                  ),
                ),
                const SizedBox(width: 10),
                ElevatedButton(
                  onPressed: _addTask,
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.green,
                    padding: const EdgeInsets.all(16),
                  ),
                  child: const Icon(Icons.add, color: Colors.white),
                ),
              ],
            ),

            const SizedBox(height: 20),

            // List Tugas
            Expanded(
              child: _tasks.isEmpty
                  ? const Center(
                      child: Text(
                        'Belum ada tugas',
                        style: TextStyle(color: Colors.grey),
                      ),
                    )
                  : ListView.builder(
                      itemCount: _tasks.length,
                      itemBuilder: (context, index) {
                        return Card(
                          child: ListTile(
                            title: Text(_tasks[index]),
                            trailing: IconButton(
                              icon: const Icon(Icons.delete, color: Colors.red),
                              onPressed: () => _removeTask(index),
                            ),
                          ),
                        );
                      },
                    ),
            ),
          ],
        ),
      ),
    );
  }
}

📘 Penjelasan Widget yang Digunakan

1️⃣ MaterialApp

MaterialApp adalah widget utama yang menyediakan struktur dasar aplikasi Flutter berbasis Material Design.
Widget ini mengatur:

Tema aplikasi
Halaman utama (home)
Judul aplikasi

2️⃣ Scaffold

Scaffold berfungsi sebagai kerangka utama halaman.
Widget ini menyediakan:

AppBar
Body
FloatingActionButton
Drawer (jika diperlukan)

3️⃣ AppBar

AppBar adalah widget yang digunakan untuk menampilkan bagian atas aplikasi.
Pada kode ini, AppBar digunakan untuk:

Menampilkan judul aplikasi
Memberi warna hijau pada header

4️⃣ Text

Text digunakan untuk menampilkan teks pada layar.
Pada aplikasi ini, Text digunakan untuk menampilkan judul “To Do List-Evan”.

5️⃣ Padding

Padding berfungsi untuk memberi jarak di sekeliling widget agar tampilan tidak terlalu rapat.
Padding membuat UI terlihat lebih rapi dan nyaman dilihat.

6️⃣ Row

Row adalah widget layout yang menyusun widget secara horizontal.
Pada aplikasi ini, Row digunakan untuk menempatkan:

Kolom input
Tombol tambah (+)

7️⃣ Expanded

Expanded digunakan agar widget mengambil sisa ruang yang tersedia.
TextField dibungkus dengan Expanded supaya ukurannya menyesuaikan layar.

8️⃣ TextField

TextField adalah widget untuk menerima input teks dari pengguna.
Pada aplikasi ini, TextField digunakan untuk memasukkan tugas yang akan ditambahkan ke To Do List.

9️⃣ InputDecoration

InputDecoration digunakan untuk mengatur tampilan TextField, seperti:

Hint text
Border
Radius sudut

🔟 ElevatedButton

ElevatedButton adalah tombol yang memiliki efek elevasi (bayangan).
Tombol ini digunakan sebagai tombol tambah tugas.

1️⃣1️⃣ Icon

Icon digunakan untuk menampilkan ikon.
Ikon tanda tambah (+) digunakan agar tombol terlihat lebih intuitif.

1️⃣2️⃣ SizedBox

SizedBox berfungsi untuk memberi jarak antar widget.
Pada kode ini, SizedBox digunakan untuk memberi jarak antara TextField dan tombol tambah.

📝 Penutup

Dengan memahami fungsi dari setiap widget Flutter, kita dapat membangun tampilan aplikasi dengan lebih terstruktur dan rapi. Aplikasi To Do List sederhana ini merupakan langkah awal yang baik untuk mempelajari pengembangan aplikasi menggunakan Flutter.

Semoga artikel ini membantu dan selamat belajar Flutter 🚀

Cari Blog Ini

Tugas Evan Raka Riadi