[Flutter] Share Link with Firebase/링크로 공유하기

결과 화면 미리보기

 

공유 버튼 누르면 이렇게 링크를 공유할 수 있는 다이얼로그가 튀어나온다.

거기서 링크 복사를 누르고 이렇게 아무데나 붙여놓은 후, 링크를 클릭하면

이렇게 앱의 공유 화면으로 이동한다!! 나는 공유 링크를 생성할 때 video의 uuid를 사용했어서 그걸 출력해봤다.

0. 의존성 추가

  dependencies: // 최신 버전 확인 필수!
      firebase_core: ^2.15.1
      firebase_dynamic_links: ^5.3.5
      uni_links: ^0.5.1
      share_plus: ^7.1.0
      flutterfire_cli: ^0.2.7

 

1. Firebase 프로젝트 생성

다이나믹 링크 클릭!!

근데 25년 8월까지라네...

저는 23년의 졸업 프로젝트를 위해 사용하는 거니까... 그냥 사용할게여

다른 기능들도 비슷하지 않을까~....난챳떼,,,

근데 이거 아니면 머 쓰지?? 서버에서 만들어주나?

 

 

암튼 도메인을 pocketpose.page.link로 정하고, 프리픽스인가 그걸 share이라는 이름으로 만들었다.

 

2. Flutter에 Firebase 연동

- 이 문서를 참고하세요

https://firebase.google.com/docs/flutter/setup?platform=ios&hl=ko 

Flutter 앱에 Firebase 추가

 

3. Android에서의 Dynamic Links의 설정

Manifeat.xml 파일에 아래 내용을 추가한다.

<activity android:name=".MainActivity" ...>
<!--For Dynamic links-->
<intent-filter>
    <action android:name="android.intent.action.VIEW"/>
    <category android:name="android.intent.category.DEFAULT"/>
    <category android:name="android.intent.category.BROWSABLE"/>
    <data
        android:host="아까 파이어베이스에서 등록한 도메인 입력(나는 pocketpose.page.link)"
        android:scheme="https"/>
</intent-filter>
</activity>

 

4. iOS에서의 Dynamic Links의 설정

ios/Runner/Runner.entitlements 파일을 아래와 내용을 추가한다.

<?xml version="1.0" encoding="UTF-8"?>
http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
   <key>com.apple.developer.associated-domains</key>
   <array>
      <string>applinks:아까 생성한 도메인 입력(pocketpose.page.link)</string>
   </array>
</dict>
</plist>

 

5. Flutter에서 Dynamic Links 가져와 공유 하기

5-1. config > share > dynamic_link.dart

dynamic link를 다루는 클래스를 싱글톤으로 만들어주려고 일케 만들어봤다...

import 'dart:developer';

import 'package:firebase_dynamic_links/firebase_dynamic_links.dart';
import 'package:get/route_manager.dart';
import 'package:pocket_pose/ui/screen/share_screen.dart';
import 'package:uni_links/uni_links.dart';

class DynamicLink {
  static final DynamicLink _dynamicLink = DynamicLink._internal();

  factory DynamicLink() {
    return _dynamicLink;
  }

  DynamicLink._internal() {
    setup();
  }

  Future<bool> setup() async {
    bool isExistDynamicLink = await _getInitialDynamicLink();
    _addListener();

    return isExistDynamicLink;
  }

  // 앱 종료 후 리다이랙션
  Future<bool> _getInitialDynamicLink() async {
    final String? deepLink = await getInitialLink();

    if (deepLink != null) {
      PendingDynamicLinkData? dynamicLinkData = await FirebaseDynamicLinks
          .instance
          .getDynamicLink(Uri.parse(deepLink));

      if (dynamicLinkData != null) {
        _redirectScreen(dynamicLinkData);

        return true;
      }
    }

    return false;
  }

  void _addListener() {
    FirebaseDynamicLinks.instance.onLink.listen((
      PendingDynamicLinkData dynamicLinkData,
    ) {
      _redirectScreen(dynamicLinkData);
    }).onError((error) {
      log("mmm share linek error: $error");
    });
  }

  // 앱 실행 중 리다이렉션
  void _redirectScreen(PendingDynamicLinkData dynamicLinkData) {
    String videoUuid = dynamicLinkData.link.path.split('/').last;
    Get.to(() => ShareScreen(
          videoUuid: videoUuid,
        ));
  }

  Future<String> getShortLink(String uuid) async {
    String dynamicLinkPrefix = 'https://hatch2023pocketpose.page.link';
    final dynamicLinkParams = DynamicLinkParameters(
      uriPrefix: dynamicLinkPrefix,
      link: Uri.parse('$dynamicLinkPrefix/$uuid'),
      androidParameters: const AndroidParameters(
        packageName: 'com.example.pocketpose',
        minimumVersion: 0,
      ),
      iosParameters: const IOSParameters(
        bundleId: 'com.example.pocketPose',
        minimumVersion: '0',
      ),
    );
    final dynamicLink =
        await FirebaseDynamicLinks.instance.buildShortLink(dynamicLinkParams);

    return dynamicLink.shortUrl.toString();
  }
}

 

 

 

6. main.dart에 dynamic link 실행 코드 추가

Future<void> main() async {
  // 비동기 메서드를 사용함
  WidgetsFlutterBinding.ensureInitialized();
 
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  
  // 이거 추가~
  DynamicLink().setup();
//....

 

7. 공유 다이얼로그 실행되기 원하는 곳에 아래 코드 추가

onTap: () async {
    Share.share(
    	await DynamicLink()
        .getShortLink(widget.videoData.uuid),
        );
}

끝~~~

 

참고

https://jay-flow.medium.com/flutter-dynamic-links-%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%98%EC%97%AC-deep-link-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-ce41cb9baf2c

[Flutter] Dynamic Links 를 활용하여 Deep Link 구현하기

---

생각보다 쉽지만,,, 생각보다 귀찮았다.ㅎㅎㅋㅋㅋㅋ

개발 개같이 쌓임

후기 쓸 시간도 없다.

 

다음 개발은 카카오 공유인데요... 앱 출시 안 했는데 공유 되겠지...?

가보자고