[Flutter] How to Create Link Button

이번 포스팅에서는 Flutter에서 Link Button을 만드는 방법에 대해 살펴보겠습니다.

생각보다 어렵진 않으니 한 번 따라해 보세요.

Add Packages

먼저, pubspec.yaml 파일을 열고 필요한 패키지를 추가해 줍니다.

dependencies:
  flutter:
    sdk: flutter

  url_launcher: ^6.1.12

이제, 추가한 package를 가져옵니다.

$ flutter pub get

Configuration

전 iOS용으로 만들고 있어서, info.plist 파일에 다음 내용을 추가해 줬습니다.

<key>LSApplicationQueriesSchemes</key>
<array>
	<string>sms</string>
	<string>tel</string>
</array>

다른 플랫폼을 사용하신다면 공식 페이지를 참고하셔서 설정해 주시면 되요.

https://pub.dev/packages/url_launcher

필요한 준비는 끝났으니, 코드를 만들어 봅니다.

Create Link Buttons

이제, 패키지를 import합니다.

import 'package:url_launcher/url_launcher.dart';

다음으로, Link Button을 만듭니다.

InkWell(
  onTap: () {
    final uri = Uri.parse('https://www.buymeacoffee.com/llhoyall');
    launchUrl(uri);
  },
  child: SizedBox(
    height: 70,
    child: Image.network(
      'https://cdn.buymeacoffee.com/buttons/v2/default-green.png',
    ),
  ),
),

마우스 클릭을 위해 InkWell widget을 사용해서, onTap method에 Link Button을 클릭했을 때 이동할 URL을 적어 줍니다.

또, 예시로 온라인으로 이미지도 가져오도록 해봤습니다.

GestureDetector(
  onTap: () {
    final uri = Uri.parse('https://hdevstudy.tistory.com');
    launchUrl(uri);
  },
  child: const SizedBox(
    height: 70,
    child: Text(
      "Go To [HoYa's Development Blog]",
    ),
  ),
),

물론, Text widget으로 글씨를 사용할 수도 있습니다.

이번에는 GestureDetector widget을 사용하여 Link Button을 만들어 봤습니다.

위와 같은 방법으로 다양하게 응용해보실 수 있을 거에요.

Run Application

이제 실행을 시켜볼게요.

모든 Link Button이 잘 동작하는 것을 확인해 보실 수 있어요.

Wrap Up

이번에는 Flutter에서 Link Button을 만드는 방법에 대해 살펴 보았습니다.

url_launcher package를 사용해서 원하는 uri로 보낸다는 것만 숙지하시면 어렵지 않게 응용해 보실 수 있을거에요. ^^