はじめに

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

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

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

Packageのインストール

flutter pub add url_launcher

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

iOSとAndroidのセットアップ

iOSのセットアップ

info.plist

<key>LSApplicationQueriesSchemes</key>
    <array>
        <string>items</string>
        <string>twitter</string>
        <string>instagram</string>
    </array>

Androidのセットアップ

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>

Twitterのアプリに飛ぶ

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

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)

Instagramのアプリに飛ぶ

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

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)

最後に

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

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

ちょっとした宣伝

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