👋

flutterでSNSシェアする方法(iOSアプリのみ)

2023/11/28に公開

Xでリンクを共有する方法

social_shareパッケージを使用して下記コードのように実装

import 'package:social_share/social_share.dart';
 
Future<void> xPost(String url) async {
    await SocialShare.shareTwitter(url);
}

LINEでリンクを共有する方法

リンク文字列を編集して、url_launcherパッケージを使用して下記コードのように実装

import 'package:url_launcher/url_launcher.dart';
 
Future<void> lineMessage(String url) async {
    final encodedText = Uri.encodeComponent(url);
    final lineUrl = Uri(
      scheme: 'https',
      host: 'line.me',
      path: 'R/msg/text/$encodedText',
    );

    if (await canLaunchUrl(lineUrl)) {
      await launchUrl(lineUrl, mode: LaunchMode.externalApplication);
    } else {
      print('Could not launch $lineUrl');
    }
  }
}

facebookストリーズに画像を投稿する方法

基本的な流れは下記の通り
1.Meta for Developersにアプリの登録をして、アプリIDを取得
2.Info.plistを編集

<key>LSApplicationQueriesSchemes</key>
    <array>
        <string>facebook-stories</string>
    </array>

<key>FacebookAppID</key>
<string>{1で取得したアプリID}</string>

3.Podfileに下記を追加

target 'Runner' do
  pod 'FBSDKCoreKit'
  pod 'FBSDKLoginKit'
  pod 'FBSDKShareKit'
end

4.Widgetを画像化する

Future<String> _createImageWithText(
  String imagePath, String text, Directory documentDirectory) async {
  final ui.PictureRecorder recorder = ui.PictureRecorder();
  final Canvas canvas = Canvas(recorder);
  final Paint paint = Paint();

  // 元の画像をCanvasに描画する
  final ui.Image originalImage = await _loadImage(File(imagePath));
  canvas.drawImage(originalImage, Offset.zero, paint);

  // テキストを描画する
  final textSpan = TextSpan(
    style: TextStyle(
      color: Colors.white,
      fontSize: 40,
    ),
    text: text,
  );
  final textPainter = TextPainter(
    text: textSpan,
    textDirection: TextDirection.ltr,
  );
  textPainter.layout();
  textPainter.paint(canvas, const Offset(100, 100)); // テキストの位置を調整

  // 新しい画像を生成する
  final ui.Image finalImage = await recorder
    .endRecording()
    .toImage(originalImage.width, originalImage.height);
  final byteData =
    await finalImage.toByteData(format: ui.ImageByteFormat.png);
  final pngBytes = byteData!.buffer.asUint8List();

  // 新しい画像をファイルとして保存する
  final File imgFile = File('${documentDirectory.path}/image_with_text.png');
  await imgFile.writeAsBytes(pngBytes);

  return imgFile.path;
}

Future<ui.Image> _loadImage(File file) async {
  final data = await file.readAsBytes();
  return await decodeImageFromList(data);
}

5.path_provider,social_share,httpパッケージを使用する

import 'package:path_provider/path_provider.dart';
import 'package:social_share/social_share.dart';
import 'package:http/http.dart' as http;

Future<void> facebookStories(String imageUri) async {
    final response = await http.get(Uri.parse(imageUri));
    final documentDirectory = await getTemporaryDirectory();
    final originalImageFile = File('${documentDirectory.path}/tempImage.jpg');
    await originalImageFile.writeAsBytes(response.bodyBytes);

    final String imagePathWithText = await _createImageWithText(
      originalImageFile.path,
      '好きな文字列',
      documentDirectory,
    );

    await SocialShare.shareFacebookStory(
      appId: '1で取得したアプリID',
      imagePath: imagePathWithText,
      backgroundTopColor: '#ffffff',
      backgroundBottomColor: '#000000',
    );
 }

facebookフィードにリンクを投稿する方法

公式ドキュメント
基本的な流れは下記の通り
1.Meta for Developersにアプリの登録をして、アプリIDを取得
2.Info.plistを編集

<key>LSApplicationQueriesSchemes</key>
    <array>
        <string>fbapi</string>
    </array>

<key>FacebookAppID</key>
<string>{1で取得したアプリID}</string>

3.flutterからネイティブコードを呼び出し

import 'package:flutter/services.dart';

Future<void> facebookPost(String url) async {
    const MethodChannel('facebook').invokeMethod(
      'facebookPost',
      <String, dynamic>{
        'linkUrl': url,
      },
    );
}

4.AppDelegate.swiftを編集

import Flutter

var controller: FlutterViewController?;
var facebook: Facebook?

self.controller = (window?.rootViewController as! FlutterViewController);
let eventChannel = FlutterEventChannel(name: EVENT_CHANNEL_NAME, binaryMessenger: controller!.binaryMessenger)
    if let viewController = self.window?.rootViewController {
        self.facebook = Facebook(with: controller!.binaryMessenger, viewController: viewController)
} else {
     // 適切なエラーハンドリング...
}

5.facebookフィードに投稿する為の実装(ios/Runner/Component下にFacebook.swiftファイルを新規作成)

import Foundation
import Flutter
import FBSDKShareKit

class Facebook: SharingDelegate {
    private var channel: FlutterMethodChannel?
    private weak var viewController: UIViewController?

    init(with binaryMessenger: FlutterBinaryMessenger, viewController: UIViewController) {
        self.viewController = viewController
        channel = FlutterMethodChannel(name: "facebook", binaryMessenger: binaryMessenger)
        channel?.setMethodCallHandler(handle)
    }

    private func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
        switch call.method {
        case "facebookPost":
            let content = ShareLinkContent()
            guard let args = call.arguments as? [String: String],
                     let linkUrl = args["linkUrl"] as String?,
                     let url = URL(string: linkUrl) else {
                 result(false)
                 return
             }
             content.contentURL = url

             let dialog = ShareDialog(viewController: viewController, content: content, delegate: self)
             dialog.show()
        default:
            result(FlutterMethodNotImplemented)
        }
    }

    // SharingDelegateのメソッド
    @objc func sharer(_ sharer: Sharing, didCompleteWithResults results: [String : Any]) {
        print("Share completed with results: \(results)")
    }

    @objc func sharer(_ sharer: Sharing, didFailWithError error: Error) {
        print("Share failed with error: \(error)")
    }

    @objc func sharerDidCancel(_ sharer: Sharing) {
        print("Share cancelled")
    }
}

Discussion