Flutter中使用FirebaseAnimatedList时如何将点击项数据传递到详情页

你可以通过给详情页构造函数传参的方式实现数据传递，总共3步修改即可完成需求：

1. 修改SecondScreen，新增接收数据的参数 #

给SecondScreen的构造方法新增必填参数，用来接收列表点击项的完整数据：

class SecondScreen extends StatefulWidget {
  // 新增参数存储传入的列表项数据
  final Map itemData;
  const SecondScreen({Key? key, required this.itemData}) : super(key: key);

  @override
  _SecondScreenState createState() => _SecondScreenState();
}

class _SecondScreenState extends State<SecondScreen> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: 250,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.red),
        image: DecorationImage(
          fit: BoxFit.fill,
          // 通过widget调用父组件传入的参数
          image: NetworkImage(widget.itemData['image']),
        ),
      ),
    );
  }
}

如果需要调用其他字段，比如你之前存入的snapshot.key，直接用widget.itemData['key']即可，所有mydata中存在的字段都可以通过这个方式访问。

2. 完善第一屏的点击跳转逻辑 #

修改InkWell的onTap回调，跳转时将当前列表项的mydata传给SecondScreen：

return InkWell(
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => SecondScreen(itemData: mydata),
      ),
    );
  },
  child: // 原有child代码保持不变
);

可选优化（推荐） #

如果项目中多处用到这个数据结构，可以把Map转换成强类型的实体类，避免字段名拼写错误、运行时类型异常的问题。

内容的提问来源于stack exchange，提问作者Muhammad Awais Younas