Daftar Tugas: Daftar Tugas

Termasuk bagian Proyek dalam perjalanan Flutter di Coddy. Pelajaran 1 dari 36.

Bagian ini berisi empat aplikasi yang dibangun satu fitur demi satu fitur. Kamu sudah mengenal setiap bagiannya, sekarang kamu menyatukannya seperti cara aplikasi sungguhan dibuat.

Aplikasi pertama adalah daftar tugas. Di akhir bab ini, kamu bisa menambahkan tugas, menandainya sebagai selesai, menggesernya hingga hilang, membatalkan penghapusan, dan memfilter yang kamu lihat.

Setiap aplikasi dimulai dengan datanya. Untuk sekarang, sebuah tugas adalah judul, jadi sebuah class kecil menyimpannya, dan layar menyimpan daftar tugas dalam State-nya:

class Task {
  Task(this.title);

  final String title;
}

final List<Task> _tasks = [Task('Buy milk')];

ListView.builder mengubah daftar itu menjadi baris-baris di layar. Komponen ini memanggil itemBuilder sekali untuk setiap indeks hingga itemCount, dan setiap pemanggilan menghasilkan satu ListTile.

Tantangan

Mudah

Tampilkan tugas:

tulis class Task dengan final String title dan constructor Task(this.title)
di _TodoScreenState, buat list _tasks yang berisi tiga tugas: Buy milk, Walk the dog, dan Read a book
ganti Center di body: dengan ListView.builder yang menampilkan judul setiap tugas di dalam ListTile

Coba sendiri

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,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
      ),
      home: const TodoScreen(),
    );
  }
}

// Tulis class Task di sini.

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

  @override
  State<TodoScreen> createState() => _TodoScreenState();
}

class _TodoScreenState extends State<TodoScreen> {
  // Buat list tugas di sini.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Tasks')),
      body: const Center(
        child: Text('Your tasks go here'),
      ),
    );
  }
}