Close back layer programatically [need to document it]

[TenPetr]

It would be great, if you could close or toggle between front and back layers programatically without using BackdropToggleButton. I did not find a way, how to do it.

For example - I am using some filters in this widget and when user select filter, I would like to close back layer automatically, without user need to click on toggle button in the appbar's actions.

If you have any idea, how to implement this with existing code, please let me know.

Thanks for your time and suggestions.

[WieFel]

Hi @TenPetr.
This is obviously possible. Just use the following code snippets in any point of your code (but below BackdropScaffold within the widget tree!):

Backdrop.of(context).revealBackLayer();

to reveal (show) the back layer, and

Backdrop.of(context).concealBackLayer();

to conceal (hide) the back layer.

If you want to use this directly within the widget in which you build your BackdropScaffold, you have to wrap the call to Backdrop.of(context) into a LayoutBuilder, e.g.:

MaterialApp(
      home: BackdropScaffold(
        ...
        frontLayer: Center(
          child: LayoutBuilder(
            builder: (context, constraints) => RaisedButton(
              onPressed: () {
                Backdrop.of(context).concealBackLayer();
              },
              child: Text("Conceal back layer"),
            ),
          ),
        ),
      ),
    );

[TenPetr]

That is amazing! I tried this solution, but I did not have my widget wrapped in the LayoutBuilder, so that is why my code did not work. Thank you so much!

[daadu]

@WieFel Should we put this in README? Under headline "Accessing the internal state of Backdrop".

[WieFel]

@daadu yes, I thought so too!

[daadu]

I am opening this issue until it is put in README. Also Builder should be used instead of LayoutBuilder, which is more generic. Also in the doc and FWoTW video, it specifies the use-case that we want that is - "Need to look up a parent in the same build method".

[daadu]

Also need to specify that the "Builder wrapper" is not mandatory, in case if Backdrop.of is called with separate widget (which has to be the child of BackdropScaffold) it not required as the context passed is of that widget. It is only required if Backdrop.of is called with in the same build method where the root BackdropScaffold is initialized.

This applies to other .of method of InhteritedWidget (which Backdrop is) like - Scaffold.of, MediaQuery.of, Theme.of, etc. This is a general pattern in flutter. New flutter users are not aware of it, since it requires to know how "InhertiedWidgets" work and how "widget tree is built and maintained".

[daadu]

@WieFel Created PR for documenting it. Also @TenPetr is the "Note" clear enough to explain why Builder is required or more explanation with code is required?

[TenPetr]

@daadu Yes, I think I understand.

Also, what I have noticed here, when you have one or more FloatingActionButton, they are still visible, even when back layer is toggled on. Do you think there is any setting or an option, how to hide these or should I just use Backdrop.of(context).isBackLayerConcealed to hide or show them? @WieFel

Thanks a lot!

[daadu]

There are callbacks in BackdropScaffold that you can use - onBackLayerConcealed and onBackLayerRevealed.

[TenPetr]

There are callbacks in BackdropScaffold that you can use - onBackLayerConcealed and onBackLayerRevealed.

Perfect, I will include my code snippet here

onBackLayerRevealed: () => setState(() => areFloatingsVisible = false),
onBackLayerConcealed: () => setState(() => areFloatingsVisible = true),

[TenPetr]

Also, one more thing please.. When I have a form in the back layer and keyboard opens, this bottom transparent "gap" will jump above the keyboard. Is there any way, how to set my keyboard to overlay this bottom gap?

I am including some images here.

Thanks for your suggestions

[WieFel]

Also, what I have noticed here, when you have one or more FloatingActionButton, they are still visible, even when back layer is toggled on. Do you think there is any setting or an option, how to hide these or should I just use Backdrop.of(context).isBackLayerConcealed to hide or show them? @WieFel

Also you could add the FloatingActionButton to front layer only, like so:

BackdropScaffold(
  ...
  frontLayer: Scaffold(
    floatingActionButton: FloatingActionButton(
      onPressed: () {},
      child: Icon(Icons.add),
    ),
    body: Center(child: Text("Front Layer")),
  ),
),

Like this, it is by design shown only when front layer is visible ;)

[WieFel]

Also, one more thing please.. When I have a form in the back layer and keyboard opens, this bottom transparent "gap" will jump above the keyboard. Is there any way, how to set my keyboard to overlay this bottom gap?

I once had the same problem. Therefore we added resizeToAvoidBottomInset property to BackdropScaffold. As discussed here, setting resizeToAvoidBottomInset: false should hopefully solve your problem.

[TenPetr]

resizeToAvoidBottomInset: false

Unfortunately, this did not help me. :/ Do you have any other idea, how to solve it, please?

[daadu]

try resizeToAvoidBottomPadding: false

[TenPetr]

resizeToAvoidBottomPadding: false

I believe this property is depricated and it is not included in the BackdropScaffold at all.

One solution that came to my mind is just hide inactive part like this, but it really does not solve the issue.

inactiveOverlayColor: white,
inactiveOverlayOpacity: 1,

[WieFel]

I think the problem is more generic, not specific to BackdropScaffold. Can you try for a moment exchanging the BackdropScaffold by a normal Scaffold and check if the problem with the keyboard still occurs?

[TenPetr]

I think the problem is more generic, not specific to BackdropScaffold. Can you try for a moment exchanging the BackdropScaffold by a normal Scaffold and check if the problem with the keyboard still occurs?

Yes, before I used this package, I was using alerts with forms inside, and whenever keyboard show up, whole scaffold just moved up.

[TenPetr]

Okay, I found a problem. Since I am using cards and bottom navigation bar, this issue was solved by setting resizeToAvoidBottomInset: false in the navigation parent widget. :)

[TenPetr]

One last question please - Is it possible to pass data from back layer back to front layer?

On my back layer i have a filter and search and whenever user find desired result and tap on it, I want to pass selected data somehow back to front layer widget. (My back layer is a separate widget and since I am not using Navigator, I cant pass data between these two widgets..) Do you have any idea, how to implement this, please?

Thanks a lot! @WieFel @daadu

[WieFel]

@TenPetr this is common use case in flutter and can be solved with callbacks. Check this.

Also, check the "Contextual Controls" use case in https://fluttercommunity.github.io/backdrop/demo/#/ which passes data between front- and back-layer.

[daadu]

There are various ways to do it in flutter, this is known as state management.

Some simpler ways are - ScopedModel, provider

Some sophisticated ways are - BLoC, Redux, etc

Check the following videos for it:

• https://www.youtube.com/watch?v=RS36gBEp8OI
• https://www.youtube.com/watch?v=d_m5csmrf7I

[daadu]

For simpler cases, as @WieFel mentioned you can you callbacks.

[TenPetr]

Thanks a lot both of you. I figured out that I can simply pass method reference to second widget and that I can call this method that is defined in the parent widget this way, so now, I can simply pass data as an argument to this function.

Thanks a lot for your help, guys!