Создание приложения Flutter с перетаскиванием и бросанием с использованием перетаскиваемых виджетов и Back4App

введение интерактивные интерфейсы перетаскивания улучшают пользовательский опыт, позволяя пользователям интуитивно управлять элементами интерфейса flutter предоставляет виджеты draggable и dragtarget для создания таких взаимодействий в этом учебном пособии вы узнаете, как создать приложение flutter, которое использует виджеты draggable для перемещения элементов между списками с сохранением данных с помощью 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/ sdk parse server для flutter добавлен в ваш проект узнайте, как его настроить, следуя руководству по sdk flutter от back4app 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 получение учетных данных приложения перейдите в настройки приложения > безопасность и ключи запишите ваш идентификатор приложения и ключ клиента шаг 3 – инициализация parse в вашем приложении flutter откройте 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(), ); } } замените 'your application id' и 'your client key' на ваши фактические учетные данные back4app шаг 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 – создание пользовательского интерфейса с draggable и dragtarget создайте новый каталог с именем 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 для хранения и извлечения данных задач, что позволяет сохранять данные между сессиями это интерактивное приложение демонстрирует, как улучшить пользовательский опыт с помощью интуитивно понятных элементов интерфейса и масштабируемого бэкенда ключевые выводы перетаскиваемые виджеты позволяет пользователям перетаскивать элементы интерфейса цели перетаскивания определяет зоны сброса для перетаскиваемых элементов интеграция с back4app обеспечивает бэкенд для хранения и управления данными следующие шаги добавить аутентификацию реализовать аутентификацию пользователей для создания персонализированных списков задач улучшить ui/ux добавить анимации, пользовательские иконки и улучшенные макеты обновления в реальном времени использовать live queries от back4app для обновления задач в реальном времени на нескольких устройствах обработка ошибок реализовать обработку ошибок для сетевых проблем и конфликтов данных дополнительные ресурсы документация back4app https //www back4app com/docs руководство по parse sdk для flutter 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 счастливого кодирования!