backdrop icon indicating copy to clipboard operation
backdrop copied to clipboard

How to show back layer without scrim on front?

Open lastmeta opened this issue 4 years ago • 5 comments

Is your feature request related to a problem? Please describe. I have a situation where I want to show some of the back layer, while allowing the user to interact with the front.

like this: image

but of course I also want to retain the default behavior for other situations: like when I'm showing navigation options.

Describe the solution you'd like So I'd like to be able to call a sister function to .revealBackLayer(); or even something like this .revealBackLayer(activeFront: true);

What I'm looking for How would you go about implementing this? I'd be happy to implement it if you guys are busy, because I want this feature now. But I'd like some pointers or hints as I don't know the code base well. What steps would you go through to implement this?

lastmeta avatar Jan 06 '22 18:01 lastmeta

did you tried with frontLayerScrim: Colors.transparent that should remove the scrimColor.

Sadly to enable user interaction (like tap, etc) behavior: HitTestBehavior.opaque, in the following code would not allow it:

https://github.com/fluttercommunity/backdrop/blob/715f6d7e54df13bfe73ffb609e0d27413c0bcfac/lib/src/scaffold.dart#L515-L522

Suggesting following changes:

  • add HitTestBehavior frontLayerScrimBehaviour [could also add corresponding backLayerScrimBehaviour]
  • rename frontLayerScrim -> frontLayerScrimColor - same for backLayerScrim
  • keep frontLayerScrim and backLayerScrim for backward compatibility - with deprecation warning - can check how we previously deprecated frontLayerBorderRadius for reference.

@WieFel What are your views on it?

daadu avatar Jan 09 '22 06:01 daadu

@lastmeta Backdrop behaviour in MDG defines that the front layer should be inactive when backLayer is revealed, therefore this is the default(hard-coded) behaviour.

daadu avatar Jan 09 '22 06:01 daadu

@lastmeta Backdrop behaviour in MDG defines that the front layer should be inactive when backLayer is revealed, therefore this is the default(hard-coded) behaviour.

thats fine. in our case we want to reveal a portion of the backlayer which provides information and is not interacted with. perhaps MDG would suggest we put that information on the front layer but having it on the back and having the front be interactive gives a clean and clear distinction between info and interact portions of the screen.

I was able to create a workaround (rather than a real solution) this problem in the following way:

...
            if (_hasFrontLayerScrim) _buildInactiveLayer(context),
...
  /// this is not an ideal solution to
  /// https://github.com/fluttercommunity/backdrop/issues/117
  /// because I don't want the backdrop layer to have access to the streams
  /// I'd rather the widget inform the backdrop layer how to behave
  /// However, I tried making the `Offstage` in `_buildInactiveLayer` work
  /// according to a widget variable which was modified in realtime by
  /// `.revealBackLayer(activeFront: true);` but that failed to work, so
  /// though this is not the pure top-down solution I was hoping for, it is
  /// sufficient for now: 
  /// look it up how you should build front layer in real time:
  bool get _hasFrontLayerScrim => streams.app.page.value == 'Home';

lastmeta avatar Jan 09 '22 06:01 lastmeta

I think the scrim can be made optional, therefore re-opening this issue.

Feel free to file PR with changes mentioned above.

daadu avatar Jan 09 '22 15:01 daadu

Suggesting following changes:

* add `HitTestBehavior frontLayerScrimBehaviour` [could also add corresponding `backLayerScrimBehaviour`]

* rename `frontLayerScrim` -> `frontLayerScrimColor` - same for `backLayerScrim`

* keep `frontLayerScrim` and `backLayerScrim` for backward compatibility - with deprecation warning - can check how we previously deprecated `frontLayerBorderRadius` for reference.

@daadu Seems reasonable. LGTM!

WieFel avatar Jan 09 '22 19:01 WieFel