使用Flutter開發ToDo List App

本文將會介紹如何使用Flutter開發一個實用的ToDo List App。ToDo List，即待辦事項清單，是一種記錄人們未處理工作和待辦事項的方式。隨著日常生活的快節奏，如此的清單可以使人們更好地掌控自己的工作和生活。

一、使用Flutter

Flutter是一種跨平台的應用程序開發框架，由Google所開發。Flutter具有高性能、精美的UI設計、快速開發等優點，是開發跨平台應用程序的理想選擇。

二、需求分析

在開發ToDo List App前，我們需要先思考其實現所需的功能和界面設計。

1.功能分析

ToDo List App所需的主要功能如下：

• 添加待辦事項
• 刪除待辦事項
• 查看待辦事項清單
• 將待辦事項標記為已完成

2.界面設計

ToDo List App的主要界面包括待辦事項清單、添加待辦事項和已完成事項，下面是一個示意圖：

+----------------+
| 待辦事項清單   |
+----------------+
| - [ ] 待辦事項1 |
| - [ ] 待辦事項2 |
| - [ ] 待辦事項3 |
| - [ ] 待辦事項4 |
+----------------+
| 添加待辦事項   |
+----------------+
| [          ]   |
| -------------- |
| [   添加   ]   |
+----------------+
|   已完成事項   |
+----------------+
| - [x] 已完成1  |
| - [x] 已完成2  |
+----------------+

三、開發流程

1.創建項目

我們可以通過Flutter命令行工具創建一個新項目：

flutter create todo_list_app

2.界面設計

我們將使用Flutter的Material Design風格來設計界面，下面是一個示例代碼：

import 'package:flutter/material.dart';

void main() => runApp(TodoListApp());

class TodoListApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ToDo List',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TodoListScreen(),
    );
  }
}

class TodoListScreen extends StatefulWidget {
  @override
  _TodoListScreenState createState() => _TodoListScreenState();
}

class _TodoListScreenState extends State {
  final TextEditingController _textEditingController = TextEditingController();
  final List _todoList = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ToDo List'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: _todoList.length,
              itemBuilder: (BuildContext context, int index) {
                final todo = _todoList[index];
                return ListTile(
                  leading: Checkbox(
                    value: false,
                    onChanged: (value) {},
                  ),
                  title: Text(todo),
                );
              },
            ),
          ),
          TextField(
            controller: _textEditingController,
            decoration: InputDecoration(
              hintText: '添加待辦事項',
              contentPadding: EdgeInsets.all(16.0),
            ),
            onSubmitted: (value) {
              setState(() {
                _todoList.add(value);
                _textEditingController.clear();
              });
            },
          ),
        ],
      ),
    );
  }
}

3.添加待辦事項

在Flutter中，我們可以使用TextField控制項來輸入待辦事項，然後使用ListView來展示待辦事項列表。下面是一個示例代碼：

TextField(
  controller: _textEditingController,
  decoration: InputDecoration(
    hintText: '添加待辦事項',
    contentPadding: EdgeInsets.all(16.0),
  ),
  onSubmitted: (value) {
    setState(() {
      _todoList.add(value);
      _textEditingController.clear();
    });
  },
),

4.刪除待辦事項

在Flutter中，我們可以使用ListView的dismissible屬性來實現滑動刪除待辦事項，下面是一個示例代碼：

ListView.builder(
  itemCount: _todoList.length,
  itemBuilder: (BuildContext context, int index) {
    final todo = _todoList[index];
    return Dismissible(
      key: Key('$todo$index'),
      child: ListTile(
        leading: Checkbox(
          value: false,
          onChanged: (value) {
            // TODO: 將待辦事項標記為已完成
          },
        ),
        title: Text(todo),
      ),
      background: Container(
        color: Colors.red,
      ),
      onDismissed: (direction) {
        setState(() {
          _todoList.removeAt(index);
        });
      },
    );
  },
),

5.將待辦事項標記為已完成

在Flutter中，我們可以使用Checkbox控制項來實現將待辦事項標記為已完成的功能。下面是一個示例代碼：

Checkbox(
  value: false,
  onChanged: (value) {
    setState(() {
      // TODO: 將待辦事項標記為已完成
    });
  },
),

四、總結

本文介紹了如何使用Flutter開發一個ToDo List App，包括需求分析、界面設計和開發流程。通過本文的學習，您可以快速掌握Flutter的開發技能，並開發出實用的跨平台應用。