【Flutter】photo_viewer を使ってSNS系のアプリをよりいいものにする

はじめに

これから紹介するPackagesを使うことで自分の作成しているアプリである「FoodGram」というフードシェアアプリにおいて、とても効果的かつ、よりいいアプリになると確信できたため、採用し、実装を進めました。

Packagesについて

僕の知り合いの方が2025/03/01に公開して、その内容を「Flutter Tokyo #5」 で登壇されていたようです。（僕は別件で参加できませんでした🥲）

実装したい内容

• タップすると画像を詳しく見るようにしたい

すでに実装している内容　

• 画像をダブルタップすると、いいねをする
• 画面遷移のアニメーションにHeroineという画面遷移のアニメーションを採用する

実装してみた

• 実装にあたって開発者であるくまもんさんがリプをしていただき、アドバイスをしてくれました。既存の実装にあるGestureDetectorをPhotoViewerImageでも使っている点やHeroineとDragDismissableが競合しているかもしれなかったので、実装に工夫が必要そうでした。

実装前

GestureDetector(
  // いいねをする処理
  onDoubleTap: handleHeart,
  child: DragDismissable(
    // 画像を右or左スワイプをすると閉じる処理
    onDismiss: () => context.pop(),
    //HeroineというPackagesを使用（画面遷移のアニメーション）
    child: Heroine(
      tag: 'image-${posts.id}',
      child: Container(
        width: deviceWidth,
        height: deviceWidth,
        color: Colors.white,
        child: CachedNetworkImage(
          imageUrl: supabase.storage
              .from('food')
              .getPublicUrl(posts.foodImage),
          fit: BoxFit.cover,
        ),
      ),
    ),
  ),
),

実装後

アドバイスをいただきながら開発できました。ありがとうございます🙇

DragDismissable(
  onDismiss: () => context.pop(),
  child: GestureDetector(
    onTap: () {
      showPhotoViewer(
        context: context,
        heroTagBuilder: (context) => 'image-${posts.id}',
        builder: (context) => Container(
          width: deviceWidth,
          height: deviceWidth,
          color: Colors.white,
          child: CachedNetworkImage(
            imageUrl: supabase.storage
                .from('food')
                .getPublicUrl(posts.foodImage)
            fit: BoxFit.cover,
          ),
        ),
      );
    },
    onDoubleTap: handleHeart,
    child: Heroine(
      tag: 'image-${posts.id}',
      child: Container(
        width: deviceWidth,
        height: deviceWidth,
        color: Colors.white,
        child: CachedNetworkImage(
          imageUrl: supabase.storage
              .from('food')
              .getPublicUrl(posts.foodImage),
          fit: BoxFit.cover,
        ),
      ),
    ),
  ),

完成したアプリの動画

最後に

アプリを個人で開発しています･:*+.(( °ω° ))/.:+

ダウンロードリンク

• 「FoodGram」は、フードシェアアプリとなっており、あなたの好きなレストランの食事をぜひこのアプリで共有していただけると嬉しいです!!

このアプリのセールスポイント

• このアプリだけのレストランマップをユーザー全員で作成できる⭐️

ぜひダウンロードして使ってくれると嬉しいです🙇