Image Message overlay like blurring

[Jafarili]

It would be great to extend the Image Message with the option of overlay like blurring (similar to this solution https://stackoverflow.com/a/59154739/4310309), it should be possible to add it to the new implementation in "FlyerChatImageMessageState"
The use case is for when you want to send a spoiler photo (like Telegram) that the other user can't initially see, but they only see if they choose to see. Another use case could be NSFW pictures that you can block first and let the user decide to see.
I can create a PR for it if it is find to have

[demchenkoalex]

Hello! Since it is per image basis, we would need a property of the image message class right? I am thinking something like blurred (boolean)

[Jafarili]

I'm actually using imageMessageBuilder now and it fixes the problem :)
Maybe my use case is very specific, I'm not sure if it is useful for others as well tbh

[demchenkoalex]

interesting :D can I see the code?

[Jafarili]

sure :) here: https://gist.github.com/Jafarili/385c22ac15e889ba2a6cfe719b290645

[demchenkoalex]

I improved this so there is no need to redefine the whole image, but rather image message builder will accept overlay param like this

imageMessageBuilder: (context, message) => FlyerChatImageMessage(
  message: message,
  overlay: GestureDetector(
    onTap: () {
      final newMessage = message.copyWith(overlay: false);
      _chatController.update(message, newMessage);
    },
    child: Positioned.fill(
      child: ClipRect(
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 30, sigmaY: 30),
          child: Container(
            color: Colors.white.withValues(alpha: 0.5),
            child: const Center(
              child: Text('Tap to reveal'),
            ),
          ),
        ),
      ),
    ),
  ),
),

and then you create image messages with overlay: true. In the example above tap will copy message with overlay: false making it disappear.

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-12-28.at.23.14.19.mp4