Yapılacaklar Listesi: Görev Ekleme

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

Görev ekleyemediğiniz bir yapılacaklar listesi, yalnızca bir afiştir. Listenin üzerine, bir Row içine bir alan ve yuvarlak bir ekleme düğmesi koyun.

Alana bir TextEditingController atanır; böylece ekleme düğmesi yazılanları okuyabilir. Ekleme iki adımdan oluşur: listenin yeniden çizilmesi için setState içinde listeye yeni bir Task ekleyin, ardından sıradaki görev için alanı temizleyin:

void _addTask() {
  setState(() {
    _tasks.add(Task(_controller.text));
  });
  _controller.clear();
}

Artık liste ve alan ekranı paylaşır. Bir Column içindeki ListView'ın çevresine bir Expanded koymak gerekir; böylece tüm alanı istemek yerine geriye kalan alanı kaplar.

IconButton.filled, Material 3'te ana eylemlerin görünümünde olduğu gibi, temanın rengindeki dolu bir daire üzerinde bulunan bir IconButton'dır.

Görev

Orta

Bir alandan görev ekleyin:

duruma _controller adlı bir TextEditingController ekleyin (ve onu dispose edin)
body'yi bir Column yapın: önce, 16 piksellik dolgu içinde New task etiketli bir Expanded TextField ve Icons.add içeren bir IconButton.filled bulunan bir Row, ardından listeyi bir Expanded içine yerleştirin
düğmeye dokunulduğunda yazılan görev listenin sonuna eklenir ve alan boşaltılır

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

class Task {
  Task(this.title);

  final String title;
}

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

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

class _TodoScreenState extends State<TodoScreen> {
  final List<Task> _tasks = [Task('Buy milk'), Task('Walk the dog'), Task('Read a book')];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Tasks')),
      body: ListView.builder(
        itemCount: _tasks.length,
        itemBuilder: (context, index) {
          final task = _tasks[index];
          return ListTile(
            title: Text(task.title),
          );
        },
      ),
    );
  }
}