membuat apk to do list sederhana

 Oke! Berikut versi kata-kata postingan Blogger (tanpa kode), cocok untuk artikel penuh gaya yang bisa langsung kamu posting ke Blogger ✨

📝 Judul Postingan

To-Do List Flutter Elegan: Aplikasi Daftar Tugas Sederhana dan Keren di Zapp.run

📄 Isi Postingan

Apakah kamu pernah merasa kesulitan mengatur kegiatan harianmu? Atau sering lupa hal-hal kecil yang harus dikerjakan? Tenang! Sekarang kamu bisa membuat aplikasi To-Do List sendiri menggunakan Flutter — dan menariknya, kamu tidak perlu install apa pun di laptopmu. Cukup buka Zapp.run dan semua bisa dijalankan langsung di browser!

🌟 Apa Itu To-Do List?

To-Do List adalah daftar tugas atau kegiatan yang membantu kamu lebih terorganisir. Dengan aplikasi ini, kamu bisa:

  • Menambahkan tugas baru

  • Menandai tugas yang sudah selesai

  • Menghapus tugas yang tidak dibutuhkan

  • Melihat semua daftar kegiatan dengan tampilan modern

Sederhana, tapi sangat berguna untuk siapa pun yang ingin lebih produktif setiap hari 💪

import 'package:flutter/material.dart';

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

class ToDoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'To-Do List',
      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.purple,
        scaffoldBackgroundColor: Colors.grey[100],
        useMaterial3: true,
      ),
      home: ToDoHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class ToDoHomePage extends StatefulWidget {
  @override
  _ToDoHomePageState createState() => _ToDoHomePageState();
}

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

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

  void _toggleDone(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: const Text(
          '📝 To-Do List',
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        centerTitle: true,
        backgroundColor: Colors.purple,
        foregroundColor: Colors.white,
      ),
      body: Column(
        children: [
          // Input field
          Padding(
            padding: const EdgeInsets.all(16),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(
                      hintText: 'Tambahkan tugas...',
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(12),
                      ),
                      filled: true,
                      fillColor: Colors.white,
                    ),
                    onSubmitted: (_) => _addTask(),
                  ),
                ),
                const SizedBox(width: 8),
                ElevatedButton(
                  onPressed: _addTask,
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.purple,
                    foregroundColor: Colors.white,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(12),
                    ),
                  ),
                  child: const Icon(Icons.add),
                ),
              ],
            ),
          ),

          // List tugas
          Expanded(
            child: _tasks.isEmpty
                ? const Center(
                    child: Text(
                      'Belum ada tugas ✨',
                      style: TextStyle(fontSize: 18, color: Colors.grey),
                    ),
                  )
                : ListView.builder(
                    itemCount: _tasks.length,
                    itemBuilder: (context, index) {
                      final task = _tasks[index];
                      return Card(
                        margin:
                            const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(16),
                        ),
                        child: ListTile(
                          leading: IconButton(
                            icon: Icon(
                              task['done']
                                  ? Icons.check_circle
                                  : Icons.circle_outlined,
                              color: task['done']
                                  ? Colors.purple
                                  : Colors.grey,
                            ),
                            onPressed: () => _toggleDone(index),
                          ),
                          title: Text(
                            task['title'],
                            style: TextStyle(
                              fontSize: 16,
                              decoration: task['done']
                                  ? TextDecoration.lineThrough
                                  : null,
                              color: task['done']
                                  ? Colors.grey
                                  : Colors.black87,
                            ),
                          ),
                          trailing: IconButton(
                            icon: const Icon(Icons.delete_outline, color: Colors.red),
                            onPressed: () => _deleteTask(index),
                          ),
                        ),
                      );
                    },
                  ),
          ),
        ],
      ),
    );
  }
}


💻 Kenapa Pakai Flutter di Zapp.run?

Flutter memungkinkan kamu membuat aplikasi mobile dengan tampilan yang indah, dan Zapp.run membuat semuanya lebih praktis.
Kamu tidak perlu repot menyiapkan emulator atau Android Studio.
Cukup:

  1. Buka situs zapp.run

  2. Pilih template Flutter

  3. Tempelkan kode aplikasimu

  4. Tekan tombol ▶️ Run
    Dan aplikasi kamu langsung berjalan di browser!

🎨 Tampilan Elegan dan Modern

Aplikasi To-Do List ini menggunakan warna ungu lembut dengan desain minimalis.
Tampilannya bersih, responsif, dan mudah digunakan.
Tiap tugas bisa kamu tandai dengan ikon checklist ✅, dan jika sudah selesai, teksnya akan berubah menjadi abu-abu dengan coretan — memberi kesan elegan tapi tetap simpel.

🚀 Fitur-Fitur Utama

Berikut fitur keren yang bisa kamu dapatkan:

  • 🟣 Tambah tugas baru dengan cepat

  • ✅ Tandai tugas yang sudah selesai

  • 🗑️ Hapus tugas yang sudah tidak dibutuhkan

  • 🌈 Tampilan modern dengan gaya Material Design

  • ⚡ Ringan dan langsung bisa dijalankan di Zapp.run

📚 Cocok Untuk Siapa?

