初めに
個人開発でぼちぼちと進めていく中でいくつかの実装の一つをご紹介します。
やりたいこと
- 投稿したものテキストだけでなく画像もシェアできるようにする
| 共有前 | Twitter（Xへの共有） | 共有後 |
|---|---|---|
 |
 |
 |
実装までの流れ
- シェアしたいWidgetを作成する
- ScreenShotControllerを定義し、
captureFromWidgetを使用する - スクリーンショットしたものを一時ディレクトリに保存をする
- シェアに必要な画像を試行錯誤をして変換する
-
shareXFilesを使用して画像とテキストをシェアできるようにする
実装に必要なPackagesたち
実装していく
/// ScreenShotControllerを定義し、`captureFromWidget`を使用する
final screenshotController = ScreenshotController();
/// 今回は、Textのみをスクリーンショットする
final screenshotBytes = await screenshotController.captureFromWidget(
Text("シェアしたいよおお")
);
/// 一時ディレクトリに保存
final tempDir = await getTemporaryDirectory();
final filePath = '${tempDir.path}/shared_image.png';
/// シェアに必要な画像を試行錯誤をして変換する
final file = File(filePath);
await file.writeAsBytes(screenshotBytes);
/// shareXFilesを使用して画像とテキストをシェアできるようにする
await Share.shareXFiles(
[XFile(file.path)],
text: '${posts.foodName} in ${posts.restaurant} \n\n#FoodGram',
);
);
ぜひ、色々なWidgetをシェアしてみてね。
実装していたPR
最後に
MapLibreを使用したアプリを個人で開発しています･:*+.(( °ω° ))/.:+
- 「FoodGram」は、フードシェアアプリとなっており、あなたの好きなレストランの食事をぜひこのアプリで共有していただけると嬉しいです!!
このアプリのセールスポイント
- このアプリだけのレストランマップをユーザー全員で作成できる⭐️
- 自分だけのフードアルバムを構築できる⭐️
- 世界中の人たちの投稿を自由に閲覧できる⭐️