To-doリスト：タスクリスト

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

このセクションでは、4つのアプリを、機能を1つずつ作りながら完成させます。各要素についてはすでに学んでいます。ここでは、実際のアプリが作られるように、それらを組み合わせます。

最初のアプリは、やることリストです。この章を終えるころには、タスクの追加、完了のチェック、スワイプでの削除、削除の取り消し、表示内容の絞り込みができるようになります。

どのアプリも、まずデータから始まります。今のところタスクはタイトルだけなので、小さなクラスでそれを保持し、画面ではStateの中にタスクのリストを保持します。

class Task {
  Task(this.title);

  final String title;
}

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

ListView.builderを使うと、そのリストを画面上の行に変換できます。itemBuilderは、itemCountまでの各インデックスに対して1回ずつ呼び出され、呼び出しごとに1つのListTileを返します。

チャレンジ

簡単

タスクを表示します。

final String titleとコンストラクターTask(this.title)を持つTaskクラスを作成します
_TodoScreenStateで、3つのタスクBuy milk、Walk the dog、Read a bookを含むリスト_tasksを作成します
body:内のCenterを、各タスクのタイトルをListTileに表示するListView.builderに置き換えます

自分で試してみよう

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クラスを記述します。

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

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

class _TodoScreenState extends State<TodoScreen> {
  // ここでタスクのリストを作成します。

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