Aplikasi ini cocok banget untuk:

  • Mahasiswa atau pelajar yang belajar Flutter dasar

  • Developer pemula yang ingin belajar Stateful Widget

  • Siapa pun yang ingin membuat aplikasi sederhana tapi bermanfaat

  • Atau bahkan sekadar latihan membuat UI Flutter dengan desain menarik

💡 Ide Pengembangan

Kalau kamu ingin mengembangkannya lebih jauh, kamu bisa menambahkan:

  • Mode Gelap (Dark Mode) 🌙

  • Fitur penyimpanan lokal (SharedPreferences) 💾

  • Notifikasi pengingat tugas 🔔

  • Sinkronisasi data ke cloud ☁️

Dengan tambahan itu, To-Do List kamu bisa jadi aplikasi profesional yang siap masuk ke Play Store!

✨ Penutup

Membuat aplikasi To-Do List di Flutter lewat Zapp.run sangat mudah, cepat, dan menyenangkan.
Selain membantu kamu mengatur aktivitas, ini juga jadi sarana belajar yang menyenangkan untuk mengenal Flutter lebih dalam.

Jadi, tunggu apa lagi? Yuk buat versi To-Do List kamu sendiri di Zapp.run sekarang!
Semoga artikel ini bermanfaat dan menginspirasi kamu untuk terus berkarya 💜

🖋️ Ditulis oleh Dara Tri Yuliani — Flutter Project 2025

Apakah kamu mau saya tambahkan versi ringkas untuk deskripsi meta SEO (biar postinganmu mudah muncul di Google)?

Komentar

Posting Komentar

Postingan populer dari blog ini

artikel mengenai pengembangan gim

Gambar
Dara Tri Yuliani  XI RPL 1 **Artikel 1: Memulai Perjalanan Pengembangan Gim: Panduan untuk Pemula** **Pendahuluan** Industri gim telah berkembang pesat, menawarkan peluang menarik bagi para peminat. Jika Anda tertarik untuk menciptakan dunia virtual Anda sendiri, artikel ini adalah tempat yang tepat untuk memulai. Kami akan membahas dasar-dasar pengembangan gim, memberikan panduan langkah demi langkah untuk membantu Anda memulai perjalanan yang menyenangkan ini. ** Analisis ** Artikel ini bertujuan untuk memberikan gambaran umum tentang pengembangan gim, cocok untuk pemula yang ingin memahami proses dan alat yang diperlukan. **Langkah-langkah** * ** Langkah 1  Memahami Dasar-Dasar Pengembangan Gim**     Sebelum terjun lebih dalam, penting untuk memahami konsep dasar. Pengembangan gim melibatkan beberapa aspek, termasuk:     * **Desain Gim:** Memikirkan ide gim, genre, target audiens, dan mekanisme permainan.     * **Pemrograman:** Menulis ko...
Baca selengkapnya

MEMBUAT LAYOUT RESPONSIF DAN NAVIGASI APLIKASI

Gambar
📱 Materi: Membuat Layout Responsif dan Navigasi Aplikasi 1. Pengantar Dalam pengembangan aplikasi mobile (misalnya dengan Flutter ), dua hal penting yang harus diperhatikan adalah: Layout Responsif – tampilan aplikasi bisa menyesuaikan ukuran layar (smartphone, tablet, web). Navigasi Aplikasi – cara pengguna berpindah dari satu halaman ke halaman lain. 2. Membuat Layout Responsif a. Mengapa Responsif? Tidak semua pengguna memakai perangkat dengan ukuran layar yang sama. Aplikasi harus tetap nyaman dilihat, baik di layar kecil maupun besar. Responsif meningkatkan User Experience (UX) . b. Teknik Membuat Layout Responsif di Flutter MediaQuery Digunakan untuk mendapatkan ukuran layar. double width = MediaQuery.of(context).size.width; double height = MediaQuery.of(context).size.height; Contoh penggunaan: Container( width: MediaQuery.of(context).size.width * 0.8, height: 200, color: Colors.blue, ) LayoutBuilder Menyesuaikan tampilan berdas...
Baca selengkapnya

Membuat halaman Data Kelompok Belajar Zapp.run

Membuat Halaman Data Kelompok Belajar dengan Flutter di Zapp.run Flutter adalah framework yang sangat populer untuk membuat aplikasi mobile cross-platform (Android & iOS). Kali ini kita akan belajar membuat satu halaman aplikasi yang menampilkan data kelompok belajar dengan foto anggota, detail informasi (nama, no absen, alamat, kelas, hobi), serta tombol di bagian bawah yang memunculkan popup sederhana. Struktur Halaman yang Akan Dibuat Bagian atas → Judul "Wededen Squad". Bagian isi → Daftar anggota kelompok dengan foto, nama, no absen, alamat. Jika salah satu anggota ditekan, akan terbuka halaman detail berisi informasi lebih lengkap. Bagian bawah → Tombol "Awas Meledug". Jika ditekan, akan muncul popup dengan pesan salam. Persiapan di Zapp.run Masuk ke Zapp.run. Buat project Flutter baru. Simpan foto anggota kelompok di folder assets/ pada project. Tambahkan path assets di file pubspec.yaml. Contoh: flutter: assets: - assets/Azka.jpg ...
Baca selengkapnya