To-doリスト：タスクを追加する

CoddyのFlutterジャーニー「プロジェクト」セクションの一部。レッスン 2/36。

追加できないToDoリストは、ただのポスターです。リストの上に入力欄と丸い追加ボタンをRowの中に配置します。

入力欄にはTextEditingControllerを設定するので、追加ボタンから入力された内容を読み取れます。追加は2つの手順で行います。setStateの中で新しいTaskをリストに追加し、リストを再描画してから、次の入力に備えて入力欄をクリアします。

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

これで、入力欄とリストが画面を共有します。Column内のListViewは、その周囲をExpandedで囲む必要があります。そうすれば、すべてのスペースを要求するのではなく、残りのスペースを使います。

IconButton.filledは、テーマカラーで塗りつぶされた円の上に配置されるIconButtonです。Material 3におけるメインアクションの見た目です。

チャレンジ

中級

入力欄からタスクを追加します。

状態に TextEditingController を _controller という名前で持たせます（破棄も行います）。
body を Column にします。最初に、16 ピクセルのパディングを設定した Row を配置し、その中に New task というラベルの付いた Expanded な TextField と Icons.add を持つ IconButton.filled を置きます。次に、リストを Expanded の中に配置します。
ボタンをタップすると、入力したタスクがリストの末尾に追加され、入力欄が空になります。

自分で試してみよう

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