개발/flutter

[Flutter] draggable_list 패키지 개발

iris3455 2025. 1. 24. 16:04


대망의 첫 package 개발하기

 

이번에 설 연휴가 10일이나 된다. 그래서 설 연휴 동안의 일정이 비어버리게 되었다. 이참에 예전부터 하고 싶었던 flutter 패키지 개발이나 해보자 해서 만들고 싶었던 패키지 개발에 들어가게 되었다.

collecter 서비스에는 아이템 스크롤 및 순서 정렬 부분이 있는데 현재 너무 복잡하게 구현되어 있다.  최대한 사용자가 손쉽게 아이템을 수정 및 추가할 수 있어서 개발한 기능인데 이게 스크롤이랑 컨트롤러를 여러개 사용하면서 이슈가 참 많았다. 때문에 간단하게 리팩토링 할 예정이었는데 이번 기회에 한번 이 기능을 패키지로 개발하여 적용해 보기로 하였다.

이 기능이다!

 

 

 

프로젝트 생성

1. 타입 선택

 

Flutter Package에는 Dart Packages(Dart 언어만 사용) , Plugin Packages(네이티브 언어 swift , kotlin 언어를 추가로 사용) 이렇게 구분 되어 있다. 대부분은 Dart Packages를 사용하고 나도 네이티브 언어로 개발 한 경험은 부족해서 dart 언어로만 패키지 개발을 해보기로 하였다.

 

 

2. 프로젝트 생성 및 옵션 선택

flutter create --template=package [package_name]

 

위의 명령어로 패키지 개발을 위한 프로젝트를 생성해주면 된다. 

(옵션을 선택하여 개발 언어를 설정해주거나 지원하는 플랫폼을 설정해줄 수도 있다.)

 

 

3. example 프로젝트 생성

 

example 프로젝트를 생성하여 시뮬레이터 빌드 및 패키지를 import하여 예시 코드를 작성해주어야 한다. 아래 명령어로 example 프로젝트도 안에 프로젝트 안에 생성한 후 example/pubspec.yaml에 개발하고 있는 패키지의 종속성을 아래와 같이 추가한다.

flutter create example
dependencies:
  flutter:
    sdk: flutter
  draggable_list: 
    path: ../

 

 

구조 설계

이 부분에서 고민을 많이 한 것 같다.
https://heenano.tistory.com/54

 

[Flutter] DraggableList의 아키텍쳐 분석

Flutter 커스텀 리스트 패키지 개발기 저번에 드래그를 통한 아이템 정렬 기능이 핵심인 패키지를 개발하면서 어떤 식으로 구조를 설계했는지 어떻게 동작하는지는 내용이 너무 길어질것 같아서

heenano.tistory.com

위의 포스팅에 자세하게 정리하였으니 참고!

 

배포

1. pubspec.yaml 

 

pubspec.yaml 파일의 상단에 패키지의 정보를 입력한다.

name: draggable_list (이름)
description: "A customizable draggable list view for Flutter." (설명)
version: 0.0.1 (버전)
homepage: https://github.com/irismake/draggable_list.git (깃 레포 주소)

 

 

2.  CHANGELOG.md

 

CHANGELOG.md 파일에 버전과 버전에 대한 정보를 작성 한다.

[0.0.1]
* Initial version.

 

 

3. LICENSE

 

나는 모든 사용자에게 수정, 배포, 상업적 이용이 가능한 MIT License로 명시하였다. 라이센스 파일 작성 방법은 간단하다.

패키지의 깃허브 레포에 접속해서 LICENSE 파일로 들어간후 편집 버튼을 누르면 choose a license template이 나온다.

 

그러면 아래와 같이 여러 라이센스들이 나오는데 원하는걸 클릭하여 Review and submit 를 누르면 바로 나의 레포의 LICENSE 파일이 업데이트 된다.

 

 

4. README.md

 

README는 배포 완료된 패키지를 보여주는 사이트의 맨 처음 페이지를 장식한다. 때문에 꼼꼼하고 잘 정리하여 작성하면 된다.

 

 

5. 배포

 

아래 명령어로 배포전 테스트 및 배포를 완료한다.

// 배포전 테스트
flutter packages pub publish --dry-run

// 이상 없다면 배포
flutter packages pub publish

//인증 요청이 나오면 URL로 접속해서 인증을 진행하면 된다.

배포 완료!!!

 

 

 

끝으로 

 

https://pub.dev/packages/draggable_list

 

draggable_list | Flutter package

A customizable draggable list view for Flutter.

pub.dev

 

 

 

무사히 10일만에 배포까지 완료하였다. 생각보다 오래 걸리진 않았고 flutter의 기본 개념들을 더 알게 된거 같아서 매우 귀중한 경험이었던것 같다!  뭔가 이렇게 도장깨듯이 한개씩 하다보니 점점 성장하는게 느껴졌다. 이 맛에 개발하나보다~