如何从Firebase显示用户下拉列表并选择Flutter

在一个应用程序中，我们可能需要让用户从多个选项中选择一个选项。在这种情况下，一个用户下拉列表是一个很好的选择。在本文中，我们将讨论如何从Firebase显示一个用户下拉列表，并选择Flutter。

我们将使用Firebase作为我们的后端，它提供了一个实时数据库服务，可用于存储我们的数据。Flutter也有一个很好的包称为firebase_database，它可以帮助我们与Firebase实时数据库通信。

以下是如何在Flutter中显示Firebase用户下拉列表的步骤：

步骤1：创建Firebase项目

首先，我们需要创建一个Firebase项目。如果您已经有一个Firebase项目，则可以跳到下一步。

• 登录Firebase控制台
• 创建一个新的Firebase项目
• 选择“实时数据库”选项卡
• 单击“创建数据库”按钮

现在，我们已经创建了一个Firebase项目，并为其添加了一个实时数据库。

步骤2：添加依赖项

为了与Firebase实时数据库通信，我们需要在我们的Flutter应用程序中添加firebase_database包的依赖项。打开pubspec.yaml文件，并添加以下内容：

dependencies:
  flutter:
    sdk: flutter
  firebase_database: ^7.0.0

在终端中运行flutter pub get，以下载并安装依赖项。

步骤3：连接Firebase

我们需要在我们的Flutter应用程序中连接Firebase实时数据库。在Flutter应用的“main.dart”文件中添加以下代码：

import 'package:firebase_core/firebase_core.dart';

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

步骤4：创建下拉列表

现在，我们已经准备好在我们的应用程序中创建一个下拉列表。以下是创建一个下拉列表并添加选项的示例代码：

DropdownButton<String>(
  value: dropdownValue,
  icon: Icon(Icons.arrow_drop_down),
  onChanged: (String newValue) {
    setState(() {
      dropdownValue = newValue;
    });
  },
  items: <String>['Option 1', 'Option 2', 'Option 3', 'Option 4']
      .map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
)

这个下拉列表是基本的，它只包含一个硬编码的字符串数组。接下来，我们将从Firebase实时数据库中获取数据，并将其添加到下拉列表中。

步骤5：从Firebase获取数据

为了从Firebase实时数据库中获取数据，我们需要添加以下代码：

DatabaseReference ref =
    FirebaseDatabase.instance.reference().child("users");
DataSnapshot dataSnapshot = await ref.once();
Map<dynamic, dynamic> values = dataSnapshot.value;

此代码获取名为“users”的节点从Firebase实时数据库，并将数据存储在valuesMap中。

步骤6：将数据添加到下拉列表

我们有了数据，现在我们需要将它们动态地添加到下拉列表中。以下是如何动态添加下拉列表项的示例代码：

DropdownButton<String>(
  value: dropdownValue,
  icon: Icon(Icons.arrow_drop_down),
  onChanged: (String newValue) {
    setState(() {
      dropdownValue = newValue;
    });
  },
  items: values.entries
      .map((MapEntry<dynamic, dynamic> e) =>
          DropdownMenuItem<String>(
            value: e.value["name"],
            child: Text(e.value["name"]),
          ))
      .toList(),
)

这个代码从我们的valuesMap中获取所有条目，并将它们添加到下拉列表中的DropdownMenuItem中。

步骤7：完整代码

下面是完整代码，用于从Firebase显示用户下拉列表并选择Flutter：

import 'package:firebase_database/firebase_database.dart';
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String dropdownValue = 'Option 1';
  Map<dynamic, dynamic> values;

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

  void getData() async {
    DatabaseReference ref =
        FirebaseDatabase.instance.reference().child("users");
    DataSnapshot dataSnapshot = await ref.once();
    setState(() {
      values = dataSnapshot.value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Firebase Dropdown'),
        ),
        body: Center(
          child: DropdownButton<String>(
            value: dropdownValue,
            icon: Icon(Icons.arrow_drop_down),
            onChanged: (String newValue) {
              setState(() {
                dropdownValue = newValue;
              });
            },
            items: values.entries
                .map((MapEntry<dynamic, dynamic> e) => DropdownMenuItem<String>(
                      value: e.value["name"],
                      child: Text(e.value["name"]),
                    ))
                .toList(),
          ),
        ),
      ),
    );
  }
}

这就是了。现在，您已经学会了如何显示用户下拉列表，并选择Flutter，使用Firebase实时数据库。