使用可拖放小部件和 Back4App 构建拖放 Flutter 应用程序

介绍 交互式拖放界面通过允许用户直观地操作ui元素来增强用户体验。flutter提供了 draggable 和 dragtarget 小部件来创建这样的交互。在本教程中，您将学习如何构建一个使用 draggable 小部件在列表之间移动项目的flutter应用程序，并使用back4app进行数据持久化——这是一个由parse server提供支持的后端即服务。 在本教程结束时，您将拥有一个功能齐全的flutter应用程序，用户可以将项目从一个列表拖动到另一个列表，所做的更改将存储并从back4app中检索。这个教程适合所有经验水平的flutter开发者。 先决条件 要完成本教程，您需要： 在您的机器上安装的 flutter sdk 。请按照 官方flutter安装指南 https //flutter dev/docs/get started/install 进行操作，适用于您的操作系统。 对flutter和dart的基本知识 。如果您是flutter新手，请查看 flutter文档 https //flutter dev/docs 以熟悉基础知识。 一个ide或文本编辑器 ，如visual studio code或android studio。 一个 back4app账户 。在 back4app https //www back4app com/ 注册一个免费账户。 添加到您的项目中的 parse server sdk for flutter 。通过遵循 back4app flutter sdk指南 https //www back4app com/docs/flutter/parse flutter sdk 来了解如何设置它。 概述 我们将构建一个任务管理应用程序，任务可以从“待办事项”列表拖动到“已完成”列表，反之亦然。该应用程序将： 使用 draggable 小部件来启用任务的拖动。 使用 dragtarget 小部件来定义放置区域。 从 back4app 存储和检索任务以持久化数据。 步骤 1 – 设置 flutter 项目 1 1 创建一个新的 flutter 项目 打开终端并运行 flutter create drag drop app 导航到项目目录 cd drag drop app 1 2 添加依赖项 打开 pubspec yaml 并添加以下依赖项 dependencies flutter sdk flutter parse server sdk flutter ^4 0 1 运行 flutter pub get 来安装包 步骤 2 – 设置 back4app 2 1 创建一个新的 back4app 应用程序 登录到您的 back4app 控制面板 https //dashboard back4app com/ 点击 "创建新应用" 输入您的应用程序名称，例如 "dragdropapp" , 然后点击 "创建" 2 2 设置数据模型 在您的应用程序仪表板中，导航到 "数据库" 部分。 点击 "创建一个类" 。 在弹出窗口中： 选择 "自定义" 。 输入 "任务" 作为类名。 点击 "创建类" 。 2 3 向类中添加列 在 "任务" 类中，点击 "+" 以添加新列。 添加以下列： 标题 类型 字符串 状态 类型 字符串 向 "任务" 类中添加一些示例数据。例如： 2 4 获取应用程序凭据 导航到 应用设置 > 安全性与密钥 。 记下您的 应用程序 id 和 客户端密钥 。 步骤 3 – 在您的 flutter 应用中初始化 parse 打开 lib/main dart 并按如下方式修改它 import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'screens/home page dart'; // you'll create this file next void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your application id'; const keyclientkey = 'your client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, debug true, ); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'drag and drop app', theme themedata( primaryswatch colors blue, ), home homepage(), ); } } 用你的实际 back4app 凭据替换 'your application id' 和 'your client key' 步骤 4 – 创建任务模型 创建一个名为 models 的新目录在 lib 下，并添加一个名为 task dart // lib/models/task dart class task { string id; string title; string status; task({required this id, required this title, required this status}); } 步骤 5 – 从 back4app 获取任务 创建一个名为 services 的新目录在 lib 下，并添加一个名为 task service dart // lib/services/task service dart import 'package\ parse server sdk flutter/parse server sdk dart'; import ' /models/task dart'; class taskservice { future\<list\<task>> gettasksbystatus(string status) async { final querybuilder\<parseobject> query = querybuilder\<parseobject>(parseobject('task')) whereequalto('status', status); final parseresponse apiresponse = await query query(); if (apiresponse success && apiresponse results != null) { return apiresponse results! map((data) { return task( id data objectid!, title data get\<string>('title') ?? '', status data get\<string>('status') ?? '', ); }) tolist(); } else { return \[]; } } future\<void> updatetaskstatus(string id, string status) async { var task = parseobject('task') objectid = id set('status', status); await task save(); } } 第6步 使用可拖动和拖放目标构建用户界面 创建一个名为 screens 的新目录，位于 lib 下，并添加一个名为 home page dart // lib/screens/home page dart import 'package\ flutter/material dart'; import ' /models/task dart'; import ' /services/task service dart'; class homepage extends statefulwidget { @override homepagestate createstate() => homepagestate(); } class homepagestate extends state\<homepage> { final taskservice taskservice = taskservice(); list\<task> todotasks = \[]; list\<task> completedtasks = \[]; @override void initstate() { super initstate(); fetchtasks(); } future\<void> fetchtasks() async { var todo = await taskservice gettasksbystatus('to do'); var completed = await taskservice gettasksbystatus('completed'); setstate(() { todotasks = todo; completedtasks = completed; }); } void ondragaccept(task task, string newstatus) async { await taskservice updatetaskstatus(task id, newstatus); await fetchtasks(); } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('drag and drop tasks'), ), body row( children \[ expanded( child taskcolumn( title 'to do', tasks todotasks, ondragaccept (task) => ondragaccept(task, 'to do'), ), ), expanded( child taskcolumn( title 'completed', tasks completedtasks, ondragaccept (task) => ondragaccept(task, 'completed'), ), ), ], ), ); } } class taskcolumn extends statelesswidget { final string title; final list\<task> tasks; final function(task) ondragaccept; taskcolumn({ required this title, required this tasks, required this ondragaccept, }); @override widget build(buildcontext context) { return dragtarget\<task>( onwillaccept (task) => true, onaccept (task) { ondragaccept(task); }, builder (context, candidatedata, rejecteddata) { return container( padding edgeinsets all(16 0), child column( children \[ text( title, style textstyle(fontsize 22, fontweight fontweight bold), ), expanded( child listview( children tasks map((task) { return draggable\<task>( data task, feedback material( child taskcard(task task), elevation 4 0, ), childwhendragging opacity( opacity 0 5, child taskcard(task task), ), child taskcard(task task), ); }) tolist(), ), ), ], ), ); }, ); } } class taskcard extends statelesswidget { final task task; taskcard({required this task}); @override widget build(buildcontext context) { return card( margin edgeinsets symmetric(vertical 8 0), child listtile( title text(task title), ), ); } } 解释 主页 显示两个列的主屏幕——“待办”和“已完成”任务。 任务列 一个显示任务的部件，并作为一个 拖放目标 用于 可拖动 任务。 任务卡 一个显示单个任务信息的部件。 步骤 7 – 运行应用程序 7 1 运行应用程序 在你的终端中，运行 flutter run 7 2 测试拖放功能 从 "待办" 列中拖动一个任务并将其放入 "已完成" 列中。 任务的状态应该更新，并且它应该出现在 "已完成" 下。 更改在 back4app 中保持不变；如果你重新启动应用程序，任务将保持在其新状态。 结论 在本教程中，你学习了如何在 flutter 应用程序中实现拖放功能，使用了 draggable 和 dragtarget 小部件。你集成了 back4app 来存储和检索任务数据，从而实现了跨会话的数据持久性。这个互动应用程序展示了如何通过直观的 ui 元素和可扩展的后端来增强用户体验。 关键要点 可拖动小部件 允许用户拖动ui元素。 拖放目标小部件 定义可拖动项目的放置区域。 back4app集成 提供一个后端来存储和管理数据。 后续步骤 添加身份验证 实现用户身份验证以拥有个性化的任务列表。 增强ui/ux 添加动画、自定义图标和改进的布局。 实时更新 使用back4app的实时查询在多个设备上实时更新任务。 错误处理 实现网络问题和数据冲突的错误处理。 其他资源 back4app文档 https //www back4app com/docs flutter的parse sdk指南 https //docs parseplatform org/flutter/guide/ flutter官方文档 https //flutter dev/docs 可拖动小部件 https //api flutter dev/flutter/widgets/draggable class html 拖放目标小部件 https //api flutter dev/flutter/widgets/dragtarget class html 快乐编码！