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

How to show back layer without scrim on front? #117

Open
lastmeta opened this issue Jan 6, 2022 · 5 comments
Open

How to show back layer without scrim on front? #117

lastmeta opened this issue Jan 6, 2022 · 5 comments

Comments

@lastmeta
Copy link

lastmeta commented Jan 6, 2022

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?

@daadu
Copy link
Member

daadu commented Jan 9, 2022

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:

Widget _buildInactiveLayer(BuildContext context) {
return Offstage(
offstage: animationController.status == AnimationStatus.completed,
child: FadeTransition(
opacity: Tween<double>(begin: 1, end: 0).animate(animationController),
child: GestureDetector(
onTap: () => fling(),
behavior: HitTestBehavior.opaque,

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

daadu commented Jan 9, 2022

@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.

@lastmeta
Copy link
Author

lastmeta commented Jan 9, 2022

@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 lastmeta closed this as completed Jan 9, 2022
@daadu
Copy link
Member

daadu commented Jan 9, 2022

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

Feel free to file PR with changes mentioned above.

@daadu daadu reopened this Jan 9, 2022
@WieFel
Copy link
Collaborator

WieFel commented Jan 9, 2022

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants