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

22min
소개
인터랙티브 드래그 앤 드롭 인터페이스는 사용자가 UI 요소를 직관적으로 조작할 수 있도록 하여 사용자 경험을 향상시킵니다. Flutter는 이러한 상호작용을 생성하기 위해 Draggable 및 DragTarget 위젯을 제공합니다. 이 튜토리얼에서는 Draggable 위젯을 사용하여 항목을 목록 간에 이동시키고, Parse Server 기반의 백엔드 서비스인 Back4App을 사용하여 데이터 지속성을 유지하는 Flutter 애플리케이션을 만드는 방법을 배웁니다.
이 튜토리얼이 끝나면 사용자가 한 목록에서 다른 목록으로 항목을 드래그할 수 있는 기능이 있는 Flutter 앱을 갖게 되며, 변경 사항은 Back4App에서 저장되고 검색됩니다. 이 튜토리얼은 모든 경험 수준의 Flutter 개발자에게 적합합니다.
전제 조건
이 튜토리얼을 완료하려면 다음이 필요합니다:
Flutter SDK가 귀하의 컴퓨터에 설치되어 있어야 합니다. 운영 체제에 대한 공식 Flutter 설치 가이드를 따르십시오.
Flutter 및 Dart에 대한 기본 지식. Flutter가 처음이라면 Flutter 문서를 검토하여 기본 사항에 익숙해지십시오.
Visual Studio Code 또는 Android Studio와 같은 IDE 또는 텍스트 편집기.
 Back4App 계정. Back4App에서 무료 계정을 등록하십시오.
Flutter용 Parse Server SDK가 프로젝트에 추가되어야 합니다. Back4App Flutter SDK 가이드를 따라 설정하는 방법을 배우십시오.
개요
우리는 작업을 "할 일" 목록에서 "완료" 목록으로 드래그할 수 있는 작업 관리 앱을 만들 것입니다. 이 앱은:
작업을 드래그할 수 있도록 Draggable 위젯을 사용하세요.
드롭 영역을 정의하기 위해 DragTarget 위젯을 사용하세요.
Back4App에서 작업을 저장하고 검색하여 데이터를 지속적으로 유지하세요.
1단계 – Flutter 프로젝트 설정하기
1.1. 새 Flutter 프로젝트 만들기
터미널을 열고 다음을 실행하세요:
Bash
flutter create drag_drop_app
flutter create drag_drop_app
﻿
프로젝트 디렉토리로 이동하세요:
Bash
cd drag_drop_app
cd drag_drop_app
﻿
1.2. 의존성 추가
열기 pubspec.yaml 다음 의존성을 추가하세요:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
﻿
실행 flutter pub get 패키지를 설치합니다.
2단계 – Back4App 설정
2.1. 새로운 Back4App 애플리케이션 만들기
로그인 하세요 Back4App 대시보드.
클릭하세요 "새 앱 만들기".
애플리케이션 이름을 입력하세요, 예: "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 및 다음과 같이 수정하십시오:
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(),
    );
  }
}
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:
Dart
// lib/models/task.dart
class Task {
  String id;
  String title;
  String status;

  Task({required this.id, required this.title, required this.status});
}
// 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:
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();
  }
}
// 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라는 이름의 파일을 추가하세요.
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),
      ),
    );
  }
}
// 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. 앱 실행하기
터미널에서 실행하세요:
Bash
flutter run
flutter run
﻿
7.2. 드래그 앤 드롭 기능 테스트
"할 일" 열에서 작업을 드래그하여 "완료" 열에 놓습니다.
작업의 상태가 업데이트되어야 하며, "완료" 아래에 나타나야 합니다.
변경 사항은 Back4App에 지속되며, 앱을 재시작해도 작업은 새로운 상태로 유지됩니다.
결론
이 튜토리얼에서는 Draggable 및 DragTarget 위젯을 사용하여 Flutter 애플리케이션에서 드래그 앤 드롭 기능을 구현하는 방법을 배웠습니다. Back4App을 통합하여 작업 데이터를 저장하고 검색할 수 있게 하여 세션 간 데이터 지속성을 가능하게 했습니다. 이 인터랙티브 앱은 직관적인 UI 요소와 확장 가능한 백엔드를 통해 사용자 경험을 향상시키는 방법을 보여줍니다.
주요 내용
드래그 가능한 위젯: 사용자가 UI 요소를 드래그할 수 있도록 합니다.
드래그 타겟 위젯: 드래그 가능한 항목을 위한 드롭 존을 정의합니다.
Back4App 통합: 데이터를 저장하고 관리할 수 있는 백엔드를 제공합니다.
다음 단계
인증 추가: 개인화된 작업 목록을 위해 사용자 인증을 구현합니다.
UI/UX 향상: 애니메이션, 사용자 정의 아이콘 및 개선된 레이아웃을 추가합니다.
실시간 업데이트: Back4App의 라이브 쿼리를 사용하여 여러 장치에서 작업을 실시간으로 업데이트합니다.
오류 처리: 네트워크 문제 및 데이터 충돌에 대한 오류 처리를 구현합니다.
추가 리소스
﻿Back4App 문서﻿
﻿Flutter 가이드용 Parse SDK﻿
﻿Flutter 공식 문서﻿
﻿드래그 가능한 위젯﻿
﻿드래그 타겟 위젯﻿
행복한 코딩!
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
Flutter에서 CallbackShortcuts와 Back4App을 사용하여 키보드 단축키를 구현하는 방법
Back4app 튜토리얼