[bug] header Height not updated once built

[fluttercommunity]

[bug] header Height not updated once built

[daadu]

@WieFel updateBackLayerHeight idea seems like a workaround.

Proper fix would be to not set headerHeight etc, on initState and do it instead in build itself, I am working on this. Meanwhile you can provide with the workaround to @proninyaroslav

[daadu]

@hassanbasanjide I will look into this during weekend.

[WieFel]

I will have a look asap and provide you with a feature branch you can use meanwhile...

[daadu]

I have worked on the fix in branch fix/stickyHeaderWhenBackLayerUpdated

@proninyaroslav @amebrahimi @hassanbasanjide Please test the fix by pointing to this branch in pubspec.yaml

@WieFel Can you also test this changes against demo app? And I don't think we need to go for workaround now!

[daadu]

This fix has landed in v0.4.5 on pub.dev

@hassanbasanjide @proninyaroslav Check yourself on repo and pub README!!

[hassanbasanjide]

@WieFel Thank you I will look at this but I'm looking forward to see this in production

[WieFel]

Could you provide a simple code snippet with what you are trying to achieve?

Why do you need to change the height dynamically via BLOC?
Maybe you should have a look at the stickyFrontLayer property, which allows to automatically adapt the height to the back layer content.

[daadu]

@hassanbasanjide It could be because of flutter not redrawing the BackdropScaffold. Does setting UniqueKey to BackdropScaffold solve the issue?

As @WieFel suggested, share some code that could reproduce the bug.

[hassanbasanjide]

@WieFel stickyfrontlayer is true. and backlayers have a different height but nothing Changed. ;(
the space of back layer witch have no content is blue.
actually the header height just accept one height at begin.
@OverRide
Widget build(BuildContext context) {
@OverRide
void changeController() {

  setState(() {
    expanded ? _controller.forward() : _controller.reverse();
    expanded = !expanded;

  });
}

return BlocBuilder<StoreBackDropControllerBloc,
    StoreBackDropControllerState>(
  builder: (context, state) {
    return BackdropScaffold(
     stickyFrontLayer: true,
      resizeToAvoidBottomInset: false,
      appBar: state.when(
        initial: (state) => storeNormalAppBar(
          context: context,
          targetFunction: () => changeController(),
        ),
        searchPage: (state) => searchAppBar(
          context: context,
          targetFunction: () => changeController(),
        ),
        filterPage: (state) => filterAppBar(
          context: context,
          targetFunction: () => changeController(),
        ),
      ),
      frontLayer: StorePageSubScreenForm(),
      subHeaderAlwaysActive: false,
  
      frontLayerBorderRadius: BorderRadius.circular(0),
      controller: _controller,
      backLayer: state.when(
          initial: (state) => SearchScreen(),
          searchPage: (state) => SearchScreen(),
          filterPage: (state) => FiltersScreen()),
      
    );
  },
);

}
}

[hassanbasanjide]

[hassanbasanjide]

@daadu i need some things like images. now what is your recommend?

[hassanbasanjide]

The problem is you can't change the key which is created for the backdrop. And because of that when the backdrop changes in any state, the widget isn't being recreated and the height of the widget is not being redrawn. @daadu I can't set a new UniqueKey upon changing state because the BackdropScaffold doesn't accepts Key. And if I change the parent's key when the state changes It the backLayer Isn't being drawn.

[WieFel]

@hassanbasanjide I had a look at it but it is still not enough code for me to reproduce the issue completely.
I pushed a version of BackdropScaffold containing the key property to the branch scaffold_key.

You can try to import it into your project like so (in your pubspec.yaml):

dependencies:
  backdrop:
    git:
      url: [e-mail]:fluttercommunity/backdrop.git
      ref: scaffold_key

Try setting a key on BackdropScaffold and tell us if that solves your problem. If yes, we can apply the changes to the master channel of backdrop.

[WieFel]

@hassanbasanjide let un know if it works

[daadu]

@hassanbasanjide Any update?

[amebrahimi]

@WieFel I want to use this

dependencies:
  backdrop:
    git:
      url: [email protected]:fluttercommunity/backdrop.git
      ref: scaffold_key

but I can't is there any permissions you have to give or something?

[WieFel]

  url: [email protected]:fluttercommunity/backdrop.git

@amebrahimi maybe try url: https://github.com/fluttercommunity/backdrop.git

Does that work? Which error do you get?

[proninyaroslav]

@daadu
I faced a similar problem. Calling setState changes the height of the widget, but this doesn't affect the height of the back layer, it stays the same. I also tried the scaffold_key branch, but it has similar behavior.

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String text = "Back Layer 1";
  double height = 100;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Backdrop Example",
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: BackdropScaffold(
        appBar: BackdropAppBar(
          title: Text("Backdrop Example"),
          stickyFrontLayer: true,
          actions: <Widget>[
           LayoutBuilder(
              builder: (context, constraints) => IconButton(
                icon: Icon(Icons.terrain),
                onPressed: () {
                  setState(() {
                    height = 200;
                    text = "Back layer 2";
                    Backdrop.of(context).fling();
                  });
                },
              ),
            ),
          ],
        ),
        backLayer: Container(
          height: height,
          child: Center(child: Text(text)),
        ),
        frontLayer: Center(
          child: Text("Front Layer"),
        ),
      ),
    );
  }
}

