Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
aytunch opened this issue Apr 1, 2024 · 6 comments · May be fixed by #12
Open

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

aytunch opened this issue Apr 1, 2024 · 6 comments · May be fixed by #12
Labels
a: await response Issue require customer's further response c: enhancement New feature or request

Comments

@aytunch
Copy link

aytunch commented Apr 1, 2024

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
Copy link
Member

AmosHuKe commented Apr 1, 2024

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.

Demo.mp4

@AmosHuKe AmosHuKe added the c: enhancement New feature or request label Apr 1, 2024
@aytunch
Copy link
Author

aytunch commented Apr 1, 2024

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
Copy link
Author

aytunch commented Apr 4, 2024

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

@AmosHuKe
Copy link
Member

AmosHuKe commented Apr 5, 2024

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
demo.mp4

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: ......
),

@AmosHuKe AmosHuKe added the a: await response Issue require customer's further response label Apr 5, 2024
@aytunch
Copy link
Author

aytunch commented Apr 12, 2024

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
Copy link
Member

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

@AmosHuKe AmosHuKe linked a pull request Apr 23, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a: await response Issue require customer's further response c: enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants