Flutter SNSのアプリ起動と各OS設定

SNSアプリリンク先をブラウザで開くかアプリで開くか

タイトルにもある通り、flutterでiOSとandroid両方でSNSのアプリ表示する必要がありました。
実装してみたのでその備忘録です。

SNSアプリは

1. x
2. インスタ
3. facebook
4. youtube

上記になります。

実際にandroid側では、アプリをインストールしている場合、指定のアプリが開く。
無い場合は外部ブラウザを開くことを確認しています。

(iOSは未確認です)

android側　android\app\src\main\AndroidManifest.xml

/// ファイル先：android\app\src\main\AndroidManifest.xml
<manifest xmlns:android="〇〇〇" package="com.example.app>
/// 省略
 <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="x" />
        </intent>

        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="instagram" />
        </intent>

        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="fb" />
        </intent>

        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="youtube" />
        </intent>

        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="vnd.youtube" />
        </intent>
    </queries>
</manifest>

iOS側　 ios\Runner\Info.plist

iosのコードはこちら

/// ios\Runner\Info.plist
<plist version="1.0">
/// 省略
    <key>LSApplicationQueriesSchemes</key>
	<array>
	<string>twitter</string>
	<string>x</string>
	<string>instagram</string>
	<string>fb</string>
	<string>fbapi</string>
	<string>fb-messenger-share-api</string>
	<string>fbauth2</string>
	<string>youtube</string>
	<string>vnd.youtube</string>
	</array>
</plist>

ここまででまずは各ＯＳの設定は終了かと思います。

flutter側

アプリを開くときと、アプリから外部ブラウザを開く際のURI先が違うので注意が必要。
インストールしている各アプリを開きたい場合のURI

'twitter://user?screen_name=$アカウント名'
'instagram://user?username=$アカウント名'   
'fb://profile/アカウント名'
'youtube://www.youtube.com/user/$チャンネル'

外部サイトを開く際のURLは同じにのhttps:から始まるのでここでは割愛

使うパッケージはurl_lancherです。
https://pub.dev/packages/url_launcher

ボタンを押した際の処理が下記になります。

/// 画面側、省略
ElevatedButton(
            onPressed:_launch,)
/// 省略
/// SNSを開く
Future<void> _launch() async {
  final appUri = Uri.parse('twitter://user?screen_name=$アカウント名');
  final webUri = 'https://x.com/$アカウント名;

  if (await canLaunchUrl(appUri)) {
    /// アプリで開く
    await launchUrl(appUri);
  } else {
    /// 外部ブラウザ
    await launchUrlString(
      webUri,
      mode: LaunchMode.externalApplication,
    );
  }
}

実際にはもう少しうまく処理を記載していますが、記事の為そちらはご愛嬌ということで。

xとインスタはよく記事にあるのですが、facebookとyoutubeの記載がなく、
ここはAIに聞きました。

AIのおかげで調べる時間が減り、実装スピードがまじで速くなっていると実感しています。

それと同時に僕たちエンジニアの仕事も減りそうですね。
生き残らねば。