Flutter如何将列表勾选的用户数据传递并展示到其他页面

步骤1：创建选中数据展示页面 #

新建展示选中用户的页面文件，示例代码如下：

import 'package:flutter/material.dart';

class SelectedUsersPage extends StatelessWidget {
  // 接收传入的选中用户列表
  final List<dynamic> selectedUsers;
  const SelectedUsersPage({super.key, required this.selectedUsers});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("已选中用户")),
      body: selectedUsers.isEmpty
          ? const Center(child: Text("暂未选中任何用户"))
          : ListView.builder(
              padding: const EdgeInsets.all(16),
              itemCount: selectedUsers.length,
              itemBuilder: (context, index) {
                final user = selectedUsers[index];
                return Card(
                  child: ListTile(
                    title: Text("${user['id']} ${user['name']}"),
                    subtitle: Text(user['email'] ?? '无邮箱信息'),
                  ),
                );
              },
            ),
    );
  }
}

步骤2：修改原有页面的跳转逻辑 #

找到现有代码的getCheckboxItems方法，替换为如下逻辑，实现选中数据过滤和页面跳转：

getCheckboxItems() {
  // 过滤所有已勾选的用户数据
  List<dynamic> selectedUsers = users.where((post) => post['checked'] == true).toList();
  // 跳转至新页面并传递选中数据
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => SelectedUsersPage(selectedUsers: selectedUsers),
    ),
  );
}

注意：修改完成后别忘了在原有Sunday页面的顶部导入SelectedUsersPage所在的dart文件。

步骤3：可选优化（冗余代码删除） #

现有代码的ListView.builder的item中嵌套了一层无用的ListView，可以删除优化性能，修改后的itemBuilder代码如下：

itemBuilder: (context, i) {
  final post = users[i];
  return Card(
    elevation: 5,
    child: Padding(
      padding: const EdgeInsets.all(12.0),
      child: ListTile(
        leading: Checkbox(
          value: post['checked'] ?? false,
          onChanged: (value) {
            setState(() {
              post['checked'] = value;
            });
          }),
        title: Text("${post['id']} ${post['name']}"),
      ),
    )
  );
}

内容的提问来源于stack exchange，提问作者aditya-magdum