[proninyaroslav]

[WieFel]

@proninyaroslav thanks for the code example.

The problem is that changing the height of the back layer only affects the back layer itself and its children. The problem here is that BackdropScaffold (which is the parent of back layer) isn't updated, not even using the scaffold_key branch.
The original idea was that the back layer would keep its height always the same.

@daadu to solve the problem we could add a callback updateBackLayerHeight() to BackdropScaffold which could be called if the height of the back layer changes. What do you think?

[proninyaroslav]

@WieFel
Thank you for response. Is there a workaround for now? I would like to use a backdrop in app, like a hybrid of Navigation Drawable + Top Sheet (this concept is in the official guideline).

[daadu]

Thank you for response. Is there a workaround for now? I would like to use a backdrop in app, like a hybrid of Navigation Drawable + Top Sheet (this concept is in the official guideline).

@proninyaroslav Once this is fixed, can you work on adding this use case to the demo app (flutter app to demonstrate all use cases in MDG for backdrop), it is under demo/ dir?

Or @WieFel have we already covered it?

@proninyaroslav Can you post the screenshot form MDG that explains this use case?

[daadu]

@hassanbasanjide Sorry, for being 2 months late. The problem only got clear when @proninyaroslav posted a reproduceable code.

[proninyaroslav]

@daadu
Yes, now it works as expected. Thank you.

Once this is fixed, can you work on adding this use case to the demo app (flutter app to demonstrate all use cases in MDG for backdrop), it is under demo/ dir?

Ok, let me know.

[WieFel]

Or @WieFel have we already covered it?

Well there is no specific use case for targeting a changing back layer height in the material design guidelines.
Not sure if we should add this as separate use case to demo app. In my opinion the dynamic height of the back layer is actually a feature that one would already expect from this package... @daadu

[proninyaroslav]

@WieFel
This is mentioned here, in the "Revealing the back layer" section https://material.io/components/backdrop#behavior

The height of the back layer is based on the size of its content.

[proninyaroslav]

@daadu @WieFel
Is it possible to animate the transition between the back layers (size changing) when one of the layers is already revealed? In other words, moving to a second back layer with a different height makes the front layer lower/upper, but without any animation.

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String text = "Back Layer 1";
  double height = 100;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Backdrop Example",
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: BackdropScaffold(
        appBar: BackdropAppBar(
          title: Text("Backdrop Example"),
          actions: <Widget>[
           LayoutBuilder(
              builder: (context, constraints) => IconButton(
                icon: Icon(Icons.terrain),
                onPressed: () {
                  setState(() {
                    height = 200;
                    text = "Back layer 2";
                  });
                },
              ),
            ),
          ],
        ),
        stickyFrontLayer: true,
        backLayer: Container(
          height: height,
          child: Center(child: Text(text)),
        ),
        frontLayer: Center(
          child: Text("Front Layer"),
        ),
      ),
    );
  }
}

[hassanbasanjide]

@daadu thank you for your response. ;)

[daadu]

@daadu @WieFel
Is it possible to animate the transition between the back layers (size changing) when one of the layers is already revealed? In other words, moving to a second back layer with a different height makes the front layer lower/upper, but without any animation.

@proninyaroslav Use AnimatedSize widget around backLayer

[proninyaroslav]

@daadu
This idea came to me initially, but it doesn't work as expected:

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  String text = "Back Layer 1";
  double height = 100;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Backdrop Example",
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: BackdropScaffold(
        appBar: BackdropAppBar(
          title: Text("Backdrop Example"),
          actions: <Widget>[
            LayoutBuilder(
              builder: (context, constraints) => IconButton(
                icon: Icon(Icons.terrain),
                onPressed: () {
                  setState(() {
                    height = 200;
                    text = "Back Layer 2";
                  });
                },
              ),
            ),
          ],
        ),
        stickyFrontLayer: true,
        backLayer: AnimatedSize(
          vsync: this,
          duration: Duration(milliseconds: 200),
          child: Container(
            height: height,
            child: Center(child: Text(text)),
          ),
        ),
        frontLayer: Center(
          child: Text("Front Layer"),
        ),
      ),
    );
  }
}

[daadu]

@proninyaroslav Can you raise this as a new issue? I think this should be resolved. What about you @WieFel ?

[daadu]

This is working:

backLayer: NotificationListener<SizeChangedLayoutNotification>(
          onNotification: (notification) {
            SchedulerBinding.instance.addPostFrameCallback((timeStamp) {
              setState(() {});
            });
            return true;
          },
          child: SizeChangedLayoutNotifier(
            child: AnimatedSize(
              vsync: this,
              duration: Duration(milliseconds: 200),
              child: Container(
                height: height,
                child: Center(child: Text(text)),
              ),
            ),
          ),
        ),

[daadu]

The issue is _MeasureSize is notifying sizeChange only at start of animation. I think using SizeChangedLayoutNotifier inside _MesureSize should work out of the box.

[daadu]

Closing this issue, this issue will be further tracked at #55