[flutter] velocity_x를 활용한 플러터 앱의 웹 URL 링크 및 딥링크 처리하기

14 Dec 2023

flutter

velocity_x는 flutter에서 간편하게 UI를 구성할 수 있게 도와주는 라이브러리 중 하나입니다. 여기에서는 velocity_x를 사용하여 플러터(Flutter) 애플리케이션에서 웹 URL링크 및 딥링크를 처리하는 방법에 대해 알아보겠습니다.

웹 URL 링크 처리하기

플러터 앱에서 웹 URL을 링크로 처리하기 위해서는 url_launcher 패키지를 사용하여 손쉽게 구현할 수 있습니다.

아래는 예시 코드입니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Web URL Link Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              const url = 'https://www.example.com';
              if (await canLaunch(url)) {
                await launch(url);
              } else {
                throw 'Could not launch $url';
              }
            },
            child: Text('Open URL'),
          ),
        ),
      ),
    );
  }
}

위 코드를 실행하면 “Open URL” 버튼을 누르면 해당 URL이 웹 브라우저에서 열립니다.

딥링크 처리하기

딥링크는 앱 내의 특정 화면으로 이동하는 링크를 말합니다. velocity_x를 사용하여 딥링크를 처리하는 절차는 다음과 같습니다.

Uri 획득: getUri 메서드를 사용하여 딥링크로 받은 URL을 파싱합니다.
링크 처리: 파싱한 URL을 기반으로 앱 내에서 해당하는 화면으로 이동합니다.

아래는 예시 코드입니다.

import 'package:flutter/material.dart';
import 'package:velocity_x/velocity_x.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final uriData = Uri.dataFromString('/product?id=123&name=example', mimeType: 'text');

    return MaterialApp.router(
      routeInformationParser: VxInformationParser(),
      routeDelegate: VxNavigator(routes: {
        '/': (_, __) => MaterialPage(child: HomePage()),
        '/product': (uri, __) {
          final id = int.parse(uri.queryParameters['id'] ?? '0');
          final name = uri.queryParameters['name'] ?? '';
          return MaterialPage(child: ProductPage(id: id, name: name));
        },
      }),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: 'Home'.text.make(),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            VxNavigator.of(context).pushNamed('/product');
          },
          child: 'Open Product'.text.make(),
        ),
      ),
    );
  }
}

class ProductPage extends StatelessWidget {
  final int id;
  final String name;

  const ProductPage({required this.id, required this.name});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: 'Product'.text.make(),
      ),
      body: Center(
        child: '$name (ID: $id)'.text.make(),
      ),
    );
  }
}

위 코드를 실행하면 “Open Product” 버튼을 누르면 /product?id=123&name=example과 같이 딥링크를 처리하여 ProductPage를 열게 됩니다.

velocity_x를 사용하여 플러터 앱에서 웹 URL링크 및 딥링크를 쉽게 처리할 수 있습니다. 이를 통해 사용자 경험을 향상시키고, 앱의 기능을 확장할 수 있습니다.