0

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?)

Leo Letto
  • 1,774
  • 1
  • 12
  • 17
  • z index is defined by a position in `children` list – pskink Apr 05 '21 at 16:16
  • @pskink Yes, I know, which why I'm trying to find a solution so I can maybe break my text and wrap inside some `ZIndex` widget maybe – Leo Letto Apr 05 '21 at 16:27
  • i dont think that you can break your text into words easily: you would need to know the rendered width of every word which is not so easy to get – pskink Apr 05 '21 at 16:41
  • In case of breaking words and use the `z-index` I could use the `RichText` and set the index per each `TextSpan`, if there's no solution I would have to do something like you said, but it's hard to align then – Leo Letto Apr 05 '21 at 16:46
  • Just found [this](https://stackoverflow.com/a/60065737/6907051) solution which my help, I'll try to implement something based on the the text size – Leo Letto Apr 05 '21 at 16:50
  • indeed, its not a piece of cake ;-) – pskink Apr 05 '21 at 16:52

1 Answers1

2

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.

kevlatus
  • 330
  • 1
  • 8