CODEWITHSUNDEEP
flutteranimationstack
Leo Letto
Leo Letto

Reputation: 1816

Simulate z-index effect on flutter

I have an animation inside a stack where part of the text content is hidden and only visible when the animated background passes above the item it self inside a stack, example code:

Stack(
  children: [
    Text('Something...'),
    AnimatedBackground(),
    AnimatedLightStick(),
  ],
)

The idea is that the light stick will move alongside the background (which is actually a foreground hiding the text) and reveal it because the background is painted using a gradient transparent in the middle, and it works well, Here is an example. But I'd like to something more flexible an divide the Text widget in a way that only a word or half of the text remains behind the background while the other parte is aways visible, this would be easy to do simply playing around with css z-index property, I searched but I didn't find anything like that for flutter, is it possible to simulate this effect and bring only part of the text forward?

I tried to do something like this:

Stack(
  children: [
    Text('Hidden text...'),
    AnimatedBackground(),
    AnimatedLightStick(),
    Text('Visible text')
  ],
)

And kind of worked but since I need the text aligned in the middle o play with only a hidden word inside a phrase it would be a nightmare to adjust alignment (or not?)

Upvotes: 0

Views: 493

Answers (1)

kevlatus
kevlatus

Reputation: 360

I don't know about your z-index based approach, but for Flutter you could make use of a CustomClipper to cut out a piece of your background.

The cutout piece needs to move along your light stick to create the intended effect. Check out this example to find out, if it might be a suitable solution.

Upvotes: 2

Related Questions