[Flutter] share_plus로 앱에서 링크 공유하기

 
 
스마트폰이 일상이 되어버린 시대에서 앱에서 공유기능은 필수가 되었습니다.
점심시간만 되면 슬랙에 많은 배민 링크가 올라오거나 친구들끼리 카톡으로 맛집 링크를 공유하지 않으신가요 ?
 
사용자는 링크를 통해 쉽게 앱으로 이동할 수 있고, 서비스를 운영하는 측에서는 많은 사용자 유입을 기대할 수 있게되었죠. 
 
최근에 테니스장 어플 '타이브레이크'의 웹버전을 개발하여 앱에서 공유할 수 있는 링크가 생겼습니다. 이번 포스팅에서는 share_plus를 통해 Flutter에서 앱 링크를 공유하는 과정을 가져보려합니다.
 
웹버전 구경도 한번 해보세요 !
 
https://tiebreak.vercel.app/

타이브레이크

 

share_plus

share_plus는 Flutter에서 손쉽게 링크를 공유할 수 있는 패키지입니다. http 패키지처럼 Flutter에서 기본 기능처럼 사용하는 가장 대중적인 패키지죠.
 
우선, 패키지 사용을 위해 pubspect.yaml에 직접 추가하거나 flutter pub add 명령어를 통해 설치해줍시다.
 

flutter pub add share_plus

 
패키지가 정상적으로 설치되었다면 이제 공유기능을 사용할 수 있습니다.
 
하지만 공유하기 전에 버튼이라도 있어야 클릭이 가능하겠죠 ? 우선 버튼클릭을 위한 UI작업부터 먼저 진행해볼게요.
 
 

공유하기 UI 작업

최근 당근마켓이나 캐치테이블처럼 인기있는 앱들은 대부분 상단의 App Bar 부분에 공유버튼을 제공하고 있습니다. 저도 개인적으로 앱 중간에 위치한 것보다 상단 고정된 부분에 있는게 접근하기 편한 것 같아요.
 
제가 예전에 개발에 참가했던 여신티켓도 공유기능이 대부분 상단에 존재하네요. 네이티브팀과 App Bar 규격을 맞추기위해 브릿지통신을 빡세게 했던 기억이 새록새록 납니다 ㅎㅎ..
 
우선 Flutter에서 제공하는 기본 아이콘을 App Bar에 추가해보겠습니다.
 

기본 디자인

 
 
흠 .. ios_share를 사용했는데 별로 이쁘지않네요.
 
하단이 좀 더 넓적한 아이콘이면 좋겠는데 기본적으로 제공하는 아이콘중에는 맘에 드는 디자인이 없습니다.
 
이럴때는 FontAwesome에서 아이콘을 찾아봅시다 ! Flutter도 font_awesome_flutter 패키를 설치하면 기본 아이콘보다 이쁜 디자인들을 사용할 수 있어요.
 
다행히 마음에 드는 아이콘을 찾았습니다. 기본 아이콘을 삭제하고 FontAwesome 아이콘으로 교체해보겠습니다.
 
 

FontAwesome 아이콘

 
 
다행히 기본형 아이콘보다 디자인이 괜찮네요. 매번 느끼지만 디자인은 정말 어려운것 같습니다.
 
이제 UI도 완성됐으니 버튼에 share 기능을 추가해주겠습니다.
 

share 기능 추가

 
공유기능 API는 정말 간단합니다. 아래 한줄이면 끝나죠.
 

Share.share('YOUR_SHARE_URL', subject: 'Look what I made!');

 
첫번째 인자로 공유하고 싶은 URL을 넣어줍니다. subject는 옵션인데 공유시 표시되는 '제목'을 넣어줄 수 있습니다.
 
공식 문서에 따르면 subject는 메일로 공유시 제목으로 자동 할당된다고 합니다.
 
저는 따로 함수를 만들어 공유기능을 제공하고 있습니다. URL에 court id가 필요하고 제목에 court name을 넣어주고 싶었고 추후 로직이 변경될수도 있기 때문이죠. 코드는 다음과 같습니다.
 

void onClickShareCourtUrl(String courtId, String courtName) {
    final shareCourtUrl = '${LinkContants.WEB_BASE_URL}/courts/${courtId}';
    Share.share(
      shareCourtUrl,
      subject: '${courtName} 코트',
    );
  }

 

 

선언한 함수를 터치영역에 추가하고 버튼을 클릭하면 다음과 같이 공유기능이 활성화 된것을 확인할 수 있습니다.

 

 

 
링크 뿐만 아니라 이미지, 오디오 같은 파일도 공유할 수 있습니다. 이때는 파일이 정상적으로 전달되었는지 여부를 확인하기 위해 비동기 결과인 result를 확인합시다.
 
로딩중이라면 Spinner를, 정상적으로 전송되었다면 Toast나 Popup을 띄워줄 수 있겠네요.
 

final result = await Share.shareXFiles([XFile('${directory.path}/image.jpg')], text: 'Great picture');

if (result.status == ShareResultStatus.success) {
    print('Thank you for sharing the picture!');
}

 

마치며

최근 앱에 필수 기능으로 자리 잡은 공유 기능을 추가해보았습니다.
간단히 패키지만 설명하려고 했는데 UI작업도 함께 진행했네요 (비록 버튼 하나지만)
 
신규유저를 유입시키고 사용자경험을 제공하기에 공유기능만큼 중요한게 없죠. 여러분도 한번 사용해보세요.