Membuat aplikasi To-Do List di DartPad yang nantinya bisa di-generate ke APK

Saya akan posting cara membuat aplikasi To-Do List di DartPad yang nantinya bisa di-generate ke APK. Karena DartPad terbatas untuk web, saya akan memberikan kode Flutter yang bisa dijalankan di DartPad dan siap untuk di-build ke APK.

Kode Aplikasi To-Do List Flutter

dart

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(
      title: 'To-Do List',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const TodoListPage(),
    );
  }
}

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

  @override
  State<TodoListPage> createState() => _TodoListPageState();
}

class _TodoListPageState extends State<TodoListPage> {
  final List<TodoItem> _todos = [];
  final TextEditingController _controller = TextEditingController();

  void _addTodo() {
    if (_controller.text.isNotEmpty) {
      setState(() {
        _todos.add(TodoItem(
          title: _controller.text,
          isDone: false,
        ));
        _controller.clear();
      });
    }
  }

  void _toggleTodo(int index) {
    setState(() {
      _todos[index].isDone = !_todos[index].isDone;
    });
  }

  void _deleteTodo(int index) {
    setState(() {
      _todos.removeAt(index);
    });
  }

  void _editTodo(int index) {
    _controller.text = _todos[index].title;
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('Edit To-Do'),
        content: TextField(
          controller: _controller,
          decoration: const InputDecoration(
            hintText: 'Masukkan tugas baru',
          ),
        ),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.pop(context);
              _controller.clear();
            },
            child: const Text('Batal'),
          ),
          TextButton(
            onPressed: () {
              if (_controller.text.isNotEmpty) {
                setState(() {
                  _todos[index].title = _controller.text;
                });
                Navigator.pop(context);
                _controller.clear();
              }
            },
            child: const Text('Simpan'),
          ),
        ],
      ),
    );
  }

  int get _completedCount {
    return _todos.where((todo) => todo.isDone).length;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('To-Do List'),
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
        elevation: 0,
        actions: [
          Padding(
            padding: const EdgeInsets.only(right: 16.0),
            child: Center(
              child: Text(
                '${_completedCount}/${_todos.length}',
                style: const TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
        ],
      ),
      body: Column(
        children: [
          // Input Section
          Container(
            padding: const EdgeInsets.all(16),
            color: Colors.grey[100],
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(
                      hintText: 'Tambahkan tugas baru...',
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(12),
                        borderSide: BorderSide.none,
                      ),
                      filled: true,
                      fillColor: Colors.white,
                      contentPadding: const EdgeInsets.symmetric(
                        horizontal: 16,
                        vertical: 0,
                      ),
                    ),
                    onSubmitted: (_) => _addTodo(),
                  ),
                ),
                const SizedBox(width: 8),
                ElevatedButton(
                  onPressed: _addTodo,
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.blue,
                    foregroundColor: Colors.white,
                    padding: const EdgeInsets.symmetric(
                      horizontal: 20,
                      vertical: 16,
                    ),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(12),
                    ),
                  ),
                  child: const Text('Tambah'),
                ),
              ],
            ),
          ),
          // Todo List
          Expanded(
            child: _todos.isEmpty
                ? Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(
                          Icons.checklist,
                          size: 80,
                          color: Colors.grey[300],
                        ),
                        const SizedBox(height: 16),
                        Text(
                          'Belum ada tugas',
                          style: TextStyle(
                            fontSize: 18,
                            color: Colors.grey[500],
                          ),
                        ),
                        const SizedBox(height: 8),
                        Text(
                          'Tambahkan tugas baru di atas',
                          style: TextStyle(
                            fontSize: 14,
                            color: Colors.grey[400],
                          ),
                        ),
                      ],
                    ),
                  )
                : ListView.builder(
                    padding: const EdgeInsets.all(16),
                    itemCount: _todos.length,
                    itemBuilder: (context, index) {
                      final todo = _todos[index];
                      return Card(
                        margin: const EdgeInsets.only(bottom: 8),
                        elevation: 2,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(12),
                        ),
                        child: ListTile(
                          contentPadding: const EdgeInsets.symmetric(
                            horizontal: 16,
                            vertical: 4,
                          ),
                          leading: Checkbox(
                            value: todo.isDone,
                            onChanged: (_) => _toggleTodo(index),
                            activeColor: Colors.blue,
                          ),
                          title: Text(
                            todo.title,
                            style: TextStyle(
                              decoration: todo.isDone
                                  ? TextDecoration.lineThrough
                                  : null,
                              color: todo.isDone ? Colors.grey : Colors.black,
                            ),
                          ),
                          trailing: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              IconButton(
                                icon: const Icon(
                                  Icons.edit,
                                  color: Colors.orange,
                                ),
                                onPressed: () => _editTodo(index),
                              ),
                              IconButton(
                                icon: const Icon(
                                  Icons.delete,
                                  color: Colors.red,
                                ),
                                onPressed: () => _deleteTodo(index),
                              ),
                            ],
                          ),
                        ),
                      );
                    },
                  ),
          ),
        ],
      ),
    );
  }
}

class TodoItem {
  String title;
  bool isDone;

  TodoItem({
    required this.title,
    required this.isDone,
  });
}

Cara Menggunakan di DartPad

