fluttercommunity / backdrop

Backdrop implementation in flutter.
https://pub.dev/packages/backdrop
MIT License
336 stars 36 forks source link

Add Subheader option #26

Closed felixwortmann closed 4 years ago

felixwortmann commented 4 years ago

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 4 years ago

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 4 years ago

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.

felixwortmann commented 4 years ago

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 4 years ago

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 4 years ago

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

felixwortmann commented 4 years ago

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

WieFel commented 4 years ago

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.

felixwortmann commented 4 years ago

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 4 years ago

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

BackdropSubHeader would be recommended way to add subHeader to Backdrop.

Let me know your thoughts @WieFel @felixwortmann

daadu commented 4 years ago

I will be working on this weekend.

felixwortmann commented 4 years ago

Sounds good

WieFel commented 4 years ago

@daadu Yes, sounds good! :)

daadu commented 4 years ago

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

BackdropSubHeader is undocumented. I need your help for this!