Giter Site home page Giter Site logo

Comments (13)

daadu avatar daadu commented on June 15, 2024 2

@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

from backdrop.

daadu avatar daadu commented on June 15, 2024 1

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

from backdrop.

daadu avatar daadu commented on June 15, 2024 1

I will be working on this weekend.

from backdrop.

daadu avatar daadu commented on June 15, 2024

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?

from backdrop.

daadu avatar daadu commented on June 15, 2024

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.

from backdrop.

felixwortmann avatar felixwortmann commented on June 15, 2024

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.

from backdrop.

daadu avatar daadu commented on June 15, 2024

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

from backdrop.

felixwortmann avatar felixwortmann commented on June 15, 2024

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

from backdrop.

WieFel avatar WieFel commented on June 15, 2024

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.

from backdrop.

felixwortmann avatar felixwortmann commented on June 15, 2024

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

from backdrop.

felixwortmann avatar felixwortmann commented on June 15, 2024

Sounds good

from backdrop.

WieFel avatar WieFel commented on June 15, 2024

@daadu Yes, sounds good! :)

from backdrop.

daadu avatar daadu commented on June 15, 2024

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

BackdropSubHeader is undocumented. I need your help for this!

from backdrop.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.