Dim lowerLayer when Rubber is active

[edisonywh]

I think it's common behavior that when your sheet slides up, the background dims to a certain degree. It would be nice if Rubber can handle this. I'm currently trying out ways to do it, via listening on AnimationStatus, or even using ValueBuilder to listen on animationState, but neither of this work nicely (I want the background to be dimmed the moment it starts sliding up, and automatically un-dim when it's dragged down, right now with my weird hack there are things like setting state to trigger a refresh, and even then it's pretty janky)

[jonivesto]

@edisonywh I agree, this is a must have feature in a plugin like this. In the meantime, you can use this solution:

1. Wrap your lowerLayer widget with Stack
2. Add a Container to your Stack and set it's color to black
3. Wrap the Container with Opacity
4. Wrap the Opacity with IgnorePointer

5, Now you can use addListener() to set states for the Opacity and IgnorePointer like this:

@override
  void initState() {
    _rubberController = RubberAnimationController(
      vsync: this,
      duration: Duration(milliseconds: 300),
      dismissable: true,     
    );
    _rubberController.addListener((){
      setState(() {
        _opacity = _rubberController.value;
        _ignoring = _rubberController.value<0.5;
      });
    });
    super.initState();
  }

[edisonywh]

@jonivesto thanks for the code example! I tried something similar but with addStatusListener, and it worked pretty bad because it's hard to know when the animation starts to drag up/down in order to rebuild. Haven't tried out your example yet but it's probably better than mine :)

For now I've actually just used the built in Flutter one, there was a new update recently to fix the slide up animation so that looks better now!