Yapılacaklar Listesi: Görev Listesi

Coddy'nin Flutter Journey'sinin Projeler bölümünün bir parçası. Ders 1 / 36.

Bu bölüm, her seferinde bir özellik eklenerek oluşturulmuş dört uygulamadan oluşuyor. Her parçayı zaten biliyorsun; şimdi bunları gerçek uygulamaların yapıldığı şekilde bir araya getiriyorsun.

İlk uygulama bir yapılacaklar listesi. Bu bölümün sonunda görevler ekleyebilir, tamamlandı olarak işaretleyebilir, kaydırarak kaldırabilir, silme işlemini geri alabilir ve gördüklerini filtreleyebilirsin.

Her uygulama verileriyle başlar. Şimdilik bir görev yalnızca bir başlıktan oluşuyor, bu yüzden küçük bir sınıf onu tutuyor ve ekran, görevlerin listesini State içinde saklıyor:

class Task {
  Task(this.title);

  final String title;
}

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

ListView.builder, bu listeyi ekrandaki satırlara dönüştürür. itemBuilder işlevini, itemCount değerine kadar her indeks için bir kez çağırır ve her çağrı bir ListTile döndürür.

Görev

Kolay

Görevleri göster:

Task sınıfını, final String title ve Task(this.title) kurucusuyla yaz
_TodoScreenState içinde şu üç görevden oluşan bir _tasks listesi oluştur: Buy milk, Walk the dog ve Read a book
body: içindeki Center öğesini, her görevin başlığını bir ListTile içinde gösteren ListView.builder ile değiştir

Kendin dene

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(),
    );
  }
}

// Task sınıfını buraya yazın.

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

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

class _TodoScreenState extends State<TodoScreen> {
  // Görev listesini burada oluşturun.

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