[Feature request] Ability to have light and shadow for png images with transparent layers.

[aytunch]

Platforms

iOS

Description

In the parallax example: https://amoshuke.github.io/flutter_tilt_book/#/ParallaxImage you had to disable light and shadow because they are drawn as rectangles not as the png's border. Can we solve it with this package or use another package to first make our png's more usable? Thanks, the examples and documentation is great by the way.

Why

No response

[AmosHuKe]

Thank you for your suggestion 😄! @aytunch

Is it something like this?

There's a lot of code that needs to be changed, I'll try to find the time to finish it up.

https://github.com/fluttercandies/flutter_tilt/assets/32262985/64772a8f-db5f-4f45-ae54-0afa46b7a637

[aytunch]

Wow, this is exactly what I was aiming for :D Can't wait to try it

In my case, I don't use the TiltParallax, i just use the png as main Tilt I hope your solution is a general one for using PNGs in all Tilt widgets

[aytunch]

Hi @AmosHuKe , Do you have an ongoing PR for this new feature? I would love to test it.

[AmosHuKe]

Hi~ @aytunch I took some extra time. I tried a few ideas (e.g. canvas...), but they all had serious performance problems (because the widget is always tilting or moving).

The way it is now, the principle is simple. And the performance is not bad in some scenarios. Recommended for the following scenarios:

• Images only
• No data states

https://github.com/fluttercandies/flutter_tilt/assets/32262985/4274d8b0-6830-453b-801a-349be4354734

I've pushed it to https://github.com/fluttercandies/flutter_tilt/tree/feat-projector branch.

# pubspec.yaml

flutter_tilt:
    git:
      url: https://github.com/fluttercandies/flutter_tilt.git
      ref: feat-projector

Usage

Document: feat-projector/README

Tilt(
  lightShadowMode: LightShadowMode.projector,
  lightConfig: const LightConfig(
    ......
    projectorScale: 1.1,
  ),
  shadowConfig: const ShadowConfig(
    ......
    projectorScaleFrom: 1.0,
    projectorScaleTo: 1.0,
    projectorBlurSigmaFrom: 5.0,
    projectorBlurSigmaTo: 20.0,
  ),
  child: ......
),

[aytunch]

Hi @AmosHuKe I wanted to try the PR but it requires Flutter 3.19 or later. Unfortunately the codebase I am working on hasn't been migrated to latest Flutter yet. I will test the PR on a separate reproducible repo asap and report here. Thanks.

[AmosHuKe]

@aytunch Thanks for your time, feel free to report. 😄

[aytunch]

@AmosHuKe sorry for taking so long to return to this. Now we are at Flutter 3.24 and i saw no performance issues with https://github.com/fluttercandies/flutter_tilt/tree/feat-projector Thanks for this awesome package! Should we close this issue once new version is released?

[AmosHuKe]

@aytunch It's okay~ 😄 thanks again for the suggestion! (I've added you to the list of contributors)

New version

# pubspec.yaml

dependencies:
  flutter_tilt: ^3.2.0-rc.1