Flutter中如何用Cloud Firestore读取集合文档名并高亮显示于下拉列表

步骤1：添加依赖 #

首先在pubspec.yaml中添加Cloud Firestore依赖：

dependencies:
  flutter:
    sdk: flutter
  cloud_firestore: ^4.14.0 # 请使用最新稳定版本

步骤2：实现核心逻辑 #

下面是完整的可运行代码，包含从Firestore拉取文档名、区分高亮文档并构建下拉列表的功能：

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

class DocumentDropdownScreen extends StatefulWidget {
  const DocumentDropdownScreen({super.key});

  @override
  State<DocumentDropdownScreen> createState() => _DocumentDropdownScreenState();
}

class _DocumentDropdownScreenState extends State<DocumentDropdownScreen> {
  // 存储文档名称和高亮状态的实体类
  class DocItem {
    final String name;
    final bool isHighlighted;

    DocItem({required this.name, required this.isHighlighted});
  }

  List<DocItem> _docList = [];
  bool _loading = true;
  String? _selectedDoc;

  @override
  void initState() {
    super.initState();
    _getDocumentsFromFirestore();
  }

  // 从Firestore获取集合数据
  Future<void> _getDocumentsFromFirestore() async {
    try {
      // 替换为你的目标集合名称
      final snapshot = await FirebaseFirestore.instance.collection('your_collection').get();
      
      setState(() {
        _docList = snapshot.docs.map((doc) {
          // 文档ID作为显示名称，读取highlight字段判断是否高亮
          final isHighlight = doc.data()['highlight'] as bool? ?? false;
          return DocItem(name: doc.id, isHighlighted: isHighlight);
        }).toList();
        _loading = false;
      });
    } catch (e) {
      print('拉取文档失败: $e');
      setState(() => _loading = false);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('文档选择')),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16),
        child: _loading
            ? const Center(child: CircularProgressIndicator())
            : DropdownButtonFormField<String>(
                value: _selectedDoc,
                hint: const Text('请选择文档'),
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  contentPadding: EdgeInsets.symmetric(horizontal: 12),
                ),
                items: _docList.map((item) {
                  return DropdownMenuItem(
                    value: item.name,
                    child: Text(
                      item.name,
                      style: item.isHighlighted
                          ? const TextStyle(
                              fontWeight: FontWeight.bold,
                              color: Colors.blueAccent,
                            )
                          : null,
                    ),
                  );
                }).toList(),
                onChanged: (value) {
                  setState(() => _selectedDoc = value);
                  // 这里添加选中后的业务逻辑
                },
              ),
      ),
    );
  }
}

关键说明 #

• 文档名称获取：通过doc.id拿到Firestore集合中文档的名称（即文档ID）。
• 高亮标记处理：从文档的highlight字段读取布尔值，默认设为false避免空值报错。
• 下拉列表样式：高亮文档的选项会显示为加粗蓝色，普通文档保持默认样式。
• 状态管理：通过_loading变量控制加载状态，拉取数据完成前显示加载指示器。

可选优化 #

如果需要实时同步Firestore中的文档变化（比如新增/修改高亮状态），可以将一次性获取的get()改为监听snapshots()：

StreamSubscription? _subscription;

@override
void initState() {
  super.initState();
  _subscription = FirebaseFirestore.instance.collection('your_collection')
    .snapshots()
    .listen((snapshot) {
      setState(() {
        _docList = snapshot.docs.map((doc) {
          final isHighlight = doc.data()['highlight'] as bool? ?? false;
          return DocItem(name: doc.id, isHighlighted: isHighlight);
        }).toList();
        _loading = false;
      });
    });
}

@override
void dispose() {
  _subscription?.cancel();
  super.dispose();
}

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