如何在Flutter中使用分段按钮与Back4app

介绍 分段按钮是material 3中引入的ui组件，允许用户从两个到五个选项中进行选择。当您想以干净、有序的方式提供一组独占或非独占的选择时，它们特别有用。在本教程中，我们将探讨如何在flutter应用中使用分段按钮，利用back4app作为后端来存储和管理所选选项。 先决条件 在开始之前，请确保您具备以下条件： 一个back4app账户。请在 back4app com https //www back4app com 注册一个免费账户。 在本地机器上设置flutter开发环境。如果您尚未设置，请遵循 flutter安装指南 https //flutter dev/docs/get started/install 。 对dart、flutter小部件和使用back4app进行后端服务的基本知识。 步骤1 – 设置您的back4app后端 创建一个back4app项目 登录到您的 back4app账户 https //www back4app com/ 并创建一个新项目。 创建解析类 在本教程中，创建一个名为 userpreferences 的解析类，以存储分段按钮中选择的选项： 用户名 (字符串)：用户的名称。 选定选项 (字符串)：用户选择的选项。 获取您的back4app凭据 导航到您的项目设置以检索您的应用程序id和客户端密钥，您需要这些信息将您的flutter应用连接到back4app。 步骤 2 – 设置 flutter 项目 创建一个新的 flutter 项目 打开终端或命令提示符并运行 flutter create segmented button example 添加依赖 打开 pubspec yaml 并添加以下依赖 dependencies flutter sdk flutter parse server sdk flutter latest version 运行 flutter pub get 来安装这些依赖 在您的应用中初始化 parse 在 lib/main dart , 初始化 parse sdk 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 preferencescreen(), ); } } 用您的实际 back4app 凭据替换 'your back4app app id' 和 'your back4app client key' 步骤 3 – 实现分段按钮 创建 preferencescreen 小部件 在 lib/main dart , 添加一个新小部件以显示和处理分段按钮 class preferencescreen extends statefulwidget { @override preferencescreenstate createstate() => preferencescreenstate(); } class preferencescreenstate extends state\<preferencescreen> { string? selectedoption; final list\<buttonsegment\<string>> options = \[ buttonsegment(value 'option 1', label text('option 1')), buttonsegment(value 'option 2', label text('option 2')), buttonsegment(value 'option 3', label text('option 3')), ]; @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('user preferences')), body padding( padding const edgeinsets all(16 0), child column( mainaxisalignment mainaxisalignment center, children \[ segmentedbutton\<string>( segments options, selected selectedoption == null ? {} { selectedoption!}, onselectionchanged (newselection) { setstate(() { selectedoption = newselection first; }); savepreference( selectedoption!); }, ), sizedbox(height 20), if ( selectedoption != null) text('selected $ selectedoption', style textstyle(fontsize 16)), ], ), ), ); } future\<void> savepreference(string selectedoption) async { final userpreference = parseobject('userpreferences') set('username', 'test user') // this would normally come from user data set('selectedoption', selectedoption); await userpreference save(); } } 这段代码定义了一个简单的用户界面，带有一个分段按钮，允许用户从三个选项中进行选择。所选的选项会在每次选择更改时存储在 back4app 中。 步骤 4 – 运行应用程序 运行你的应用程序 使用 flutter run 你应该能在屏幕上看到分段按钮。选择一个选项将更新状态并将选择存储在 back4app 中。 通过登录到你的 back4app 仪表板并检查 userpreferences 类来验证 back4app 中的数据 。你应该能看到与 flutter 应用程序中的选择相对应的条目。 结论 在本教程中，我们探讨了如何在 flutter 中实现和使用分段按钮。我们还演示了如何将 flutter 与 back4app 集成以存储用户偏好。分段按钮提供了一种干净且直观的方式来向用户展示多个选项，并且当与像 back4app 这样强大的后端结合时，可以显著提升应用程序的用户体验。 有关 flutter 小部件的更多信息，请查看 flutter 文档 https //flutter dev/docs , 有关后端集成提示，请访问 back4app 文档 https //www back4app com/docs 编程愉快！