allow variable height front pages

[mockturtl]

Is your feature request related to a problem? Please describe.

My first front page is a large form. It displays well.

My second front page is mostly empty:

I'd like to provide a target height for this page, so it expands to a more appropriate size for its content.

Describe the solution you'd like

I can get my desired behavior by adjusting the top param of the end rectangle in _getPanelAnimation.

Could we expose a variable for this?

Describe alternatives you've considered

I haven't explored how this will interact with the other BackdropScaffold constructor args.

Maybe PreferredSizeWidget is a useful way to convey the behavior?

Additional context

The Material spec doesn't address whether front pages should have a consistent height.

[daadu]

@mockturtl Have you tried stickyFrontLayer and headerHeight arguments of BackdropScaffold, to get desired UI?

[mockturtl]

• Playing with values in example/lib/navigation.dart, my understanding of the stickyFrontLayer behavior is "When closed, the front layer will occupy as much height as possible without occluding the back layer. If the back layer occupies the entire screen height[1], this parameter has no effect."

[1] This is my use case: my back layer is a large menu. Apologies for misrepresenting that in the screenshot above.

• headerHeight seems to control the height of the front layer in its inactive / closed state (this contradicts my reading of the docs[2]). Additionally, if stickyFrontLayer == true and headerHeight is less than the available space, headerHeight is ignored.

[2] It might be desirable to document the control flow inside the _headerHeight getter and _getPanelAnimation, if it's not too cumbersome to explain.

---

From what I can tell, the existing constructor args for BackdropScaffold don't allow me to specify "front page A opens to height X, front page B opens to height Y."

@willlarche Does Material have an opinion on a Backdrop with variable-height front layers? I'll double check Crane.

[daadu]

@mockturtl Thanks for pointing out problem in headerHeight docs, will correct it.

Regarding your requirement, as far as I understand(from checking Crane example), you want to have "extra" space under appbar, that is visible even when the backLayer is concealed.

A solution for that would be to set bottom of BackdropAppBar. Check the following code (modified example/main.dart):

MaterialApp(
      title: 'Backdrop Demo',
      home: BackdropScaffold(
        appBar: BackdropAppBar(
          title: Text("Backdrop Example"),
          actions: <Widget>[
            BackdropToggleButton(
              icon: AnimatedIcons.list_view,
            )
          ],
          bottom: PreferredSize(
            child: Column(
              children: [
                Text("Menu 1"),
                Text("Menu 2"),
              ],
            ),
            preferredSize: Size.fromHeight(100),
          ),
        ),
        backLayer: Center(
          child: Text("Back Layer"),
        ),
        subHeader: BackdropSubHeader(
          title: Text("Sub Header"),
        ),
        frontLayer: Center(
          child: Text("Front Layer"),
        ),
      ),
    );

Screenshot for it:

As far as I understand, the "extra" (always visible stuff) should be part of AppBar and not backLayer (which is revealed and concealed)

[willlarche]

@mockturtl Hi! So wonderful to see this implementation. Much thanks to everyone working on expanding Material coverage in the community.

We have no issue with that! Go for it!

[mockturtl]

Regarding your requirement, as far as I understand(from checking Crane example), you want to have "extra" space under appbar, that is visible even when the backLayer is concealed

Not really. I want the front layer's height to be configurable for each page. I'm not sure how to explain differently.

I'm happy to submit a PR if you think the idea makes sense.

Back layer and appbar look good

Front layer: Current behavior

Front layer: Desired behavior

[daadu]

@mockturtl Ok, got your point. Go ahead with the PR! BTW, what should we name the param? Any idea?

Few of my suggestions:

• double frontLayerStartFrom: 0
• double frontLayerTopMargin: 0
• ??

Also while filing PR can you correct the docs for headerHeight - instead of using "closed" and "open" term (earlier we used them), use phrases like "when backLayer is concealed/revealed", that should avoid the confusion with the usage of `headerHeight.

[daadu]

This has landed with v0.5.0 on pub.dev.