To-Do List Cantik di DartPad

pada tanggal

Hari ini saya mempelajari tentang Widget Flutter dalam pembelajaran kelas XI PPLG 1.
Meskipun guru sedang bertugas pengawasan, kegiatan belajar tetap berlangsung mandiri dengan membuat aplikasi sederhana menggunakan DartPad.
Flutter memberikan pengalaman menarik dalam memahami konsep antarmuka pengguna (UI) dan interaksi melalui berbagai jenis widget.

Penjelasan Widget yang Digunakan

Dalam pembuatan aplikasi To-Do List sederhana, saya menggunakan beberapa widget utama sebagai berikut:

  1. MaterialApp
    Berfungsi sebagai kerangka utama aplikasi yang mengatur tema, navigasi, serta halaman awal (home).

  2. Scaffold
    Menyediakan struktur dasar aplikasi yang terdiri dari AppBar, body, dan elemen-elemen lain di dalam halaman.

  3. AppBar
    Digunakan untuk menampilkan judul aplikasi di bagian atas layar.

  4. TextField
    Berfungsi sebagai kolom input untuk menuliskan tugas baru yang akan ditambahkan ke daftar.

  5. ElevatedButton
    Merupakan tombol interaktif yang digunakan untuk menambahkan data baru ke dalam daftar tugas.

  6. ListView.builder
    Menampilkan daftar tugas secara dinamis sesuai jumlah item yang telah dimasukkan.

  7. CheckboxListTile
    Menampilkan setiap tugas dalam bentuk daftar dengan tanda centang, sehingga pengguna dapat menandai tugas yang sudah selesai.

  8. Card
    Digunakan untuk mempercantik tampilan setiap item daftar agar terlihat rapi dan terpisah dengan jelas.

Kombinasi berbagai widget tersebut menghasilkan tampilan aplikasi yang sederhana namun fungsional.

Hasil Tampilan

Berikut tampilan hasil aplikasi To-Do List yang telah dibuat pada DartPad:



Coba kode To-Do List sederhana

import 'package:flutter/material.dart';

void main() {
  runApp(ToDoApp());
}

class ToDoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'To-Do List Cantik',
      home: ToDoList(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class ToDoList extends StatefulWidget {
  @override
  _ToDoListState createState() => _ToDoListState();
}

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

  void _addTask() {
    if (_controller.text.isNotEmpty) {
      setState(() {
        _tasks.add({'title': _controller.text, '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(
      appBar: AppBar(
        title: Text('To-Do List Cantik'),
        backgroundColor: Colors.teal,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(
                      labelText: 'Tambahkan tugas...',
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                SizedBox(width: 8),
                ElevatedButton(
                  onPressed: _addTask,
                  style: ElevatedButton.styleFrom(backgroundColor: Colors.teal),
                  child: Icon(Icons.add),
                ),
              ],
            ),
            SizedBox(height: 16),
            Expanded(
              child: ListView.builder(
                itemCount: _tasks.length,
                itemBuilder: (context, index) {
                  final task = _tasks[index];
                  return Card(
                    child: CheckboxListTile(
                      title: Text(
                        task['title'],
                        style: TextStyle(
                          decoration: task['done']
                              ? TextDecoration.lineThrough
                              : TextDecoration.none,
                        ),
                      ),
                      value: task['done'],
                      onChanged: (val) => _toggleTask(index),
                      secondary: IconButton(
                        icon: Icon(Icons.delete, color: Colors.redAccent),
                        onPressed: () => _deleteTask(index),
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Klik di sini untuk melihat hasil eksperimen pada DartPad

(Untuk mendapatkan link, klik tombol “Share” pada bagian kanan atas halaman DartPad, lalu salin tautannya.)

Kesimpulan

Dari eksperimen ini, saya memperoleh pemahaman lebih mendalam tentang struktur dan fungsi berbagai widget di Flutter.
Proses pembuatan To-Do List sederhana ini melatih kemampuan saya dalam mengatur layout, mengelola input pengguna, serta memahami interaksi antar-komponen aplikasi.

Melalui pembelajaran mandiri ini, saya menyadari bahwa pemrograman Flutter tidak hanya berfokus pada kode, tetapi juga pada logika dan kreativitas dalam membangun antarmuka yang menarik serta mudah digunakan

Komentar

Posting Komentar