Flutter中如何从Firebase数据库获取指定列的所有数据并展示到文本框？

嘿，刚上手Flutter和Firebase的时候，确实会有点摸不着头脑，毕竟和SQL的思路不太一样～我来一步步帮你实现获取所有电话号码并展示在文本框的需求！

1. 先配置依赖和初始化Firebase #

首先确保你的Flutter项目已经关联了Firebase，然后在pubspec.yaml里添加必要的依赖：

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.15.0
  firebase_database: ^10.2.0

执行flutter pub get安装依赖后，在main.dart里初始化Firebase：

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

2. 编写获取所有电话号码的函数 #

Firebase实时数据库是NoSQL结构，我们需要遍历Users节点下的所有条目，提取PhoneNumbers字段：

Future<List<String>> getAllPhoneNumbers() async {
  List<String> phoneNumbers = [];
  try {
    // 指向Users节点的引用
    DatabaseReference usersRef = FirebaseDatabase.instance.ref('Users');
    DatabaseEvent event = await usersRef.once();
    
    // 遍历所有用户数据，提取电话号码
    if (event.snapshot.value != null) {
      Map<dynamic, dynamic> usersData = event.snapshot.value as Map<dynamic, dynamic>;
      usersData.forEach((key, userInfo) {
        String? phone = userInfo['PhoneNumbers'] as String?;
        if (phone != null) {
          phoneNumbers.add(phone);
        }
      });
    }
  } catch (e) {
    print('获取数据出错: $e');
  }
  return phoneNumbers;
}

3. 在Widget中展示数据到文本框 #

用FutureBuilder处理异步数据，把所有电话号码拼接后放到只读的多行文本框里：

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

  @override
  State<PhoneNumberScreen> createState() => _PhoneNumberScreenState();
}

class _PhoneNumberScreenState extends State<PhoneNumberScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('所有电话号码')),
      body: FutureBuilder<List<String>>(
        future: getAllPhoneNumbers(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text('加载失败: ${snapshot.error}'));
          } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
            return const Center(child: Text('暂无电话号码数据'));
          } else {
            // 把号码用换行拼接，放到文本框中
            String allPhones = snapshot.data!.join('\n');
            return Padding(
              padding: const EdgeInsets.all(16.0),
              child: TextField(
                controller: TextEditingController(text: allPhones),
                maxLines: null,
                readOnly: true,
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: '所有电话号码',
                ),
              ),
            );
          }
        },
      ),
    );
  }
}

如果你的数据存在Firestore里，代码会更接近SQL的思路，步骤如下：

1. 添加Firestore依赖 #

dependencies:
  cloud_firestore: ^4.9.0

2. 编写获取数据的函数 #

Future<List<String>> getAllPhoneNumbersFromFirestore() async {
  List<String> phoneNumbers = [];
  try {
    // 直接查询Users集合的所有文档
    QuerySnapshot querySnapshot = await FirebaseFirestore.instance.collection('Users').get();
    for (var doc in querySnapshot.docs) {
      String? phone = doc.get('PhoneNumbers') as String?;
      if (phone != null) {
        phoneNumbers.add(phone);
      }
    }
  } catch (e) {
    print('获取数据出错: $e');
  }
  return phoneNumbers;
}

之后的展示逻辑和上面的文本框部分完全一致，只需要把FutureBuilder的future参数换成这个新函数即可。

开发阶段可以暂时开放数据库访问权限，但上线前一定要修改Firebase的安全规则！
比如实时数据库的临时规则（仅开发用）：

{
  "rules": {
    "Users": {
      ".read": true,
      ".write": true
    }
  }
}

Firestore的临时规则（仅开发用）：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /Users/{document} {
      allow read, write: if true;
    }
  }
}

生产环境要改成基于用户认证的规则，避免数据泄露。

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