[flutter] 플러터 Wrap을 사용하여 앱의 딥링크 기능을 구현하는 방법

07 Dec 2023

flutter

앱의 딥링크 기능은 사용자가 앱 외부에서 특정 링크를 클릭했을 때 앱 내부의 특정 화면으로 이동하는 기능입니다. 이러한 기능을 구현하기 위해서는 딥링크 URL을 처리하는 로직을 작성해야 합니다.

플러터에서 딥링크 기능을 구현하는 방법 중 하나는 Wrap 위젯을 사용하는 것입니다. Wrap 위젯은 자식 위젯들을 줄바꿈하여 표시하는 역할을 합니다. 따라서 딥링크 URL을 처리하기 위해 Wrap 위젯을 활용하여 앱의 각 화면에 대한 링크 버튼을 생성할 수 있습니다.

아래는 플러터에서 Wrap을 사용하여 딥링크 기능을 구현하는 예제 코드입니다.

예제 코드:

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

class DeepLinkScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Deep Link Screen'),
      ),
      body: Center(
        child: Wrap(
          alignment: WrapAlignment.center,
          spacing: 10.0,
          children: [
            LinkButton(
              text: 'Open Screen A',
              deepLink: 'myapp://screenA',
            ),
            LinkButton(
              text: 'Open Screen B',
              deepLink: 'myapp://screenB',
            ),
            LinkButton(
              text: 'Open Screen C',
              deepLink: 'myapp://screenC',
            ),
          ],
        ),
      ),
    );
  }
}

class LinkButton extends StatelessWidget {
  final String text;
  final String deepLink;

  LinkButton({required this.text, required this.deepLink});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      child: Text(text),
      onPressed: () {
        _launchDeepLink(deepLink);
      },
    );
  }

  _launchDeepLink(String url) async {
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }
}

위의 예제 코드에서는 DeepLinkScreen 클래스에서 Wrap 위젯을 사용하여 딥링크 기능을 구현하였습니다. Wrap 위젯은 alignment를 사용하여 자식 위젯들의 정렬을 설정하고, spacing을 사용하여 자식 위젯들 사이의 간격을 조절할 수 있습니다.

LinkButton 클래스는 딥링크를 처리하는 버튼을 생성하는 위젯입니다. onPressed 콜백에서 _launchDeepLink 메서드를 호출하여 딥링크를 처리합니다. _launchDeepLink 메서드는 url_launcher 패키지를 사용하여 딥링크를 실행하는 역할을 합니다.

위의 예제 코드를 참고하여 플러터 앱에서 Wrap 위젯을 사용하여 앱의 딥링크 기능을 구현해보세요.

참고 문서: