드래그 앤 드롭 플러터 앱 만들기: 드래그 가능한 위젯과 Back4App 사용하기

소개 인터랙티브 드래그 앤 드롭 인터페이스는 사용자가 ui 요소를 직관적으로 조작할 수 있도록 하여 사용자 경험을 향상시킵니다 flutter는 이러한 상호작용을 생성하기 위해 draggable 및 dragtarget 위젯을 제공합니다 이 튜토리얼에서는 draggable 위젯을 사용하여 항목을 목록 간에 이동시키고, parse server 기반의 백엔드 서비스인 back4app을 사용하여 데이터 지속성을 유지하는 flutter 애플리케이션을 만드는 방법을 배웁니다 이 튜토리얼이 끝나면 사용자가 한 목록에서 다른 목록으로 항목을 드래그할 수 있는 기능이 있는 flutter 앱을 갖게 되며, 변경 사항은 back4app에서 저장되고 검색됩니다 이 튜토리얼은 모든 경험 수준의 flutter 개발자에게 적합합니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 flutter sdk 가 귀하의 컴퓨터에 설치되어 있어야 합니다 운영 체제에 대한 공식 flutter 설치 가이드 https //flutter dev/docs/get started/install 를 따르십시오 flutter 및 dart에 대한 기본 지식 flutter가 처음이라면 flutter 문서 https //flutter dev/docs 를 검토하여 기본 사항에 익숙해지십시오 visual studio code 또는 android studio와 같은 ide 또는 텍스트 편집기 back4app 계정 back4app https //www back4app com/ 에서 무료 계정을 등록하십시오 flutter용 parse server sdk 가 프로젝트에 추가되어야 합니다 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 데이터 모델 설정하기 애플리케이션 대시보드에서 "database" 섹션으로 이동합니다 "create a class" 를 클릭합니다 모달에서 "custom" 를 선택합니다 클래스 이름으로 "task" 를 입력합니다 "create class" 를 클릭합니다 2 3 클래스에 열 추가하기 "task" 클래스에서 "+" 를 클릭하여 새 열을 추가합니다 다음 열을 추가합니다 title 유형 string status 유형 string "task" 클래스에 샘플 데이터를 추가합니다 예를 들어 2 4 애플리케이션 자격 증명 얻기 app settings > security & keys로 이동합니다 당신의 application id 와 client key 를 기록해 둡니다 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(), ); } } 다음으로 교체하십시오 '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을 사용하여 ui 구축 새 디렉토리 생성 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에 지속되며, 앱을 재시작해도 작업은 새로운 상태로 유지됩니다 결론 이 튜토리얼에서는 draggable 및 dragtarget 위젯을 사용하여 flutter 애플리케이션에서 드래그 앤 드롭 기능을 구현하는 방법을 배웠습니다 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 행복한 코딩! unhandled content type