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

введение интерактивные интерфейсы перетаскивания улучшают пользовательский опыт, позволяя пользователям интуитивно управлять элементами интерфейса flutter предоставляет виджеты draggable и dragtarget для создания таких взаимодействий в этом учебном пособии вы узнаете, как создать приложение flutter, которое использует виджеты draggable для перемещения элементов между списками с сохранением данных с помощью back4app — сервиса бэкенда на базе parse server к концу этого учебного пособия у вас будет функциональное приложение flutter, в котором пользователи смогут перетаскивать элементы из одного списка в другой, а изменения будут сохраняться и извлекаться из back4app это учебное пособие подходит для разработчиков flutter любого уровня предварительные требования чтобы завершить это учебное пособие, вам потребуется установленный flutter sdk следуйте https //flutter dev/docs/get started/install , соответствующему вашей операционной системе базовые знания о flutter и dart если вы новичок в flutter, ознакомьтесь с https //flutter dev/docs , чтобы ознакомиться с основами ide или текстовый редактор , такой как visual studio code или android studio аккаунт back4app зарегистрируйтесь для получения бесплатного аккаунта на https //www back4app com/ sdk parse server для flutter добавлен в ваш проект узнайте, как его настроить, следуя 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 войдите в ваш 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 для обновления задач в реальном времени на нескольких устройствах обработка ошибок реализовать обработку ошибок для сетевых проблем и конфликтов данных дополнительные ресурсы https //www back4app com/docs https //docs parseplatform org/flutter/guide/ https //flutter dev/docs https //api flutter dev/flutter/widgets/draggable class html https //api flutter dev/flutter/widgets/dragtarget class html счастливого кодирования!