[Flutter] FlutterでXやInstagramを開く方法

![スクリーンショット 2023-11-22 17.37.35（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/3f86d2c7-87ec-09f6-4c89-7c790eecc2ee.png)

<img width="1240" height="112" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/6d8a7098-9aef-a19a-54fe-83a2d493e033.png" alt="YUMEMI New Grad Advent Calendar 2023">

# はじめに

https://pub.dev/packages/url_launcher

しかし、何も設定しないと、XやInstagramのアプリに飛ばずに、XやInstagramのサイト版に遷移をしてしまいます。

本来であれば、XやInstagramのアプリに飛びたいですよね。今回は、XやInstagramを開く方法をご紹介させていただきます。



:::note info
開発メモ
今回の実装は以下の記事を参考にさせていただきました🙇
:::

https://qiita.com/Riscait/items/422cc22873371617c850


# Packageのインストール

```terminal
flutter pub add url_launcher
```

```yaml
dependencies:
  url_launcher: ^6.2.1 #適宜最新のバージョンを入れてください
```


# iOSとAndroidのセットアップ

### iOSのセットアップ


```plist:info.plist
<key>LSApplicationQueriesSchemes</key>
    <array>
        <string>items</string>
        <string>twitter</string>
        <string>instagram</string>
    </array>
```

https://github.com/iseruuuuu/open_url_app/commit/f556e2168ea677094d6b26a764121516d72bd01d



### Androidのセットアップ

```xml:AndroidManifest.xml
<queries>
     <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="twitter" />
    </intent>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="instagram" />
    </intent>
    <intent>
        <action android:name="android.support.customtabs.action.CustomTabsService" />
    </intent>
</queries>
```

https://github.com/iseruuuuu/open_url_app/commit/97524413f4546f2ceb913f9c402ba9254907680d



# Twitterのアプリに飛ぶ

:::note info
開発メモ
・urlは、Xではなくtwitterなのですね💦
・`twitter://user?screen_name=〇〇`の〇〇のところに表示したいIDを入れてください。
・`https://twitter.com/〇〇`の〇〇のところに表示したいIDを入れてください。
:::

```dart
final nativeUrl = Uri.parse('twitter://user?screen_name=isekiryu');
final webUrl = Uri.parse('https://twitter.com/isekiryu');
if (await canLaunchUrl(nativeUrl)) {
  await launchUrl(
    nativeUrl,
    mode: LaunchMode.externalApplication,
  );
} else if (await canLaunchUrl(webUrl)) {
  await launchUrl(
    webUrl,
    mode: LaunchMode.platformDefault,
  );
}
```

# 遷移した画面

| iOS(アプリ) | iOS(Web) | Android（アプリ） | Android(Web) | 
|:-----------:|:------------:|:-----------:|:------------:|
| <img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/776b746a-52c3-b77b-adc5-f2b3e0bbdb33.png"> | <img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/93300383-1d04-f83d-3754-991a0298e207.png"> | <img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/2b92f9b8-9f4d-effa-b614-fc4d2ebde509.png"> | <img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/5a2b5a7d-5155-80ed-283e-7ae9bdb73320.png">  | 



# Instagramのアプリに飛ぶ

:::note info
開発メモ
・`instagram://user?username=〇〇`の〇〇のところに表示したいIDを入れてください。
・`https://www.instagram.com/〇〇/`の〇〇のところに表示したいIDを入れてください。
:::

```dart
final nativeUrl = Uri.parse('instagram://user?username=iseki_ryutaro');
final webUrl = Uri.parse('https://www.instagram.com/iseki_ryutaro/');
  if (await canLaunchUrl(nativeUrl)) {
    await launchUrl(
    nativeUrl,
    mode: LaunchMode.externalApplication,
  );
} else if (await canLaunchUrl(webUrl)) {
  await launchUrl(
    webUrl,
    mode: LaunchMode.platformDefault,
  );
}
```

# 遷移した画面

| iOS(アプリ) | iOS(Web) | Android（アプリ） | Android(Web) | 
|:-----------:|:------------:|:-----------:|:------------:|
| <img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/7712e7a7-a675-2a9b-4fc1-968df8f6fa53.png"> | <img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/e0e0b804-6086-9921-0c85-c3c984a7584c.png"> | <img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/8967ea20-db41-6004-75e0-e7073be28e91.png"> | <img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/521cf5e7-d61b-d552-d905-f6dc7e4c0502.png">  | 



# 最後に

こちらにリポジトリを掲載します

https://github.com/iseruuuuu/open_url_app



アプリを作る中で意外と必要そうであるのにも関わらず、記事などは多くないと思いました💦
少しでもお役に立てれば嬉しいです😆


# ちょっとした宣伝


株式会社ゆめみの23卒のメンバーでアドベントカレンダーを作成しています。
新卒のフレッシュな記事がたくさん投稿予定なので、少しでも興味があれば購読いただけると幸いです！！


https://qiita.com/advent-calendar/2023/yumemi-23-graduation


<img width="1240" height="112" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/6d8a7098-9aef-a19a-54fe-83a2d493e033.png" alt="YUMEMI New Grad Advent Calendar 2023">