如何在颤振中生成 CheckboxListTile答案

【问题标题】：how to generate a CheckboxListTile in flutter如何在颤振中生成 CheckboxListTile
【发布时间】：2022-08-17 21:53:17
【问题描述】：

我是新来的颤振，我正在做ToDo App，我做了第一个任务但我不知道如何生成它并使用户点击添加按钮，可以添加自己的任务在弹出页面上，用户可以添加任务和任务的详细信息，任务显示在应用程序的主屏幕上

我在网上搜索但不知道怎么做

谁能帮忙

class _MainTaskScreenState extends State<MainTaskScreen> {
  bool _valueCheck = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColor.mainColor,
//------------------------------------------------------------------------------
// AddTask Button...
      floatingActionButton: FloatingActionButton(
        onPressed: (() {}),
        backgroundColor: AppColor.mainColor,
        child: const Icon(
          FontAwesomeIcons.plus,
          color: AppColor.accentColor,
        ),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            padding:
                const EdgeInsets.only(top: 60, left: 30, right: 30, bottom: 10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
//------------------------------------------------------------------------------
// Menu Button..
                (ElevatedButton(
                  style: ElevatedButton.styleFrom(
                      primary: AppColor.accentColor,
                      onPrimary: AppColor.mainColor,
                      fixedSize: const Size(70, 70),
                      shape: const CircleBorder()),
                  onPressed: (() {}),
                  child: const Icon(FontAwesomeIcons.listUl, size: 30),
                )),
                const SizedBox(height: 10),
//------------------------------------------------------------------------------
// Title...
                Text(\'Todoey\', style: AppFonts.titleStyle),
//------------------------------------------------------------------------------
// Task\'s Num...
                Text(\'12 Task\', style: AppFonts.smallStyle),
              ],
            ),
          ),
//------------------------------------------------------------------------------
// Task\'s List...
          Expanded(
            child: Container(
              padding: const EdgeInsets.only(left: 20),
              width: double.infinity,
              decoration: const BoxDecoration(
                color: AppColor.accentColor,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(25),
                  topRight: Radius.circular(25),
                ),
              ),
//-----------------------------------------------
              child: ListView(
                children: [
                  CheckboxListTile(
                    title: Text(\'Clean you room\', style: TaskText.smallStyle),
                    subtitle:
                        const Text(\'remove the trach + clean your cloths\'),
                    activeColor: AppColor.accentColor,
                    checkColor: AppColor.mainColor,
                    value: _valueCheck,
                    selected: _valueCheck,
                    onChanged: ((value) {
                      setState(() {
                        _valueCheck = value!;
                      });
                    }),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

标签： flutter dart flutter-layout

【解决方案1】：

最好为此使用模型类。

class Task {
  final String text;
  final String? description;
  final bool isChecked;
  Task({
    required this.text,
    this.description,
    this.isChecked = false,
  });

  Task copyWith({
    String? text,
    String? description,
    bool? isChecked,
  }) {
    return Task(
      text: text ?? this.text,
      description: description ?? this.description,
      isChecked: isChecked ?? this.isChecked,
    );
  }
}

你可以关注这个小部件


class _MainTaskScreenState extends State<MainTaskScreen> {
  List<Task> tasks = [Task(text: "task x")];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: (() {
            tasks.add(Task(text: "New Task ${tasks.length}"));
            setState(() {});
          }),
          child: const Icon(
            FontAwesomeIcons.plus,
          ),
        ),
        body: Column(
          children: [
            Expanded(
                child: ListView.builder(
              itemCount: tasks.length,
              itemBuilder: (context, index) {
                return CheckboxListTile(
                  title: Text(tasks[index].text),
                  value: tasks[index].isChecked,
                  onChanged: (value) {
                    tasks[index] = tasks[index].copyWith(isChecked: value);
                    setState(() {});
                  },
                );
              },
            ))
          ],
        ));
  }
}

【讨论】：