fluttercommunity/backdrop

Add Subheader option

felixwortmann opened this issue ยท 13 comments

I think it would be a good idea to make it possible to add a header for the FrontLayer while it is not visible

According to the Material Design guidelines it should also be part of a backdrop

It should look like this (at the bottom):

image

daadu commented

It was originally planned. But I don't know what is the best way to implement this. Do you have any idea?

Also @WieFel what do you think about it?

daadu commented

Should it be an attribute (say Widget subHeader) in BackdropScaffold ? or Should we make another widget (say BackdropSubHeaderFrontLayer) which can be dropped in as frontLayer (As we did this with BackdropNavigationBackLayer).

@felixwortmann @WieFel Let me know your views.

I think just a widget (SubHeader) would be good. I did not read the code where this has to be added - so I can not say which would be easier to implement.

daadu commented

I think subHeader attribute is better given that it is of type Widget so that it is customisable enough but also default TextStyle and Padding

daadu commented

Also with stickyFrontLayer we need to make sure that the subHeader is visible when backLayer is active

It was originally planned. But I don't know what is the best way to implement this. Do you have any idea?

Also @WieFel what do you think about it?

I did not read all the code so I also do not know the best way. This might help though: https://medium.com/@CORDEA/implement-backdrop-with-flutter-73b4c61b1357

I think it is already possible to implement it with the package as it is right now. Front layers would have to consist of a Column that contains the subheader and the front layer content.

Another way would be to add a BackdropSubHeaderFrontLayer, as @daadu already mentioned. I think it could look like this:

BackdropSubHeaderFrontLayer(
    header: ...,
    body: ...,
)

Where header and body would be of type widget.

I just wrote a litttle POC for myself. It only shows the SubHeader when the FrontPanel is closed. You can take a look here - you can just run the example and close the backdrop

daadu commented

@WieFel I would suggest going with subHeader attribute to BackdropScaffold instead of BackdropSubHeaderFrontLayer widget - primarily because of handling stickyFrontLayer when subHeader is presents. MDG mandates that the subHeader should be visible. Also because sub-header is MDG is defined as main component (although optional) of the Backdrop Anatomy.

I would suggest:

  1. add final Widget subHeader; as attribute to BackdropScaffold
  2. modify _buildFrontPanel method to accommodate it.
  3. wrap widget.subHeader with DefaultTextStyle as mentioned in MDG for subHeader. So for user simply setting Text("Sub Header") should do the work and off course he can then modify it if it wants. This is how it works in say AppBar - where setting title with simple Text widget does the magic.
  4. handle stickyFrontLayer make sure the height of the subHeader widget is atleast visible - for eg. If BackLayer has full screen content then the frontLayer should drop completely (which would happen in current version) but with subHeader visible. We would need to internally pass the key to subHeader Widget, to calculate its height.

Moreover, we could provide a helper widget (Like ListTile in ListView) say BackdropSubHeader which can be simply dropped in as subHeader if user wants standard implementation with additional options like (apart from title)

  • bool showDivider
  • Color dividerColor
  • double dividerHeight
  • bool automaticallyImplyLeading (used to show Icon to show upward arrow when backLayer is visible as leading and not visible when frontLayer is visible, also should fling when clicked on it [Check MDG], default: true)
  • bool automaticallyImplyTrailing (used to show Icon to show upward arrow when backLayer is visible as trailing and not visible when frontLayer is visible, also should fling when clicked on it [Check MDG], default: false)
  • Widget leading
  • Widget trailing

BackdropSubHeader would be recommended way to add subHeader to Backdrop.

Let me know your thoughts @WieFel @felixwortmann

daadu commented

I will be working on this weekend.

Sounds good

@daadu Yes, sounds good! :)

daadu commented

@WieFel @felixwortmann I have written this feature. Please test and give me your feedback.

BackdropSubHeader is undocumented. I need your help for this!