Flutter DataTable 用map生成DataRow时报方法未定义错误

map() 是Dart中所有可迭代集合（如List）的内置方法，单个Post实体本身不存在该方法。出现「Post 实体未定义 map 方法」的报错，本质是调用map方法的对象不是List<Post>集合，而是单个Post实例。
你之前通过在Post模型中补充toJson方法无法解决问题，是因为这个报错和模型序列化逻辑完全无关，常见触发场景包括：

• Provider中存储列表的状态字段类型定义错误：本该定义为List<Post>的字段，被误写为单个Post?类型，后续直接在这个字段上调用map生成表格行
• API响应解析逻辑错位：接口返回嵌套数组结构时，没有正确提取数组部分映射为List<Post>，反而把整个响应体或者单个对象解析为Post实例传入UI层
• 页面层取值层级错误：错把Provider状态里存储单个Post的字段，当成列表集合调用map

1. 定义Post数据模型 #

模型只需要保留Json序列化/反序列化逻辑即可，不需要额外实现和map相关的内容：

class Post {
  final int id;
  final String title;
  final String content;

  Post({
    required this.id,
    required this.title,
    required this.content,
  });

  factory Post.fromJson(Map<String, dynamic> json) => Post(
    id: json['id'],
    title: json['title'],
    content: json['content'],
  );

  Map<String, dynamic> toJson() => {
    'id': id,
    'title': title,
    'content': content,
  };
}

2. Provider层状态定义与逻辑实现 #

严格保证列表状态的类型指向，解析接口数据时正确将Json数组转换为List<Post>：

import 'package:flutter/foundation.dart';

class PostProvider extends ChangeNotifier {
  // 明确指定列表类型，禁止用单个Post类型存储列表数据
  List<Post> _postList = [];
  List<Post> get postList => _postList;

  Future<void> fetchPostList() async {
    // 调用接口获取数据后，正确提取数组结构
    final response = await request.get('/api/posts');
    // 假设接口返回结构为 {"data": [Post Json列表]}
    final List<dynamic> rawJsonList = response.data['data'];
    // 将Json数组映射为Post实例列表
    _postList = rawJsonList.map((jsonItem) => Post.fromJson(jsonItem)).toList();
    notifyListeners();
  }
}

3. 固定列头DataTable组件实现 #

列头静态写死为固定结构，数据行从postList集合调用map动态生成，适配横竖滚动实现列头固定效果：

Consumer<PostProvider>(
  builder: (context, postProvider, child) {
    return Column(
      children: [
        // 静态固定的列头区域，不随数据滚动
        Container(
          padding: const EdgeInsets.symmetric(vertical: 12),
          decoration: const BoxDecoration(
            border: Border(bottom: BorderSide(color: Colors.grey)),
          ),
          child: Row(
            children: const [
              SizedBox(width: 80, child: Text('ID', style: TextStyle(fontWeight: FontWeight.bold))),
              SizedBox(width: 160, child: Text('标题', style: TextStyle(fontWeight: FontWeight.bold))),
              Expanded(child: Text('内容', style: TextStyle(fontWeight: FontWeight.bold))),
            ],
          ),
        ),
        // 可滚动的表格数据区域
        Expanded(
          child: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: DataTable(
                // 因为已经单独实现了顶部固定列头，这里隐藏默认表头
                showCheckboxColumn: false,
                headingRowHeight: 0,
                // 从List<Post>调用map生成动态数据行
                rows: postProvider.postList.map((postItem) {
                  return DataRow(
                    cells: [
                      DataCell(SizedBox(width: 80, child: Text(postItem.id.toString()))),
                      DataCell(SizedBox(width: 160, child: Text(postItem.title))),
                      DataCell(Text(postItem.content)),
                    ],
                  );
                }).toList(),
              ),
            ),
          ),
        ),
      ],
    );
  },
)

注意：如果直接使用默认DataTable，纵向滚动时列头会跟随内容一起滚动，无法实现固定效果；通过将列头抽离为独立的固定区域，下方只渲染可滚动的数据行，才能实现列头静态展示、数据行动态更新的效果。

检查所有调用postList.map(...)的位置，给当前的调用对象加print(postList.runtimeType)打印运行时类型，如果打印结果是Post而不是List<Post>，就定位到了类型错配的位置——这类问题大多是字段拼写错误、类型定义错误导致的，不会提前在编译阶段暴露。

内容的提问来源于stack exchange，提问作者GrandMagus