如何从Cloud Firestore渲染瓦片列表及新版Flutter+Firebase资源咨询

1. 前置依赖配置 #

首先确保pubspec.yaml中引入最新稳定版的相关依赖：

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.24.2
  cloud_firestore: ^4.13.6

然后在main函数中完成Firebase初始化：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

2. 主页列表实现 #

主页通过StreamBuilder监听crypto集合的实时数据，渲染name列表，点击跳转时携带文档ID：

class CryptoListPage extends StatelessWidget {
  const CryptoListPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('加密货币列表')),
      body: StreamBuilder<QuerySnapshot>(
        stream: FirebaseFirestore.instance.collection('crypto').snapshots(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          }
          if (snapshot.hasError) {
            return Center(child: Text('加载失败：${snapshot.error}'));
          }
          final cryptoDocs = snapshot.data!.docs;
          return ListView.builder(
            itemCount: cryptoDocs.length,
            itemBuilder: (context, index) {
              final doc = cryptoDocs[index];
              return ListTile(
                title: Text(doc['name']),
                onTap: () => Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => CryptoDetailPage(docId: doc.id),
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

3. 详情页价格展示实现 #

详情页接收传入的文档ID，查询对应文档的price字段并展示：

class CryptoDetailPage extends StatelessWidget {
  final String docId;
  const CryptoDetailPage({super.key, required this.docId});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('货币详情')),
      body: FutureBuilder<DocumentSnapshot>(
        future: FirebaseFirestore.instance.collection('crypto').doc(docId).get(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          }
          if (snapshot.hasError) {
            return Center(child: Text('加载失败：${snapshot.error}'));
          }
          final data = snapshot.data!.data() as Map<String, dynamic>;
          return Center(
            child: Text(
              '价格：${data['price']}',
              style: const TextStyle(fontSize: 24),
            ),
          );
        },
      ),
    );
  }
}

如果需要实时监听价格变动，可将详情页的FutureBuilder替换为StreamBuilder，监听doc(docId).snapshots()流即可。

• FlutterFire官方文档：由Firebase官方团队维护，同步更新最新版API，所有功能都配套可直接运行的代码片段，覆盖初始化、Firestore、认证、存储等全场景用法
• Flutter官方Firebase集成Codelab：step by step的实操教程，包含完整的项目示例，适配最新版Flutter与Firebase SDK
• Firebase官方Flutter开发指南：包含最佳实践、性能优化、常见问题排查等内容，适合进阶学习

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