Ikmal.blog

 

✈️ Membuat Aplikasi Travel To-Do List dengan Flutter

Pernahkah kamu punya banyak rencana perjalanan, tapi bingung mencatatnya biar nggak lupa? Nah, kali ini kita akan membuat aplikasi sederhana Travel To-Do List menggunakan Flutter. Dengan aplikasi ini, kamu bisa menambahkan daftar destinasi atau rencana perjalanan, lengkap dengan gambar acak yang otomatis ditampilkan.

---

🎯 Fitur Aplikasi

• Menambahkan daftar destinasi/rencana perjalanan.

• Menampilkan gambar acak untuk setiap destinasi (menggunakan picsum.photos).

• Menghapus destinasi yang sudah tidak diperlukan.

• Tampilan modern dengan Material 3.

• Empty state (pesan ramah ketika list masih kosong).

---

🛠️ Struktur Kode

Aplikasi ini memiliki dua widget utama:

1. TravelToDoApp → Root widget dengan MaterialApp.

2. TravelToDoHome → Stateful widget untuk mengelola daftar destinasi.

---

💻 Kode Lengkap

import 'package:flutter/material.dart';

void main() => runApp(TravelToDoApp());

class TravelToDoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Travel To-Do List',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange),
        useMaterial3: true,
      ),
      home: TravelToDoHome(),
    );
  }
}

class TravelToDoHome extends StatefulWidget {
  @override
  _TravelToDoHomeState createState() => _TravelToDoHomeState();
}

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

  void _addTask() {
    if (_controller.text.trim().isNotEmpty) {
      setState(() {
        _tasks.add({
          'title': _controller.text.trim(),
          'image':
              'https://picsum.photos/seed/${DateTime.now().millisecondsSinceEpoch}/400/200'
        });
        _controller.clear();
      });
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.orange[50],
      appBar: AppBar(
        backgroundColor: Colors.orange,
        title: const Text(
          '✈️ Travel To-Do List',
          style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
        ),
        centerTitle: true,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            // Input field + add button
            Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(
                      labelText: 'Tambahkan destinasi atau rencana...',
                      labelStyle: const TextStyle(color: Colors.orange),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(12),
                      ),
                    ),
                  ),
                ),
                const SizedBox(width: 10),
                ElevatedButton.icon(
                  onPressed: _addTask,
                  icon: const Icon(Icons.flight_takeoff, color: Colors.white),
                  label: const Text(
                    'Tambah',
                    style: TextStyle(color: Colors.white),
                  ),
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.orange,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(12),
                    ),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 20),

            // List destinasi
            Expanded(
              child: _tasks.isEmpty
                  ? Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: const [
                          Icon(Icons.map_outlined,
                              size: 80, color: Colors.grey),
                          SizedBox(height: 10),
                          Text(
                            'Belum ada rencana perjalanan 🌍',
                            style: TextStyle(color: Colors.grey, fontSize: 18),
                          ),
                        ],
                      ),
                    )
                  : ListView.builder(
                      itemCount: _tasks.length,
                      itemBuilder: (context, index) {
                        final task = _tasks[index];
                        return Card(
                          elevation: 5,
                          margin: const EdgeInsets.symmetric(vertical: 8),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(16),
                          ),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              ClipRRect(
                                borderRadius: const BorderRadius.vertical(
                                    top: Radius.circular(16)),
                                child: Image.network(
                                  task['image']!,
                                  height: 160,
                                  width: double.infinity,
                                  fit: BoxFit.cover,
                                ),
                              ),
                              ListTile(
                                title: Text(
                                  task['title']!,
                                  style: const TextStyle(
                                      fontWeight: FontWeight.bold,
                                      fontSize: 18),
                                ),
                                trailing: IconButton(
                                  icon: const Icon(Icons.delete,
                                      color: Colors.redAccent),
                                  onPressed: () => _removeTask(index),
                                ),
                              ),
                            ],
                          ),
                        );
                      },
                    ),
            ),
          ],
        ),
      ),
    );
  }
}

---

📱 Hasil Akhir

• Saat aplikasi dibuka pertama kali, akan muncul pesan "Belum ada rencana perjalanan 🌍".

• Tambahkan destinasi melalui field input → destinasi langsung tampil di list dengan gambar random.

• Tekan tombol hapus (ikon tempat sampah merah) untuk menghapus destinasi.

---

🚀 Pengembangan Lebih Lanjut

Supaya aplikasi lebih menarik, kita bisa menambahkan:

• Checkbox untuk menandai destinasi yang sudah dikunjungi.

• Snackbar saat menambah/menghapus task.

• Persistent storage (misalnya shared_preferences) agar list tetap tersimpan meski aplikasi ditutup.

• Animasi saat menambahkan atau menghapus destinasi.

---

Dengan langkah sederhana ini, kita sudah berhasil membuat aplikasi Travel To-Do List yang cantik dan fungsional. Cocok banget buat belajar Flutter sekaligus melatih kreativitas membuat aplikasi produktif sehari-hari. 🌍