1. Buka DartPad

2. Pilih mode Flutter (bukan Dart)

3. Copy paste kode di atas

4. Klik Run untuk menjalankan

Cara Generate ke APK

Setelah selesai menguji di DartPad, ikuti langkah berikut untuk membuat APK:

1. Setup Flutter Project

bash

flutter create todo_list_app
cd todo_list_app

2. Copy Kode

• Ganti isi lib/main.dart dengan kode di atas

3. Build APK

bash

# Build APK Debug (untuk testing)
flutter build apk --debug

# Build APK Release (untuk production)
flutter build apk --release

# Build Split APK (ukuran lebih kecil)
flutter build apk --split-per-abi

4. Lokasi APK

• Debug: build/app/outputs/flutter-apk/app-debug.apk

• Release: build/app/outputs/flutter-apk/app-release.apk

• Split: build/app/outputs/flutter-apk/app-armeabi-v7a-release.apk, app-arm64-v8a-release.apk, app-x86_64-release.apk

Fitur Aplikasi:

✅ Tambah tugas - Input field dan tombol Tambah
✅ Tandai selesai - Checkbox untuk menandai tugas
✅ Edit tugas - Icon edit untuk mengubah tugas
✅ Hapus tugas - Icon delete untuk menghapus
✅ Counter - Menampilkan jumlah tugas selesai/total
✅ UI Modern - Material Design dengan animasi

Tips Tambahan:

1. Ikon Aplikasi: Tambahkan icon di android/app/src/main/res/

2. Nama Aplikasi: Ubah di android/app/src/main/AndroidManifest.xml

3. Version Code: Ubah di android/app/build.gradle

Apakah Anda ingin saya tambahkan fitur lain seperti penyimpanan lokal (shared preferences) agar data tetap tersimpan? pantengin di postingan lain ya...

jika ada pertanyaan :
flutter create todo_list_app cd todo_list_app

Dimana Menjalankan Perintah Tersebut?

1. Di Terminal/Command Prompt (BUKAN di DartPad)

Perintah flutter create dijalankan di terminal komputer Anda, bukan di DartPad.

---

Langkah Lengkap Membuat APK:

📍 Step 1: Buka Terminal/Command Prompt

Windows:

• Tekan Win + R, ketik cmd, lalu Enter

• Atau buka PowerShell / Command Prompt

Mac/Linux:

• Buka Terminal (biasanya ada di Applications/Utilities)

---

📍 Step 2: Pilih Folder untuk Project

Pindah ke folder dimana Anda ingin menyimpan project:

bash

# Contoh: buat di Desktop
cd Desktop

# Atau buat folder khusus
mkdir FlutterProjects
cd FlutterProjects

---

📍 Step 3: Buat Project Flutter

bash

flutter create todo_list_app

Hasilnya: Akan terbuat folder todo_list_app di lokasi tersebut.

---

📍 Step 4: Masuk ke Folder Project

bash

cd todo_list_app

---

📍 Step 5: Buka Project di Editor

VS Code:

bash

code .

Android Studio:

• Buka Android Studio

• Pilih Open → Pilih folder todo_list_app

---

📍 Step 6: Copy Kode ke lib/main.dart

1. Buka folder todo_list_app di file explorer

2. Masuk ke folder lib

3. Buka file main.dart dengan text editor

4. Hapus semua kode yang ada

5. Copy paste kode To-Do List yang saya berikan sebelumnya

6. Simpan file

---

📍 Step 7: Build APK

Kembali ke terminal (pastikan masih di folder todo_list_app):

bash

# Untuk testing
flutter build apk --debug

# Untuk production (ukuran lebih kecil)
flutter build apk --release

---

📍 Step 8: Ambil APK

APK akan berada di:

text

todo_list_app/build/app/outputs/flutter-apk/

---

📌 Prasyarat Sebelum Memulai

Pastikan Anda sudah install:

1. Flutter SDK - Download di sini

2. Android Studio - Download di sini

3. VS Code (opsional) - Download di sini

---

🔍 Cek Instalasi Flutter

Di terminal, jalankan:

bash

flutter doctor

Pastikan semua centang hijau ✅

---

💡 Alternatif: Tanpa Flutter di Komputer

Jika Anda belum install Flutter, Anda bisa:

Opsi 1: Gunakan Online Build Service

• FlutterFlow - Build APK online

• Codemagic - CI/CD untuk Flutter

Opsi 2: Gunakan Expo (React Native)

Jika Anda lebih familiar dengan JavaScript

Opsi 3: Install Flutter Dulu

Ikuti panduan installasi Flutter di flutter.dev

---

📝 Ringkasan Perintah

bash

# 1. Buka terminal
cd Desktop                           # Pindah ke Desktop

# 2. Buat project
flutter create todo_list_app         # Buat project baru

# 3. Masuk ke project
cd todo_list_app                     # Masuk ke folder project

# 4. (Manual) Copy paste kode ke lib/main.dart

# 5. Build APK
flutter build apk --release          # Buat APK

# 6. APK siap di:
# todo_list_app/build/app/outputs/flutter-apk/app-release.apk

---

Ada yang masih bingung? Saya bisa jelaskan lebih detail lagi atau bantu troubleshooting jika ada error! 😊