在 Flutter 中使用来自 Back4app 的后端数据构建下拉菜单

介绍 曾经在 flutter 中创建动态下拉菜单时感到困惑吗？你并不孤单！在本指南中，我们将带你一步步构建一个从 back4app 后端获取选项的下拉菜单。这比你想象的要简单，到最后，你将在 flutter 应用中拥有一个灵活的数据驱动下拉菜单。 想象一下，你正在为一个披萨外卖服务构建一个应用。可用的配料可能会频繁变化，因此硬编码它们并不是理想的选择。这就是后端驱动下拉菜单派上用场的地方！ 先决条件 在我们深入之前，请确保你拥有一个 back4app 账户（别担心，注册是免费的）并在你的机器上安装了 flutter。如果你是 flutter 新手，请查看他们的安装指南。哦，基本了解 dart 和 flutter 小部件会有所帮助，但我们会在棘手的部分引导你！ 步骤 1 – 设置你的 back4app 后端 让我们设置我们的 back4app 后端。别担心，这并没有听起来那么可怕！ 首先，登录你的 back4app 账户。没有账户？没问题！前往 back4app com https //www back4app com 并注册 – 这既免费又快速。 创建一个新的后端项目。你可以给它起个聪明的名字，比如 'awesomedropdowndata'，或者如果今天感觉不太有创意，就用 'dropdownexample'。 现在，让我们创建一个 parse 类。把它想象成一个专门用于我们的下拉选项的表格。我们将其命名为 'options'（很有创意，对吧？）。添加一个名为 optionvalue (string) 的列来存储我们的下拉选择。 是时候添加一些示例数据了！让我们用一些美味的披萨配料填充我们的 'options' 类： 意大利香肠 蘑菇 额外奶酪 最后但同样重要的是，从你的项目设置中获取你的应用程序 id 和客户端密钥。我们需要这些来将我们的 flutter 应用连接到 back4app。 步骤 2 – 设置 flutter 项目 让我们创建一个新的 flutter 项目。打开终端，找到一个舒适的位置为你的项目，并运行： flutter create dropdown example 现在，让我们添加一些依赖项。打开 pubspec yaml 并添加这些行： dependencies flutter sdk flutter parse server sdk flutter ^3 1 0 # use the latest version available 别忘了运行 flutter pub get 来获取这些包！ 现在，让我们告诉我们的 flutter 应用如何与 back4app 通信。打开 lib/main dart 并添加这段代码。别担心，如果看起来有点吓人 – 我们会逐步解析它！ import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your back4app app id'; const keyclientkey = 'your back4app client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize(keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( home dropdownmenuscreen(), ); } } 记得将 'your back4app app id' 和 'your back4app client key' 替换为你实际的 back4app 凭据。这就像你的应用与 back4app 之间的秘密握手！ 步骤 3 – 构建下拉菜单 现在是有趣的部分 – 让我们创建下拉菜单吧！ 这是我们 dropdownmenuscreen 小部件的代码。看起来可能很多，但我们会逐步解析，保证！ class dropdownmenuscreen extends statefulwidget { @override dropdownmenuscreenstate createstate() => dropdownmenuscreenstate(); } class dropdownmenuscreenstate extends state\<dropdownmenuscreen> { string? selectedoption; list\<string> options = \[]; bool loading = true; @override void initstate() { super initstate(); fetchoptions(); } future\<void> fetchoptions() async { final query = querybuilder\<parseobject>(parseobject('options')); final response = await query query(); if (response success && response results != null) { setstate(() { options = response results! map((e) => e get\<string>('optionvalue')!) tolist(); loading = false; }); } else { setstate(() { loading = false; }); } } @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('pizza topping selector')), body loading ? center(child circularprogressindicator()) center( child dropdownbutton\<string>( value selectedoption, hint text('choose your topping'), items options map((string option) { return dropdownmenuitem\<string>( value option, child text(option), ); }) tolist(), onchanged (string? newvalue) { setstate(() { selectedoption = newvalue!; }); }, ), ), ); } } 哇，这是一大段代码！但别慌 – 让我们逐步解析。这小部件为我们做了几个关键的事情： 它正在连接我们的 back4app 后端并获取我们的选项列表。可以把它想象成服务员在餐厅给你带菜单。 在获取过程中，它会显示一个加载指示器。因为没有人喜欢盯着空白屏幕，对吧？ 一旦获取到选项，它会在一个漂亮的下拉菜单中显示它们。 当你选择一个选项时，它会记住你的选择。 酷吧？最棒的是，每当你在 back4app 中更新选项时，你的应用下次加载时会自动显示新列表。魔法！ 步骤 4 – 运行应用 真相时刻到了！使用 flutter run 运行你的应用。如果一切顺利，你应该会看到一个下拉菜单，里面填充了我们在 back4app 中存储的比萨配料。 继续，选择一个配料。注意它是如何即时更新的？这就是 flutter 中状态管理的力量！ 与后端集成的下拉菜单最佳实践 处理加载状态 正如你在我们的示例中看到的，我们在获取数据时使用加载指示器。这就像在客人等待晚餐时放一些音乐——这会让体验更好！ 错误处理 在一个真实的应用中，你会想要添加一些错误处理。如果互联网断了呢？或者 back4app 在打盹？总是要为意外情况做好计划！ 使用分页 如果你的下拉列表比芝加哥风格比萨的配料列表还要长，考虑实现分页。你的用户（和他们的设备）会感谢你。 结论 你刚刚在 flutter 中构建了一个智能的、后端驱动的下拉菜单！🎉 为什么不尝试扩展这个示例呢？也许添加一个按钮，将所选配料添加到比萨订单中，或者尝试在不同的 ui 组件中显示选项。天空才是极限！ 记住，如果你遇到困难或有问题，flutter 和 back4app 社区非常乐于助人。不要害羞，尽管问吧！ 现在去构建令人惊叹的动态用户界面吧！💪 欲了解更多信息，请查看 flutter 文档 https //flutter dev/docs 和 back4app 文档 https //www back4app com/docs 。祝编码愉快！