Daftar Tugas: Tambahkan Tugas

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

Daftar tugas yang tidak bisa kamu tambahi adalah poster. Letakkan kolom input dan tombol tambah berbentuk lingkaran di atas daftar, di dalam Row.

Kolom input memakai TextEditingController, agar tombol tambah dapat membaca teks yang kamu ketik. Menambahkan tugas terdiri dari dua langkah: masukkan Task baru ke daftar di dalam setState, agar daftar digambar ulang, lalu kosongkan kolom input untuk tugas berikutnya:

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

Sekarang daftar berbagi layar dengan kolom input. ListView di dalam Column memerlukan Expanded yang membungkusnya, agar menggunakan ruang yang tersisa, bukan meminta seluruh ruang.

IconButton.filled adalah IconButton pada lingkaran berisi warna tema, seperti tampilan tindakan utama di Material 3.

Tantangan

Sedang

Tambahkan tugas dari kolom input:

berikan state TextEditingController bernama _controller (dan panggil dispose)
jadikan body sebuah Column: pertama, sebuah Row dengan padding 16 piksel yang berisi TextField Expanded berlabel New task dan IconButton.filled dengan Icons.add, lalu tempatkan list di dalam Expanded
ketika tombol diketuk, tambahkan tugas yang diketik ke akhir list dan kosongkan kolom input

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

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